Implement new DataTable

package.json

@@ -31,11 +31,11 @@
       "types": "./dist/i18n.d.ts",
       "import": "./dist/i18n.js"
     },
+    "./package.json": "./package.json",
     "./providers": {
       "types": "./dist/providers.d.ts",
       "import": "./dist/providers.js"
     },
-    "./package.json": "./package.json",
     "./tailwind/globals.css": "./dist/tailwind/globals.css",
     "./utils": {
       "types": "./dist/utils.d.ts",
@@ -97,6 +97,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

src/components/DataTable/DataTable.stories.tsx

@@ -1,76 +1,246 @@
-import { range, toBasicISOString, unwrap } from '@douglasneuroinformatics/libjs';
+import { useState } from 'react';
+
 import { faker } from '@faker-js/faker';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ColumnDef } from '@tanstack/table-core';
+import { range } from 'lodash-es';
+import { ChevronDownIcon } from 'lucide-react';
 
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
 import { DataTable } from './DataTable';
+import { useDataTableHandle } from './hooks';
 
-import type { DataTableColumn } from './DataTable';
+type PaymentStatus = 'failed' | 'pending' | 'processing' | 'success';
 
-type User = {
-  birthday: Date;
+type Payment = {
+  amount: number;
   email: string;
-  firstName: string;
-  lastName: string;
+  id: string;
+  status: PaymentStatus;
 };
 
-type Story = StoryObj<typeof DataTable<User>>;
+type Story = StoryObj<typeof DataTable<Payment>>;
 
-const columns: DataTableColumn<User>[] = [
+const columns: ColumnDef<Payment>[] = [
   {
-    format: (value) => {
-      return toBasicISOString(value);
+    accessorKey: 'status',
+    enableSorting: false,
+    filterFn: (row, id, filter: PaymentStatus[]) => {
+      return filter.includes(row.getValue(id));
     },
-    key: 'birthday',
-    label: 'Birthday'
+    header: 'Status'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email'
   },
   {
-    format: 'email',
-    key: 'email',
-    label: 'Email',
-    sortable: true
+    accessorKey: 'amount',
+    header: 'Amount'
   }
 ];
 
-const data: User[] = unwrap(range(60)).map(() => ({
-  birthday: faker.date.birthdate(),
-  email: faker.internet.email(),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName()
-}));
+const statuses: readonly PaymentStatus[] = Object.freeze(['failed', 'pending', 'processing', 'success']);
+
+const createData = (n: number): Payment[] => {
+  return range(n).map((i) => ({
+    amount: faker.number.int({ max: 100, min: 0 }),
+    email: faker.internet.email(),
+    id: String(i + 1),
+    status: faker.helpers.arrayElement(statuses)
+  }));
+};
+
+const Toggles = () => {
+  const table = useDataTableHandle('table', true);
+  const columns = table.getAllColumns();
+  const statusColumn = columns.find((column) => column.id === 'status')!;
+
+  const filterValue = statusColumn.getFilterValue() as PaymentStatus[];
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button className="flex items-center gap-2" variant="outline">
+            Columns
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+          {columns
+            .filter((column) => column.getCanHide())
+            .map((column) => {
+              return (
+                <DropdownMenu.CheckboxItem
+                  checked={column.getIsVisible()}
+                  className="capitalize"
+                  key={column.id}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                >
+                  {column.id}
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button className="flex items-center gap-2" variant="outline">
+            Filters
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content widthFull align="start">
+          {statuses.map((option) => (
+            <DropdownMenu.CheckboxItem
+              checked={filterValue.includes(option)}
+              className="capitalize"
+              key={option}
+              onCheckedChange={(checked) => {
+                statusColumn.setFilterValue((prevValue: PaymentStatus[]) => {
+                  if (checked) {
+                    return [...prevValue, option];
+                  }
+                  return prevValue.filter((item) => item !== option);
+                });
+              }}
+            >
+              {option}
+            </DropdownMenu.CheckboxItem>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </>
+  );
+};
 
-export default { component: DataTable } as Meta<typeof DataTable<User>>;
+export default {
+  component: DataTable
+} as Meta<typeof DataTable>;
 
 export const Default: Story = {
+  decorators: [
+    (Story) => {
+      const [tableData, setTableData] = useState(createData(10));
+      return (
+        <div>
+          <Story
+            args={{
+              columns,
+              data: tableData
+            }}
+          />
+          <div className="fixed bottom-0 py-2">
+            <button
+              className="rounded-md border px-2 py-1.5 text-sm"
+              type="button"
+              onClick={() => setTableData(createData(10))}
+            >
+              New Data
+            </button>
+          </div>
+        </div>
+      );
+    }
+  ]
+};
+
+export const WithActions: Story = {
   args: {
-    columns,
-    data,
-    headerActions: [
+    columns: [
+      ...columns,
       {
-        label: 'Do Something',
-        onClick: () => {
-          alert('Something!');
-        }
+        accessorKey: 'notes',
+        header: 'Notes'
       }
     ],
+    data: createData(100).map((payment) => ({ ...payment, notes: faker.lorem.paragraph() })),
+    onSearchChange: () => {
+      return;
+    },
     rowActions: [
+      {
+        label: 'Modify',
+        onSelect: () => {
+          alert('Modify');
+        }
+      },
       {
         destructive: true,
         label: 'Delete',
-        onSelect: (row) => {
-          alert(`Delete User: ${row.firstName} ${row.lastName}`);
+        onSelect: () => {
+          alert('Delete');
         }
       }
     ],
-    search: {
-      key: 'email',
-      placeholder: 'Filter emails...'
-    }
+    tableName: 'action-table'
+  }
+};
+
+export const WithToggles: Story = {
+  args: {
+    columns,
+    data: createData(100),
+    initialState: {
+      columnFilters: [
+        {
+          id: 'status',
+          value: [...statuses]
+        }
+      ]
+    },
+    onSearchChange: () => {
+      return;
+    },
+    togglesComponent: Toggles
   }
 };
 
 export const Empty: Story = {
   args: {
     columns,
-    data: []
+    data: [],
+    onSearchChange: () => {
+      return;
+    }
+  }
+};
+
+export const Grouped: Story = {
+  args: {
+    columns: [
+      {
+        columns: [
+          {
+            accessorKey: 'id',
+            header: 'ID'
+          },
+          {
+            accessorKey: 'status',
+            header: 'Status'
+          }
+        ],
+        header: 'Internal'
+      },
+      {
+        columns: [
+          {
+            accessorKey: 'email',
+            header: 'Email'
+          },
+          {
+            accessorKey: 'amount',
+            header: 'Amount'
+          }
+        ],
+        header: 'Details'
+      }
+    ],
+    data: createData(100),
+    onSearchChange: () => {
+      return;
+    }
   }
 };