feat(DataTable): add groupBy support

- update snapshots and tests

src/components/DataTable/DataTable.module.css

@@ -5,7 +5,7 @@
 /* Visible table caption */
 /* TODO-AH: make it so that we have the search bar and actions wrap together instead of separately */
 /* TODO-AH: implement showing of shadow below sticky headers and column */
-/* TODO-AH: handle caption padding syncing with table cell padding using size */
+/* - https://stackoverflow.com/questions/38122751/positionsticky-adding-style-when-the-element-detaches-from-normal-flow */
 .data-table__caption-container {
   display: flex;
   align-items: flex-end;
@@ -166,6 +166,23 @@
   top: 0;
 }
 
+.data-table__group-row {
+  font: var(--eds-theme-typography-body-md);
+  pointer-events: none;
+
+  .data-table--size-sm & {
+    font: var(--eds-theme-typography-body-sm);
+    padding: calc(var(--eds-size-half) / 16 * 1rem)
+      calc(var(--eds-size-1) / 16 * 1rem);
+  }
+
+  .data-table--size-md & {
+    padding: calc(var(--eds-size-2) / 16 * 1rem)
+      calc(var(--eds-size-3) / 16 * 1rem);
+  }
+
+}
+
 /**
  * Color Tokens
  */
@@ -203,7 +220,6 @@
   }
 }
 
-
 .data-table {
   display: block;
   position: relative;
@@ -262,4 +278,9 @@
       z-index: 1;
     }
   }
+
+  .data-table__group-row {
+    color: var(--eds-theme-color-text-utility-default-primary);
+    background-color: var(--eds-theme-color-background-utility-interactive-low-emphasis);
+  }
 }

src/components/DataTable/DataTable.stories.tsx

@@ -433,9 +433,156 @@ export const Selectable: StoryObj<Args> = {
   },
 };
 
+/**
+ * Implementation example of how to build selectable rows.
+ *
+ * For more information: https://tanstack.com/table/latest/docs/framework/react/examples/row-selection
+ */
+export const VerticalDivider: StoryObj<Args> = {
+  args: {
+    caption: 'Test table',
+    subcaption: 'Additional Subcaption',
+    isInteractive: true,
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [rowSelection, setRowSelection] = React.useState({}); // TODO: demonstrate one is selected
+
+    // TODO(docs): Why must `any` be passed as second type param to avoid `unknown`?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const selectableColumns = React.useMemo<
+      DataTableUtils.ColumnDef<Person, any>[]
+    >(
+      () => [
+        {
+          id: 'select',
+          header: ({ table }) => (
+            <DataTable.HeaderCell>
+              <Checkbox
+                {...{
+                  checked: table.getIsAllRowsSelected(),
+                  indeterminate: table.getIsSomeRowsSelected(),
+                  onChange: table.getToggleAllRowsSelectedHandler(),
+                  'aria-label': 'check',
+                }}
+              />
+            </DataTable.HeaderCell>
+          ),
+          cell: ({ row }) => (
+            <DataTable.DataCell>
+              <Checkbox
+                {...{
+                  checked: row.getIsSelected(),
+                  disabled: !row.getCanSelect(),
+                  indeterminate: row.getIsSomeSelected(),
+                  onChange: row.getToggleSelectedHandler(),
+                  'aria-label': 'check',
+                }}
+              />
+            </DataTable.DataCell>
+          ),
+          // Widths can be set on header cells (using pixels)
+          // More information: https://tanstack.com/table/latest/docs/guide/column-sizing#column-widths
+          // TODO(design): what is the column size for the selectable column
+          size: 32,
+        },
+        columnHelper.accessor('firstName', {
+          header: () => (
+            <DataTable.HeaderCell
+              hasHorizontalDivider
+              leadingIcon="person-add"
+              sortDirection="ascending"
+              sublabel="Given Name"
+            >
+              First Name
+            </DataTable.HeaderCell>
+          ),
+          cell: (info) => (
+            <DataTable.DataCell hasHorizontalDivider leadingIcon="person-add">
+              {info.getValue()}
+            </DataTable.DataCell>
+          ),
+        }),
+        columnHelper.accessor((row) => row.lastName, {
+          id: 'lastName',
+          header: () => (
+            <DataTable.HeaderCell hasHorizontalDivider sublabel="Surname">
+              Last Name
+            </DataTable.HeaderCell>
+          ),
+          cell: (info) => (
+            <DataTable.DataCell hasHorizontalDivider>
+              {info.getValue()}
+            </DataTable.DataCell>
+          ),
+        }),
+        columnHelper.accessor('age', {
+          header: () => (
+            <DataTable.HeaderCell alignment="trailing" hasHorizontalDivider>
+              Age
+            </DataTable.HeaderCell>
+          ),
+          cell: (info) => (
+            <DataTable.DataCell alignment="trailing" hasHorizontalDivider>
+              {info.renderValue()}
+            </DataTable.DataCell>
+          ),
+        }),
+        columnHelper.accessor('visits', {
+          header: () => (
+            <DataTable.HeaderCell alignment="trailing" hasHorizontalDivider>
+              Visits
+            </DataTable.HeaderCell>
+          ),
+          cell: (info) => (
+            <DataTable.DataCell alignment="trailing" hasHorizontalDivider>
+              {info.renderValue()}
+            </DataTable.DataCell>
+          ),
+        }),
+        columnHelper.accessor('progress', {
+          header: () => (
+            <DataTable.HeaderCell
+              alignment="trailing"
+              hasHorizontalDivider
+              sublabel='"Complete" is > 80%'
+            >
+              Profile Progress
+            </DataTable.HeaderCell>
+          ),
+          cell: (info) => (
+            <DataTable.DataCell
+              alignment="trailing"
+              hasHorizontalDivider
+              sublabel={
+                Number(info.renderValue()) >= 80 ? 'Complete' : 'Incomplete'
+              }
+            >
+              {info.renderValue()}
+            </DataTable.DataCell>
+          ),
+        }),
+      ],
+      [],
+    );
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = DataTableUtils.useReactTable({
+      data: defaultData,
+      columns: selectableColumns,
+      state: {
+        rowSelection,
+      },
+      enableRowSelection: true,
+      onRowSelectionChange: setRowSelection,
+      getCoreRowModel: DataTableUtils.getCoreRowModel(),
+    });
+
+    return <DataTable {...args} table={table} />;
+  },
+};
+
 // TODO-AH: Sticky column pinning (https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky)
 // TODO-AH: GroupBy example https://tanstack.com/table/latest/docs/framework/react/examples/grouping
-// TODO-AH: Column Border example (hasHorizontalDivider)
 
 export const DefaultWithCustomTable: StoryObj<Args> = {
   args: {

src/components/DataTable/DataTable.tsx

@@ -11,6 +11,8 @@ import InputField from '../InputField';
 
 import styles from './DataTable.module.css';
 
+// TODO-AH: extend elements with underlying HTML props?
+
 export type DataTableProps<T = unknown> = EDSBase & {
   // Component API
   /**
@@ -235,6 +237,7 @@ export function DataTable<T>({
                 isSelected={row.getIsSelected()}
                 key={row.id}
               >
+                {/* TODO-AH: somehow insert group by rows */}
                 {row.getVisibleCells().map((cell) => (
                   <td key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -416,6 +419,14 @@ export const DataTableRow = ({
   );
 };
 
+export const DataTableGroupRow = ({ title }: { title: string }) => {
+  return (
+    <tr className={styles['data-table__group-row']}>
+      <td>{title}</td>
+    </tr>
+  );
+};
+
 /**
  * For future development
  */