feat(DataTable): add support for table row statuses (#2073)

- component to support standard EDS statuses per row - additional exports to support typing of the data model - additional exports to support column header for status column - update tests and snapshots (new story for comparison)
chanzuckerberg · Oct 18, 2024 · c109f52 · c109f52
1 parent 7ffbd56
commit c109f52
Show file tree

Hide file tree

Showing 6 changed files with 1,454 additions and 168 deletions.
diff --git a/src/components/DataTable/DataTable.module.css b/src/components/DataTable/DataTable.module.css
@@ -96,6 +96,7 @@
   align-items: flex-start;
   font: var(--eds-theme-typography-title-md);
   height: 100%;
+  overflow: hidden;
 
   border-right: calc(var(--eds-border-width-sm) * 1px) solid transparent;
 
@@ -127,12 +128,28 @@
   }
 }
 
+.data-table__status-cell {
+  height: 100%; 
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.data-table__status-header-cell {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  text-indent: 9999;
+}
+
 .data-table__cell {
   display: flex;
   gap: calc(var(--eds-size-1) / 16 * 1rem);
   align-items: flex-start;
   font: var(--eds-theme-typography-body-md);
   height: 100%;
+  overflow: hidden;
 
   border-right: calc(var(--eds-border-width-sm) * 1px) solid transparent;
 
@@ -288,3 +305,31 @@
     background-color: var(--eds-theme-color-background-utility-interactive-low-emphasis);
   }
 }
+
+.data-table .data-table__status-cell {
+  &.data-table--status-critical {
+    color: var(--eds-theme-color-icon-utility-critical)
+  }
+
+  &.data-table--status-favorable {
+    color: var(--eds-theme-color-icon-utility-favorable);
+  }
+
+  &.data-table--status-warning {
+    color: var(--eds-theme-color-icon-utility-warning);
+  }
+}
+
+.data-table .data-table__row {
+  &.data-table--status-critical {
+    background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
+  }
+
+  &.data-table--status-favorable {
+    background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
+  }
+
+  &.data-table--status-warning {
+    background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
+  }
+}
diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
@@ -11,6 +11,7 @@ import {
   DataTableRow,
   DataTableHeader,
   type DataTableProps,
+  type DataTableWithStatus,
 } from './DataTable';
 
 // We import all of the utilities from tanstack here, and this can contain other custom utilities
@@ -53,13 +54,14 @@ export default {
 type Args = DataTableProps;
 
 // Specifying an example data type for the rows of a table
-type Person = {
+// This column is used for tables that are eligible for status
+type Person = DataTableWithStatus<{
   firstName: string;
   lastName: string;
   age: number;
   visits: number;
   progress: number;
-};
+}>;
 
 // Specifying the example (static) data for the table to use with tanstack primitives
 const defaultData: Person[] = [
@@ -76,6 +78,7 @@ const defaultData: Person[] = [
     age: 40,
     visits: 40,
     progress: 80,
+    status: 'warning',
   },
   {
     firstName: 'Tanner',
@@ -90,6 +93,7 @@ const defaultData: Person[] = [
     age: 45,
     visits: 20,
     progress: 10,
+    status: 'critical',
   },
   {
     firstName: 'Tandy',
@@ -111,6 +115,7 @@ const defaultData: Person[] = [
     age: 45,
     visits: 20,
     progress: 10,
+    status: 'favorable',
   },
   {
     firstName: 'Tandy',
@@ -700,6 +705,93 @@ export const Grouping: StoryObj<Args> = {
   },
 };
 
+/**
+ * You can specify detailed statuses for each row in a table, matching a few common options.
+ * Extend the data type to include `status` which maps to the internal type
+ *
+ * Use `DataTableWithStatus` on your data type model to add in the column handler. this
+ * will add add a `status` item, to be used with a column with header name `DataTable.__StatusColumnId__`.
+ */
+export const StatusRows: StoryObj<Args> = {
+  args: {
+    caption: 'Test table',
+    subcaption: 'Additional Subcaption',
+    isStatusEligible: true,
+    tableStyle: 'border',
+    rowStyle: 'lined',
+    size: 'sm',
+  },
+  render: (args) => {
+    const columns = [
+      columnHelper.accessor(DataTable.__StatusColumnId__, {
+        header: () => <DataTable.StatusHeaderCell />,
+        cell: (info) => <DataTable.StatusCell status={info.getValue()} />,
+        size: 32,
+      }),
+      columnHelper.accessor('firstName', {
+        header: () => (
+          <DataTable.HeaderCell sortDirection="ascending">
+            First Name
+          </DataTable.HeaderCell>
+        ),
+        cell: (info) => (
+          <DataTable.DataCell>{info.getValue()}</DataTable.DataCell>
+        ),
+      }),
+      columnHelper.accessor((row) => row.lastName, {
+        id: 'lastName',
+        header: () => <DataTable.HeaderCell>Last Name</DataTable.HeaderCell>,
+        cell: (info) => (
+          <DataTable.DataCell>{info.getValue()}</DataTable.DataCell>
+        ),
+      }),
+      columnHelper.accessor('age', {
+        header: () => (
+          <DataTable.HeaderCell alignment="trailing">Age</DataTable.HeaderCell>
+        ),
+        cell: (info) => (
+          <DataTable.DataCell alignment="trailing">
+            {info.renderValue()}
+          </DataTable.DataCell>
+        ),
+      }),
+      columnHelper.accessor('visits', {
+        header: () => (
+          <DataTable.HeaderCell alignment="trailing">
+            Visits
+          </DataTable.HeaderCell>
+        ),
+        cell: (info) => (
+          <DataTable.DataCell alignment="trailing">
+            {info.renderValue()}
+          </DataTable.DataCell>
+        ),
+      }),
+      columnHelper.accessor('progress', {
+        header: () => (
+          <DataTable.HeaderCell alignment="trailing">
+            Profile Progress
+          </DataTable.HeaderCell>
+        ),
+        cell: (info) => (
+          <DataTable.DataCell alignment="trailing">
+            {info.renderValue()}
+          </DataTable.DataCell>
+        ),
+      }),
+    ];
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = DataTableUtils.useReactTable({
+      data: defaultData,
+      columns,
+      getCoreRowModel: DataTableUtils.getCoreRowModel(),
+    });
+
+    return <DataTable {...args} table={table} />;
+  },
+};
+
 // TODO: Story for sticky column pinning (https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky)
 
 export const DefaultWithCustomTable: StoryObj<Args> = {