@dxos/react-ui-table 0.3.7 → 0.3.8-main.0ab6c73

package/src/components/{Table.stories.tsx → Table/Table.stories.tsx}

@@ -10,12 +10,12 @@ import { deepSignal } from 'deepsignal';
 import React, { useEffect, useState } from 'react';
 
 import { PublicKey } from '@dxos/keys';
-import { DensityProvider } from '@dxos/react-ui';
+import { DensityProvider, AnchoredOverflow } from '@dxos/react-ui';
 import { range } from '@dxos/util';
 
 import { Table } from './Table';
-import { createColumnBuilder, type SelectQueryModel, type ValueUpdater } from '../helpers';
-import { type TableColumnDef } from '../types';
+import { createColumnBuilder, type SearchListQueryModel, type ValueUpdater } from '../../helpers';
+import { type TableColumnDef } from '../../types';
 
 // TODO(burdon): Header menu builder.
 // TODO(burdon): Expand width if not all columns have explicit size.
@@ -29,7 +29,6 @@ type Item = {
   complete?: boolean;
 };
 
-// TODO(thure): …y’all okay?
 faker.seed(911);
 
 const createItems = (count: number) =>
@@ -59,7 +58,7 @@ const tableStorySelectItems: Record<string, Item> = range(128).reduce((acc: Reco
 
 const timeout = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-const tableStorySelectModel: SelectQueryModel<Item> = {
+const tableStorySelectModel: SearchListQueryModel<Item> = {
   getId: (object) => object?.publicKey?.toHex() ?? 'never',
   getText: (object) => object?.name ?? 'never',
   query: async (search: string) => {
@@ -71,36 +70,44 @@ const tableStorySelectModel: SelectQueryModel<Item> = {
 };
 
 const { helper, builder } = createColumnBuilder<Item>();
+
 const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[] => [
+  helper.display(builder.selectRow()),
+  helper.accessor((item) => item.publicKey, { id: 'key', ...builder.key({ tooltip: true }) }),
   helper.accessor(
-    'complete',
-    builder.checkbox({
-      // enableGrouping: true,
-      getGroupingValue: (row) => row.complete === true,
-      label: '',
+    'name',
+    builder.string({
+      label: 'Name',
       onUpdate,
+      meta: { expand: true },
+      footer: (props) => props.table.getRowModel().rows.length,
     }),
   ),
-  helper.accessor((item) => item.publicKey, { id: 'key', ...builder.key({ tooltip: true }) }),
+  helper.accessor('started', builder.date({ label: 'Started', relative: true, meta: { resizable: true } })),
   helper.accessor(
-    'name',
-    builder.string({ onUpdate, meta: { expand: true }, footer: (props) => props.table.getRowModel().rows.length }),
+    'count',
+    builder.number({
+      label: 'Count',
+      meta: { resizable: true },
+      // TODO(burdon): Sorting.
+      getGroupingValue: (row) => (row.count ? (row.count < 2_000 ? 'A' : row.count < 5_000 ? 'B' : 'C') : 'D'),
+    }),
   ),
   helper.accessor(
     'company',
-    builder.select({
+    builder.combobox({
       label: 'Company',
       model: tableStorySelectModel,
       onUpdate,
     }),
   ),
-  helper.accessor('started', builder.date({ relative: true, meta: { resizable: true } })),
   helper.accessor(
-    'count',
-    builder.number({
-      meta: { resizable: true },
-      // TODO(burdon): Sorting.
-      getGroupingValue: (row) => (row.count ? (row.count < 2_000 ? 'A' : row.count < 5_000 ? 'B' : 'C') : 'D'),
+    'complete',
+    builder.switch({
+      // enableGrouping: true,
+      getGroupingValue: (row) => row.complete === true,
+      label: '',
+      onUpdate,
     }),
   ),
   helper.accessor('complete', builder.icon({ id: 'done', label: '' })),
@@ -138,9 +145,6 @@ export default {
     fullWidth: {
       control: 'boolean',
     },
-    pinToBottom: {
-      control: 'boolean',
-    },
     grouping: {
       control: 'select',
       options: ['none', 'complete', 'count'],
@@ -158,9 +162,9 @@ export default {
         limited: { key: false, started: false },
       },
     },
-    select: {
+    rowsSelectable: {
       control: 'select',
-      options: ['single', 'single-toggle', 'multiple', 'multiple-toggle'],
+      options: [false, true, 'multi'],
     },
   },
   decorators: [
@@ -209,25 +213,23 @@ export const Dynamic = {
           if (items.length >= 200) {
             clearInterval(interval);
           }
-
           return [...items, ...createItems(1)];
         });
       }, 500);
       return () => clearInterval(interval);
     }, []);
-
     return (
-      <div className='flex grow overflow-hidden'>
-        {/* prettier-ignore */}
+      <AnchoredOverflow.Root classNames='max-bs-[80dvh]'>
         <Table<Item>
-          keyAccessor={row => row.publicKey.toHex()}
+          rowsSelectable='multi'
+          keyAccessor={(row) => row.publicKey.toHex()}
           columns={columns()}
           data={items}
           fullWidth
-          pinToBottom
           footer
         />
-      </div>
+        <AnchoredOverflow.Anchor />
+      </AnchoredOverflow.Root>
     );
   },
 };
@@ -240,15 +242,15 @@ export const Editable = {
     };
 
     return (
-      <div className='flex grow overflow-hidden'>
-        {/* prettier-ignore */}
-        <Table<Item>
-          keyAccessor={row => row.publicKey.toHex()}
-          columns={columns(onUpdate)}
-          data={items}
-          fullWidth
-        />
-      </div>
+      <Table<Item>
+        role='grid'
+        rowsSelectable='multi'
+        keyAccessor={(row) => row.publicKey.toHex()}
+        columns={columns(onUpdate)}
+        data={items}
+        fullWidth
+        border
+      />
     );
   },
 };
@@ -265,16 +267,14 @@ export const Resizable = {
     // };
 
     return (
-      <div className='flex grow overflow-hidden'>
-        {/* prettier-ignore */}
-        <Table<Item>
-          keyAccessor={row => row.publicKey.toHex()}
-          columns={columns(onUpdate)}
-          data={items}
-          fullWidth
-          // onColumnResize={handleColumnResize}
-        />
-      </div>
+      <Table<Item>
+        rowsSelectable='multi'
+        keyAccessor={(row) => row.publicKey.toHex()}
+        columns={columns(onUpdate)}
+        data={items}
+        fullWidth
+        // onColumnResize={handleColumnResize}
+      />
     );
   },
 };

package/src/components/Table/Table.tsx

@@ -0,0 +1,179 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import {
+  getCoreRowModel,
+  getGroupedRowModel,
+  useReactTable,
+  type ColumnSizingInfoState,
+  type ColumnSizingState,
+  type GroupingState,
+  type RowData,
+  type RowSelectionState,
+  type OnChangeFn,
+} from '@tanstack/react-table';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+
+import { debounce } from '@dxos/async';
+
+import { TableBody } from './TableBody';
+import { TableProvider as UntypedTableProvider, type TypedTableProvider } from './TableContext';
+import { TableFooter } from './TableFooter';
+import { TableHead } from './TableHead';
+import { type TableProps } from './props';
+import { groupTh, tableRoot } from '../../theme';
+
+export const Table = <TData extends RowData>(props: TableProps<TData>) => {
+  const {
+    role,
+    data = [],
+    columns = [],
+    onColumnResize,
+    columnVisibility,
+    header = true,
+    footer,
+    rowsSelectable,
+    fullWidth,
+    debug,
+    onDataSelectionChange,
+  } = props;
+
+  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
+
+  // Row selection
+  const [rowSelection = {}, directlySetRowSelection] = useControllableState({
+    prop: props.rowSelection,
+    onChange: props.onRowSelectionChange,
+    defaultProp: props.defaultRowSelection,
+  });
+
+  // TODO(thure): Does @tanstack/react-table really need this intervention? It did seem necessary to enforce single-selection...
+  const handleRowSelectionChange = useCallback<OnChangeFn<RowSelectionState>>(
+    (updaterOrValue) => {
+      const nextRowSelection = typeof updaterOrValue === 'function' ? updaterOrValue(rowSelection) : updaterOrValue;
+      if (rowsSelectable === 'multi') {
+        directlySetRowSelection(nextRowSelection);
+      } else if (rowsSelectable) {
+        const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
+        directlySetRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
+      } else {
+        directlySetRowSelection({});
+      }
+    },
+    [rowSelection, directlySetRowSelection],
+  );
+
+  // Resizing
+  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
+  const onColumnResizeDebounced = debounce<ColumnSizingState>((info) => onColumnResize?.(info), 500);
+  useEffect(() => {
+    if (columnSizingInfo.columnSizingStart?.length === 0) {
+      onColumnResizeDebounced(table.getState().columnSizing);
+    }
+  }, [columnSizingInfo]);
+
+  const [grouping, setGrouping] = useState<GroupingState>(props.grouping ?? []);
+  useEffect(() => setGrouping(props.grouping ?? []), [props.grouping]);
+
+  const table = useReactTable({
+    // Data
+    meta: {},
+    data,
+
+    // Columns
+    columns,
+    defaultColumn: {
+      size: 256, // Required in order remove default width.
+      maxSize: 1024,
+    },
+
+    // Rows
+    getCoreRowModel: getCoreRowModel(),
+
+    // State
+    state: {
+      columnVisibility,
+      columnSizingInfo,
+      rowSelection,
+      grouping,
+    },
+
+    // Grouping
+    getGroupedRowModel: getGroupedRowModel(),
+    onGroupingChange: setGrouping,
+
+    // Selection
+    ...(rowsSelectable === 'multi'
+      ? { enableMultiRowSelection: true }
+      : rowsSelectable
+      ? { enableRowSelection: true }
+      : {}),
+    onRowSelectionChange: handleRowSelectionChange,
+
+    // Resize columns
+    columnResizeMode: 'onChange',
+    enableColumnResizing: true,
+    onColumnSizingInfoChange: setColumnSizingInfo,
+
+    // Debug
+    debugTable: debug,
+  });
+
+  useEffect(() => {
+    if (onDataSelectionChange) {
+      onDataSelectionChange(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
+    }
+  }, [onDataSelectionChange, rowSelection, table]);
+
+  // Create additional expansion column if all columns have fixed width.
+  const expand = false; // columns.map((column) => column.size).filter(Boolean).length === columns?.length;
+
+  return (
+    <TableProvider
+      {...props}
+      header={header}
+      expand={expand}
+      table={table}
+      isGrid={role === 'grid' || role === 'treegrid'}
+    >
+      <table role={role} className={tableRoot(props)} {...(!fullWidth && { style: { width: table.getTotalSize() } })}>
+        <TableHead />
+
+        {grouping.length === 0 && <TableBody rows={table.getRowModel().rows} />}
+
+        {grouping.length !== 0 &&
+          table.getGroupedRowModel().rows.map((row, i) => {
+            return (
+              <Fragment key={i}>
+                {/* TODO(burdon): Customize group header renderer. */}
+                <thead>
+                  <tr>
+                    {debug && <th />}
+                    <th
+                      // TODO(burdon): Calculate row span.
+                      colSpan={table.getHeaderGroups()[0].headers.length}
+                      className={groupTh(props)}
+                    >
+                      {table.getState().grouping[0]}[{String(row.getGroupingValue(table.getState().grouping[0]))}]
+                    </th>
+                  </tr>
+                </thead>
+
+                <TableBody rows={row.subRows} />
+              </Fragment>
+            );
+          })}
+
+        {footer && <TableFooter />}
+      </table>
+
+      {debug && (
+        <pre className='font-mono text-xs text-neutral-500 my-4 p-2 ring'>
+          <code>{JSON.stringify(table.getState(), undefined, 2)}</code>
+        </pre>
+      )}
+    </TableProvider>
+  );
+};

package/src/components/Table/TableBody.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { flexRender, type Row, type RowData } from '@tanstack/react-table';
+import React from 'react';
+
+import { useTableContext } from './TableContext';
+import { tbodyTr } from '../../theme';
+import { Cell } from '../Cell/Cell';
+
+type TableBodyProps<TData extends RowData> = {
+  rows: Row<TData>[];
+};
+
+const TABLE_BODY_NAME = 'TableBody';
+
+const TableBody = <TData extends RowData>({ rows }: TableBodyProps<TData>) => {
+  const tableContext = useTableContext<TData>(TABLE_BODY_NAME);
+  const { table, keyAccessor, debug, expand, isGrid, onDatumClick, currentDatum } = tableContext;
+  const rowSelection = table.getState().rowSelection;
+  const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
+  const canBeCurrent = !isGrid && !!onDatumClick;
+  return (
+    <tbody {...(isGrid && domAttributes)}>
+      {rows.map((row) => {
+        const isCurrent = currentDatum === row.original;
+        const isSelected = rowSelection?.[row.id];
+        return (
+          <tr
+            key={keyAccessor ? keyAccessor(row.original) : row.id}
+            className={tbodyTr({ isSelected, isCurrent, canBeCurrent })}
+            {...(isCurrent && { 'aria-current': 'location' })}
+            {...(canBeCurrent && {
+              tabIndex: 0,
+              onClick: () => {
+                onDatumClick(row.original);
+              },
+              onKeyUp: ({ key }) => {
+                if (key === 'Enter' || key === ' ') {
+                  onDatumClick(row.original);
+                }
+              },
+            })}
+          >
+            {debug && <td>{row.id}</td>}
+
+            {row.getVisibleCells().map((cell) => {
+              return (
+                <Cell key={cell.id} cell={cell}>
+                  {flexRender(cell.column.columnDef.cell, { className: 'pli-2', ...cell.getContext() })}
+                </Cell>
+              );
+            })}
+
+            {expand && <td />}
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+};
+
+TableBody.displayName = TABLE_BODY_NAME;
+
+export { TableBody };
+
+export type { TableBodyProps };

package/src/components/Table/TableContext.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { type RowData } from '@tanstack/react-table';
+import { type ReactNode } from 'react';
+
+import { type TableContextValue } from './props';
+
+export const TABLE_NAME = 'Table';
+
+type CreateContextResult<TData extends RowData> = Readonly<
+  [TypedTableProvider<unknown>, (consumerName: string) => TableContextValue<TData>]
+>;
+
+export type TypedTableProvider<TData extends RowData> = {
+  (props: TableContextValue<TData> & { children: ReactNode }): JSX.Element;
+  displayName: string;
+};
+
+const [TableProvider, useUntypedTableContext]: CreateContextResult<unknown> =
+  createContext<TableContextValue<unknown>>(TABLE_NAME);
+
+export const useTableContext = <TData extends RowData>(consumerName: string) =>
+  useUntypedTableContext(consumerName) as TableContextValue<TData>;
+
+export { TableProvider };

package/src/components/Table/TableFooter.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { flexRender, type RowData } from '@tanstack/react-table';
+import React from 'react';
+
+import { useTableContext } from './TableContext';
+import { tfootRoot, tfootTr, tfootTh } from '../../theme';
+
+export type TableFooterProps = {};
+
+const TABLE_FOOTER_NAME = 'TableFooter';
+
+const TableFooter = <TData extends RowData>(props: TableFooterProps) => {
+  const tableContext = useTableContext<TData>(TABLE_FOOTER_NAME);
+  const { table, expand, debug } = tableContext;
+  const footers = table.getFooterGroups();
+  return (
+    <tfoot className={tfootRoot(props)}>
+      {footers.map((footerGroup) => (
+        <tr key={footerGroup.id} className={tfootTr(tableContext)}>
+          {debug && <th />}
+
+          {footerGroup.headers.map((footer) => {
+            return (
+              <th key={footer.id} className={tfootTh(tableContext, footer.column.columnDef.meta?.footer?.classNames)}>
+                {footer.isPlaceholder ? null : flexRender(footer.column.columnDef.footer, footer.getContext())}
+              </th>
+            );
+          })}
+
+          {expand && <th />}
+        </tr>
+      ))}
+    </tfoot>
+  );
+};
+
+TableFooter.displayName = TABLE_FOOTER_NAME;
+
+export { TableFooter };

package/src/components/Table/TableHead.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { flexRender, type RowData } from '@tanstack/react-table';
+import React from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { useTableContext } from './TableContext';
+import { theadResizeRoot, theadResizeThumb, theadRoot, theadTh, theadTr } from '../../theme';
+
+const TABLE_HEAD_NAME = 'TableHead';
+
+type TableHeadProps = {};
+
+const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
+  const tableContext = useTableContext<TData>(TABLE_HEAD_NAME);
+  const headerGroups = tableContext.table.getHeaderGroups();
+  const state = tableContext.table.getState();
+  return (
+    <thead className={theadRoot(tableContext)}>
+      {headerGroups.map((headerGroup) => {
+        return (
+          // Group element to hover resize handles.
+          <tr key={headerGroup.id} className={theadTr(tableContext)}>
+            {/* TODO(burdon): Calc. width. */}
+            {tableContext.debug && (
+              <th className='font-mono' style={{ width: 32 }}>
+                #
+              </th>
+            )}
+
+            {headerGroup.headers.map((header) => {
+              const isResizing = header.column.getIsResizing();
+              return (
+                <th
+                  key={header.id}
+                  style={{
+                    width: header.getSize(),
+                  }}
+                  className={theadTh(tableContext, header.column.columnDef.meta?.header?.classNames)}
+                >
+                  {!header || header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+
+                  {/*
+                   * Resize handle.
+                   * https://codesandbox.io/p/sandbox/github/tanstack/table/tree/main/examples/react/column-sizing
+                   */}
+                  {header.column.columnDef.meta?.resizable && (
+                    <div
+                      className={theadResizeRoot(tableContext, isResizing && 'hidden')}
+                      style={{
+                        transform: `translateX(${isResizing ? state.columnSizingInfo.deltaOffset : 0}px)`,
+                      }}
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                    >
+                      <div className={mx(theadResizeThumb(tableContext))} />
+                    </div>
+                  )}
+                </th>
+              );
+            })}
+            {tableContext.expand && <th />}
+          </tr>
+        );
+      })}
+    </thead>
+  );
+};
+
+TableHead.displayName = TABLE_HEAD_NAME;
+
+export { TableHead };
+
+export type { TableHeadProps };

package/src/components/Table/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Table';
+export * from './props';

package/src/components/Table/props.ts

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
+
+import { type KeyValue, type TableColumnDef } from '../../types';
+
+export type TableFlags = Partial<{
+  role: 'table' | 'grid' | 'treegrid';
+  grouping: string[];
+  header: boolean;
+  footer: boolean;
+  border: boolean;
+  fullWidth: boolean;
+  debug: boolean;
+  expand: boolean;
+  rowsSelectable: boolean | 'multi';
+}>;
+
+/**
+ * This is ‘current’ in the `aria-current` sense.
+ */
+export type TableCurrent<TData extends RowData> = Partial<{
+  // App state
+  currentDatum: TData;
+  onDatumClick: (datum: TData) => void;
+}>;
+
+export type TableProps<TData extends RowData> = TableFlags &
+  TableCurrent<TData> &
+  Partial<{
+    keyAccessor: KeyValue<TData>;
+    data: TData[];
+    columns: TableColumnDef<TData>[];
+    onColumnResize: (state: Record<string, number>) => void;
+    columnVisibility: VisibilityState;
+    // Controllable row selection
+    rowSelection: RowSelectionState;
+    defaultRowSelection: RowSelectionState;
+    onRowSelectionChange: (rowSelection: RowSelectionState) => void;
+    // Derived from row selection
+    onDataSelectionChange: (dataSelection: TData[]) => void;
+  }>;
+
+export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
+
+export type TableContextValue<TData extends RowData> = TableFlags &
+  TableCurrent<TData> &
+  Pick<TableProps<TData>, 'keyAccessor'> & {
+    table: Table<TData>;
+    isGrid: boolean;
+  };

package/src/components/index.ts

@@ -4,3 +4,4 @@
 
 export * from './ColumnMenu';
 export * from './Table';
+export * from './Cell';