feat(DataTable): allow for pinning columns

- first column is pinned by default - allow for other columns to be pinned
chanzuckerberg · Oct 28, 2024 · c34dcbe · c34dcbe
1 parent e28af44
commit c34dcbe
Show file tree

Hide file tree

Showing 4 changed files with 1,051 additions and 2 deletions.
diff --git a/src/components/DataTable/DataTable.module.css b/src/components/DataTable/DataTable.module.css
@@ -200,9 +200,16 @@
   }
 }
 
-.data-table--is-pinned {
+.data-table--row-is-pinned {
+  box-shadow: var(--eds-box-shadow-sm);
+}
+
+.data-table--column-is-pinned {
+  /* When pinning columns, width and offset position are dynamic */
   box-shadow: var(--eds-box-shadow-sm);
 
+  position: sticky;
+  z-index: 1;
 }
 
 /**

diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
@@ -919,3 +919,34 @@ export const WithLongCaption: StoryObj<Args> = {
     ),
   },
 };
+
+/**
+ * Allow for fixing some columns to not scroll off the screen, like freezing a column
+ *
+ * * This first column is sticky by default
+ * * Subsequent rows can be made sticky as well
+ *
+ * See: https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky
+ * See: https://tanstack.com/table/latest/docs/guide/column-pinning
+ */
+export const HorizontalScrolling: StoryObj<Args> = {
+  args: {
+    tableStyle: 'border',
+    size: 'sm',
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = DataTableUtils.useReactTable({
+      data: defaultData,
+      columns,
+      getCoreRowModel: DataTableUtils.getCoreRowModel(),
+      initialState: {
+        columnPinning: {
+          left: ['firstName'],
+        },
+      },
+    });
+
+    return <DataTable {...args} className="w-[800px]" table={table} />;
+  },
+};
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
@@ -237,6 +237,7 @@ export function DataTable<T>({
                       header.getSize() !== 150
                         ? `${header.getSize()}px`
                         : undefined;
+                    // TODO-AH: apply check for column-is-pinned here
                     return (
                       <th
                         className={styles['data-table__header-cell-container']}
@@ -271,6 +272,7 @@ export function DataTable<T>({
                         {row.getLeafRows().map((row) => (
                           <DataTableRow key={row.id}>
                             {row.getVisibleCells().map((cell) => (
+                              // TODO-AH: apply check for column-is-pinned here
                               <td
                                 className={styles['data-table__cell-container']}
                                 key={cell.id}
@@ -293,6 +295,7 @@ export function DataTable<T>({
                         }
                       >
                         {row.getVisibleCells().map((cell) => (
+                          // TODO-AH: apply check for column-is-pinned here
                           <td
                             className={styles['data-table__cell-container']}
                             key={cell.id}
@@ -503,7 +506,7 @@ export const DataTableTable = ({
         observer = new IntersectionObserver(
           ([event]) => {
             return event.target.classList.toggle(
-              styles['data-table--is-pinned'],
+              styles['data-table--row-is-pinned'],
               event.intersectionRatio < 1,
             );
           },