Merge pull request #85 from mckervinc/feature/frozen

add ability to freeze columns

Author: mckervinc

.prettierrc

@@ -1,5 +1,7 @@
 {
-    "printWidth": 100,
-    "arrowParens": "avoid",
-    "trailingComma": "none"
+  "printWidth": 100,
+  "arrowParens": "avoid",
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true
 }

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 0.5.1
+
+_2023-10-04_
+
+### Features
+
+- adds the ability to freeze columns by adding the `frozen` property
+
 ## 0.5.0
 
 _2023-10-02_

example/src/App.tsx

@@ -12,6 +12,7 @@ import { Example8, Source as Example8Code } from "./examples/08-header";
 import { Example9, Source as Example9Code } from "./examples/09-scroll";
 import { Example10, Source as Example10Code } from "./examples/10-footer";
 import { Example11, Source as Example11Code } from "./examples/11-heights";
+import { Example12, Source as Example12Code } from "./examples/12-frozen";
 
 const router = createHashRouter([
   {
@@ -102,6 +103,14 @@ const router = createHashRouter([
       </Page>
     )
   },
+  {
+    path: "/frozen",
+    element: (
+      <Page title="Frozen" code={Example12Code}>
+        <Example12 />
+      </Page>
+    )
+  },
   {
     path: "/props",
     element: (

example/src/ColumnProps.tsx

@@ -88,6 +88,16 @@ const data: PropData[] = [
     type: "number",
     description: "This sets the maximum pixel width of the column exactly"
   },
+  {
+    prop: "sortable",
+    type: "boolean",
+    description: "This determines if a column is sortable"
+  },
+  {
+    prop: "frozen",
+    type: "boolean",
+    description: "This determines if a column is frozen"
+  },
   {
     prop: "expander",
     type: "boolean | ExpanderElement",

example/src/Page.tsx

@@ -21,16 +21,20 @@ const Content = styled.div`
   box-shadow: 0 2px 8px #bbb;
 `;
 
+const BaseSegment = styled(Segment)`
+  flex-grow: 1;
+`;
+
 const Title = ({ title }: { title: string }) => (
   <Container>
     <Header size="huge">{title}</Header>
   </Container>
 );
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <Segment basic>
+  <BaseSegment basic>
     <Content>{children}</Content>
-  </Segment>
+  </BaseSegment>
 );
 
 const Application = styled(Sidebar.Pushable)`
@@ -45,12 +49,21 @@ const PageContent = styled(Sidebar.Pusher)`
     overflow-y: auto;
   }
 
+  @media screen and (min-width: 769px) {
+    display: flex;
+    flex-direction: column;
+  }
+
   @media screen and (max-width: 768px) {
     width: 100%;
     transform: translate3d(0, 0, 0) !important;
   }
 `;
 
+const SnippetWrapper = styled.div`
+  flex: 1 1;
+`;
+
 const Banner = styled.code`
   color: #50f97a;
   white-space: pre;
@@ -102,6 +115,9 @@ const LinkContainer = () => (
     <Menu.Item as={Link} to="/footer">
       Footer
     </Menu.Item>
+    <Menu.Item as={Link} to="/frozen">
+      Frozen
+    </Menu.Item>
     <Menu.Item as={Link} to="/props">
       Table Props
     </Menu.Item>
@@ -161,7 +177,11 @@ const Page = ({ title, code, children }: PageProps) => {
       <PageContent id="pusher">
         {!!title && <Title title={title} />}
         <Wrapper>{children}</Wrapper>
-        {!!code && <Snippet code={code} />}
+        {!!code && (
+          <SnippetWrapper>
+            <Snippet code={code} />
+          </SnippetWrapper>
+        )}
       </PageContent>
     </Application>
   );

example/src/Props.tsx

@@ -570,6 +570,10 @@ interface ColumnProps<T> {
    * Determines whether or not a column is sortable.
    */
   sortable?: boolean;
+  /**
+   * Determines whether or not the column is frozen during horizontal scrolling.
+   */
+  frozen?: boolean;
   /**
    * Marks this cell as an expansion cell. The style is pre-determined, and does the
    * functionalitty of collapsing/expanding a row.

example/src/examples/01-base.tsx

@@ -36,9 +36,9 @@ interface TestData {
 
 const data: TestData[] = _.range(3000).map(i => ({
   id: i + 1,
-  firstName: faker.name.firstName(),
-  lastName: faker.name.lastName(),
-  email: faker.internet.email()
+  firstName: randFirstName(),
+  lastName: randLastName(),
+  email: randEmail()
 }));
 
 const columns: ColumnProps<TestData>[] = [

example/src/examples/10-footer.tsx

@@ -107,11 +107,13 @@ const Example10 = () => {
             ) : (
               <div style={{ display: "flex" }}>
                 {columns.map((c, i) => {
-                  const width = `${widths[i]}px`;
+                  const width = widths[i];
                   const style: React.CSSProperties = {
                     width,
                     minWidth: width,
-                    padding: "8px"
+                    padding: "8px",
+                    position: c.frozen ? "sticky" : undefined,
+                    left: c.frozen ? widths.slice(0, i).reduce((pv, c) => pv + c, 0) : undefined
                   };
                   return (
                     <div key={c.key} style={style}>
@@ -296,11 +298,13 @@ const ComplexFooter = ({ stickyFooter }) => {
         <Footer>
           <div style={{ display: "flex" }}>
             {columns.map((c, i) => {
-              const width = \`\${widths[i]}px\`;
+              const width = widths[i];
               const style: React.CSSProperties = {
                 width,
                 minWidth: width,
-                padding: "8px"
+                padding: "8px",
+                position: c.frozen ? "sticky" : undefined,
+                left: c.frozen ? widths.slice(0, i).reduce((pv, c) => pv + c, 0) : undefined
               };
               return (
                 <div key={c.key} style={style}>

example/src/examples/12-frozen.tsx

@@ -0,0 +1,44 @@
+import { ColumnProps, Table } from "react-fluid-table";
+import { TestData, testData } from "../data";
+
+const columns: ColumnProps<TestData>[] = [
+  {
+    key: "id",
+    header: "ID",
+    width: 50,
+    frozen: true
+  },
+  {
+    key: "firstName",
+    header: "First",
+    width: 120,
+    frozen: true
+  },
+  {
+    key: "lastName",
+    header: "Last",
+    width: 120
+  },
+  {
+    key: "email",
+    header: "Email",
+    width: 250
+  }
+];
+
+const Example12 = () => <Table data={testData} columns={columns} tableWidth={400} />;
+
+const Source = `
+const data = [/* ... */];
+
+const columns: ColumnProps<TestData>[] = [
+  { key: "id", header: "ID", width: 50, frozen: true },
+  { key: "firstName", header: "First", width: 120, frozen: true },
+  { key: "lastName", header: "Last", width: 120 },
+  { key: "email", header: "Email", width: 250 }
+];
+
+const Example = () => <Table data={data} columns={columns} tableWidth={400} />;
+`;
+
+export { Example12, Source };

index.d.ts

@@ -150,6 +150,10 @@ export interface ColumnProps<T> {
    * Determines whether or not a column is sortable.
    */
   sortable?: boolean;
+  /**
+   * Determines whether or not the column is frozen during horizontal scrolling.
+   */
+  frozen?: boolean;
   /**
    * Marks this cell as an expansion cell. The style is pre-determined, and does the
    * functionalitty of collapsing/expanding a row.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A React table inspired by react-window",
   "author": "Mckervin Ceme <mckervinc@live.com>",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "npm": ">=5"
   },
   "scripts": {
+    "clean": "rm -rf dist",
     "build": "rm -rf dist ||: && rollup -c --environment BUILD:production",
     "start": "rollup -c -w --environment BUILD:development",
     "site:build": "cd example && yarn install && yarn build"

src/Footer.tsx

@@ -6,25 +6,26 @@ import { cx, findTableByUuid } from "./util";
 interface InnerFooterCellProps<T> {
   width: number;
   column: ColumnProps<T>;
+  prevWidth: number;
 }
 
-const FooterCell = React.memo(function <T>(props: InnerFooterCellProps<T>) {
+const FooterCell = React.memo(function <T>({ prevWidth, ...rest }: InnerFooterCellProps<T>) {
   // hooks
   const { rows } = useContext(TableContext);
 
   // instance
-  const { width, column } = props;
-  const cellWidth = width ? `${width}px` : undefined;
+  const { width, column } = rest;
   const style: React.CSSProperties = {
-    width: cellWidth,
-    minWidth: cellWidth,
-    padding: !column.footer ? 0 : undefined
+    width: width || undefined,
+    minWidth: width || undefined,
+    padding: !column.footer ? 0 : undefined,
+    left: column.frozen ? prevWidth : undefined
   };
 
   const FooterCellComponent = column.footer;
   return (
-    <div className="cell" style={style}>
-      {!!FooterCellComponent && <FooterCellComponent rows={rows} {...props} />}
+    <div className={cx(["cell", column.frozen && "frozen"])} style={style}>
+      {!!FooterCellComponent && <FooterCellComponent rows={rows} {...rest} />}
     </div>
   );
 });
@@ -46,9 +47,8 @@ const Footer = () => {
   const ref = useRef<HTMLDivElement>(null);
 
   // constants
-  const width = pixelWidths.reduce((pv, c) => pv + c, 0);
   const style: React.CSSProperties = {
-    minWidth: stickyFooter ? undefined : `${width}px`,
+    minWidth: stickyFooter ? undefined : pixelWidths.reduce((pv, c) => pv + c, 0),
     ...(footerStyle || {})
   };
 
@@ -109,7 +109,12 @@ const Footer = () => {
       >
         <div className="row-container">
           {columns.map((c, i) => (
-            <FooterCell key={c.key} column={c} width={pixelWidths[i]} />
+            <FooterCell
+              key={c.key}
+              column={c}
+              width={pixelWidths[i]}
+              prevWidth={c.frozen ? pixelWidths.slice(0, i).reduce((pv, c) => pv + c, 0) : 0}
+            />
           ))}
         </div>
       </div>