feat(PHC-4380): add sticky column feature #331

src/components/TableModule/ReactTableModule.stories.tsx

@@ -158,6 +158,128 @@ Default.args = {
   config,
 };
 
+export const Sticky = Template.bind({});
+Sticky.args = {
+  data: [...data, ...data, ...data, ...data],
+  config: [
+    {
+      header: {
+        label: 'Description',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.description;
+        },
+      },
+      isSticky: true,
+    },
+    {
+      header: {
+        label: 'Calories',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.calories;
+        },
+      },
+      isSticky: true,
+    },
+    {
+      header: {
+        label: 'Fat',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.fat;
+        },
+      },
+    },
+    {
+      header: {
+        label: 'Carbs',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.carbs;
+        },
+      },
+    },
+    {
+      header: {
+        label: 'Category',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.category;
+        },
+      },
+    },
+    {
+      header: {
+        label: 'CategoryA',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.category;
+        },
+      },
+      isSticky: true,
+    },
+    {
+      header: {
+        label: 'CategoryB',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.category;
+        },
+      },
+    },
+    {
+      header: {
+        label: 'CategoryC',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.category;
+        },
+      },
+    },
+    {
+      header: {
+        label: 'CategoryD',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.category;
+        },
+      },
+    },
+    {
+      header: {
+        label: 'CategoryE',
+      },
+      cell: {
+        content: (dataValue: any) => {
+          return dataValue.category;
+        },
+      },
+    },
+  ] as Array<TableConfiguration>,
+};
+Sticky.parameters = {
+  docs: {
+    description: {
+      story: `Columns can be made "sticky" or so they don't travel off-screen when scrolling the
+      table horizontally. This helps keep track of what row one is looking at in tables with more
+      columns than can be visible at one time in the document. \n \n Any number of columns can be made
+      sticky. They don't have to be consecutive, and can start and end at any column. However,
+      most common use-cases will likely just involve the first one or two consecutive columns
+      being sticky.`,
+    },
+  },
+};
+
 export const Sort: ComponentStory<typeof ReactTableModule> = (args) => {
   const [sort, setSort] = React.useState({ key: null, direction: null });
 

src/components/TableModule/ReactTableModule.tsx

@@ -66,15 +66,90 @@ export const ReactTableModule = React.memo(
 
       const [sorting, setSorting] = React.useState<SortingState>([]);
 
-      if (state && !state.sorting) {
-        state.sorting = sorting;
-      }
+      const [stickyCols, setStickyCols] = React.useState<Array<any>>([]);
+      const [stickyCellsLeft, setStickyCellsLeft] = React.useState<
+        Array<number>
+      >([]);
 
       // use legacy when using config of TableModule
       if (config) {
         columns = config.map(mapTableConfigToColumnDef);
       }
 
+      React.useEffect(() => {
+        if (columns && columns.length > 0) {
+          setStickyCols(
+            columns
+              .map((c, index) => {
+                if (c.meta?.isSticky) {
+                  return index;
+                }
+              })
+              .filter((index) => {
+                if (index !== undefined) {
+                  return true;
+                }
+              })
+          );
+        }
+      }, []);
+
+      // add isStickyLast class
+      React.useEffect(() => {
+        if (stickyCols.length === 0) {
+          return;
+        }
+        const allStickyCells = Array.from(
+          document.querySelectorAll('.sticky-cell-hook')
+        );
+        allStickyCells.forEach((cell, index) => {
+          if ((index + 1) % stickyCols.length === 0) {
+            cell?.classList.add(classes.isStickyLast);
+          }
+        });
+      }, []);
+
+      const setStickyCellLeftValues = React.useCallback(() => {
+        let sum = 0;
+        const stickyCellsLeft: Array<number> = [];
+        // only need to grab column width from one row, since all rows should be the same in each column
+        if (forwardedRef != null && typeof forwardedRef !== 'function') {
+          const row = forwardedRef?.current?.childNodes[1].childNodes[0];
+          row?.childNodes.forEach((node: any, index: number) => {
+            if (stickyCols.includes(index)) {
+              stickyCellsLeft.push(sum);
+              sum += node?.clientWidth;
+            }
+          });
+          setStickyCellsLeft(stickyCellsLeft);
+        } else {
+          console.warn(
+            "Table's forwardRef is null, please set it if you want the sticky cell's left value to be set correctly"
+          );
+        }
+      }, [forwardedRef, stickyCols]);
+
+      React.useLayoutEffect(() => {
+        if (stickyCols.length === 0) {
+          return;
+        }
+        setStickyCellLeftValues();
+      }, [setStickyCellLeftValues, stickyCols]);
+
+      React.useEffect(() => {
+        if (stickyCols.length === 0) {
+          return;
+        }
+        window.addEventListener('resize', setStickyCellLeftValues);
+        return () => {
+          window.removeEventListener('resize', setStickyCellLeftValues);
+        };
+      }, [setStickyCellLeftValues, stickyCols]);
+
+      if (state && !state.sorting) {
+        state.sorting = sorting;
+      }
+
       // custom handler to connect onSort() of header config
       const sortingChangeHandler = (updater: Updater<SortingState>): void => {
         if (!enableSorting) {
@@ -143,6 +218,12 @@ export const ReactTableModule = React.memo(
                   key={header.id}
                   header={{ label: header.id }}
                   coreHeader={header}
+                  isSticky={stickyCols.indexOf(i) >= 0}
+                  left={
+                    stickyCols.indexOf(i) >= 0
+                      ? stickyCellsLeft[stickyCols.indexOf(i)]
+                      : undefined
+                  }
                   onClick={header.column.getToggleSortingHandler()}
                   sortDirection={null}
                   headingsCount={headers.length}
@@ -157,6 +238,12 @@ export const ReactTableModule = React.memo(
                   headingsCount={headers.length}
                   isSorting={false}
                   sortDirection={null}
+                  isSticky={stickyCols.indexOf(headers.length + 1) >= 0}
+                  left={
+                    stickyCols.indexOf(headers.length + 1) >= 0
+                      ? stickyCellsLeft[stickyCols.indexOf(headers.length + 1)]
+                      : undefined
+                  }
                 />
               )}
             </tr>
@@ -195,6 +282,8 @@ export const ReactTableModule = React.memo(
                     cells={row.getVisibleCells()}
                     rowActions={rowActions}
                     rowClickLabel={rowClickLabel}
+                    stickyCols={stickyCols}
+                    stickyCellsLeft={stickyCellsLeft}
                   />
                 ))}
             {isLoading && (