Port over DataTable code from earlier Baklava.

package.json

@@ -89,7 +89,8 @@
     "postcss-color-contrast": "^1.1.0",
     "lightningcss": "^1.28.1",
     "@types/react": "npm:types-react@rc",
-    "@types/react-dom": "npm:types-react-dom@rc"
+    "@types/react-dom": "npm:types-react-dom@rc",
+    "@types/react-table": "^7.7.20"
   },
   "dependencies": {
     "date-fns": "^4.1.0",
@@ -100,6 +101,7 @@
     "react-error-boundary": "^4.1.2",
     "@floating-ui/react": "^0.26.28",
     "react-toastify": "^10.0.6",
+    "react-table": "^7.8.0",
     "effect": "^3.10.15",
     "react-hook-form": "^7.53.2",
     "optics-ts": "^2.4.1"

package.json.js

@@ -140,6 +140,8 @@ const packageConfig = {
     //'@types/react-dom': '^18.2.22',
     '@types/react': 'npm:types-react@rc',
     '@types/react-dom': 'npm:types-react-dom@rc',
+
+    '@types/react-table': '^7.7.20',
   },
 
   // Dependencies needed when running the generated build
@@ -156,6 +158,7 @@ const packageConfig = {
 
     '@floating-ui/react': '^0.26.28',
     'react-toastify': '^10.0.6',
+    'react-table': '^7.8.0',
 
     'effect': '^3.10.15',
     'react-hook-form': '^7.53.2',

src/assets/icons/_icons.ts

@@ -56,3 +56,10 @@ export const icons = {
   'warning': {},
   'workflows': {},
 } as const satisfies Record<string, IconDef>;
+
+export type IconKey = keyof typeof icons;
+
+const iconKeys = new Set(Object.keys(icons));
+export const isIconKey = (iconKey: string): iconKey is IconKey => {
+  return iconKeys.has(iconKey);
+};

src/components/tables/DataTable/DataTable.stories.tsx

@@ -0,0 +1,98 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DataTable } from './table/DataTable.tsx';
+
+
+type DataTableArgs = React.ComponentProps<typeof DataTable>;
+type Story = StoryObj<typeof DataTable>;
+
+
+
+import * as ReactTable from 'react-table';
+import { createTableContext, TableContextState } from './DataTableContext.tsx';
+const DataTableContext = ({ children }: React.PropsWithChildren) => {
+  type User = { name: string };
+  const columns = React.useMemo<Array<ReactTable.Column<User>>>(() => [
+    {
+      id: 'name',
+    }
+  ], []);
+  const data = React.useMemo<Array<User>>(() => [
+    { name: 'Alice' },
+  ], []);
+  const options = React.useMemo<ReactTable.TableOptions<User>>(() => ({ columns, data }), [columns, data]);
+  const table = ReactTable.useTable(options);
+
+  const context = React.useMemo<TableContextState<User>>(() => ({
+    status: { ready: true, loading: false, error: null },
+    setStatus() {},
+    reload() {},
+    table,
+  }), [table.state]);
+  // Note: the `table` reference is mutated, so cannot use it as dependency for `useMemo` directly
+
+  const TableContext = React.useMemo(() => createTableContext<User>(), []);
+
+  return (
+    <TableContext.Provider value={context}>
+      {children}
+    </TableContext.Provider>
+  );
+};
+
+const DataTableTemplate = (args: DataTableArgs) => {
+  type User = { name: string };
+  const columns = React.useMemo<Array<ReactTable.Column<User>>>(() => [
+    {
+      id: 'name',
+      getSortByToggleProps() { return {}; },
+      Header: 'Name:',
+      accessor: (user: User) => user.name,
+    }
+  ], []);
+  const data = React.useMemo<Array<User>>(() => [
+    { name: 'Alice' },
+  ], []);
+  const options = React.useMemo<ReactTable.TableOptions<User>>(() => ({ columns, data }), [columns, data]);
+  const table = ReactTable.useTable(
+    options,
+    ReactTable.useGlobalFilter,
+    ReactTable.useFilters,
+    ReactTable.useSortBy,
+    ReactTable.usePagination,
+    ReactTable.useRowSelect,
+  );
+
+  return (
+    <div>
+      Table:
+      <DataTable
+        table={table}
+      />
+    </div>
+  );
+};
+
+
+export default {
+  component: DataTable,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+  },
+  render: (args) => (
+    <DataTableTemplate {...args}/>
+  ),
+} satisfies Meta<DataTableArgs>;
+
+
+export const Standard: Story = {};

src/components/tables/DataTable/DataTableContext.tsx

@@ -0,0 +1,31 @@
+
+import * as React from 'react';
+import * as ReactTable from 'react-table';
+
+
+export type DataTableStatus = {
+  ready: boolean, // Whether the data is ready to be used/shown in the UI
+  loading: boolean, // Whether we're (re)loading the data
+  error: null | Error, // Whether the last loading attempt resulted in an error
+};
+
+export type TableContextState<D extends object> = {
+  status: DataTableStatus,
+  setStatus: (status: DataTableStatus) => void,
+  reload: () => void,
+  table: ReactTable.TableInstance<D>,
+};
+
+const TableContext = React.createContext<null | TableContextState<object>>(null); // Memoized
+export const createTableContext = <D extends object>() => TableContext as React.Context<null | TableContextState<D>>;
+
+
+export const useTable = <D extends object>(): TableContextState<D> => {
+  const context = React.useContext(TableContext as React.Context<null | TableContextState<D>>);
+
+  if (context === null) {
+    throw new TypeError('TableContext not yet initialized');
+  }
+
+  return context;
+};

src/components/tables/DataTable/DataTableEager.scss

@@ -0,0 +1,8 @@
+
+@use '../../../style/variables.scss' as bkl;
+@use './DataTableLazy.scss' as dataTableLazy;
+
+
+.bkl-data-table-eager--loading {
+  @include dataTableLazy.data-table-loading;
+}