@dxos/react-ui-table 0.4.10-main.0302e13 → 0.4.10-main.05dbd64

package/src/components/Table/Table.stories.tsx

@@ -5,12 +5,13 @@
 import '@dxosTheme';
 
 import { Plugs, PlugsConnected } from '@phosphor-icons/react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import * as E from '@dxos/echo-schema/schema';
+import { create } from '@dxos/echo-schema';
+import { registerSignalRuntime } from '@dxos/echo-signals/react';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { AnchoredOverflow, DensityProvider } from '@dxos/react-ui';
+import { Button, DensityProvider } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 import { range } from '@dxos/util';
 
@@ -35,7 +36,7 @@ faker.seed(911);
 const createItems = (count: number) =>
   range(count).map(
     () =>
-      E.object<Item>({
+      create<Item>({
         publicKey: PublicKey.random(),
         name: faker.commerce.productName(),
         count: faker.datatype.boolean({ probability: 0.9 }) ? faker.number.int({ min: 0, max: 10_000 }) : undefined,
@@ -115,9 +116,19 @@ const makeColumns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, a
 // Tests
 //
 
+const MinimalTable = (props: any) => {
+  return (
+    <Table.Root>
+      <Table.Viewport classNames='fixed inset-0 overflow-auto'>
+        <Table.Table<any> {...props} />
+      </Table.Viewport>
+    </Table.Root>
+  );
+};
+
 export default {
   title: 'react-ui-table/Table',
-  component: Table,
+  component: MinimalTable,
   args: {
     header: true,
     keyAccessor: (item: Item) => item.publicKey.toHex(),
@@ -186,7 +197,6 @@ export const Empty = {
 
 export const Dynamic = {
   render: () => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(50));
 
     useEffect(() => {
@@ -204,26 +214,27 @@ export const Dynamic = {
     const columns = useMemo(() => makeColumns(), []);
 
     return (
-      <AnchoredOverflow.Root classNames='max-bs-[80dvh]' ref={containerRef}>
-        <Table<Item>
-          rowsSelectable='multi'
-          keyAccessor={(row) => row.publicKey.toHex()}
-          columns={columns}
-          data={items}
-          fullWidth
-          footer
-          stickyHeader
-          getScrollElement={() => containerRef.current}
-        />
-        <AnchoredOverflow.Anchor />
-      </AnchoredOverflow.Root>
+      <Table.Root>
+        <Table.Viewport classNames='fixed inset-0 overflow-auto'>
+          <Table.Table<Item>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => row.publicKey.toHex()}
+            columns={columns}
+            data={items}
+            fullWidth
+            stickyHeader
+            border
+            pinLastRow
+          />
+        </Table.Viewport>
+      </Table.Root>
     );
   },
 };
 
 export const Editable = {
   render: () => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(200));
 
     const onUpdate: ValueUpdater<Item, any> = useCallback(
@@ -234,26 +245,27 @@ export const Editable = {
     const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
 
     return (
-      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
-        <Table<Item>
-          role='grid'
-          rowsSelectable='multi'
-          keyAccessor={(row) => row.publicKey.toHex()}
-          columns={columns}
-          data={items}
-          fullWidth
-          stickyHeader
-          border
-          getScrollElement={() => containerRef.current}
-        />
-      </div>
+      <Table.Root>
+        <Table.Viewport classNames='fixed inset-0 overflow-auto'>
+          <Table.Table<Item>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => row.publicKey.toHex()}
+            columns={columns}
+            data={items}
+            fullWidth
+            stickyHeader
+            border
+            pinLastRow
+          />
+        </Table.Viewport>
+      </Table.Root>
     );
   },
 };
 
 export const PinnedLastRow = {
   render: () => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(200));
 
     const onUpdate: ValueUpdater<Item, any> = useCallback(
@@ -264,19 +276,75 @@ export const PinnedLastRow = {
     const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
 
     return (
-      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
-        <Table<Item>
-          role='grid'
-          rowsSelectable='multi'
-          keyAccessor={(row) => row.publicKey.toHex()}
-          columns={columns}
-          data={items}
-          fullWidth
-          stickyHeader
-          border
-          getScrollElement={() => containerRef.current}
-          pinLastRow
-        />
+      <Table.Root>
+        <Table.Viewport classNames='fixed inset-0 overflow-auto'>
+          <Table.Table<Item>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => row.publicKey.toHex()}
+            columns={columns}
+            data={items}
+            fullWidth
+            stickyHeader
+            border
+            pinLastRow
+          />
+        </Table.Viewport>
+      </Table.Root>
+    );
+  },
+};
+
+export const InsertDelete = {
+  render: () => {
+    const [items, setItems] = useState<Item[]>(createItems(10));
+
+    const onUpdate: ValueUpdater<Item, any> = useCallback(
+      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
+      [setItems],
+    );
+
+    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
+
+    const onInsertFirst = () => {
+      setItems((items) => [...createItems(1), ...items]);
+    };
+
+    const onInsertLast = () => {
+      setItems((items) => [...items, ...createItems(1)]);
+    };
+
+    const onDeleteFirst = () => {
+      setItems(([_first, ...rest]) => rest);
+    };
+
+    const onDeleteLast = () => {
+      setItems((items) => [...items.slice(0, items.length - 1)]);
+    };
+
+    return (
+      <div>
+        <div className='flex flex-row gap-2'>
+          <Button onClick={onInsertFirst}>Insert first</Button>
+          <Button onClick={onInsertLast}>Insert last</Button>
+          <Button onClick={onDeleteFirst}>Delete first</Button>
+          <Button onClick={onDeleteLast}>Delete last</Button>
+        </div>
+        <Table.Root>
+          <Table.Viewport classNames='fixed inset-0 overflow-auto'>
+            <Table.Table<Item>
+              role='grid'
+              rowsSelectable='multi'
+              keyAccessor={(row) => row.publicKey.toHex()}
+              columns={columns}
+              data={items}
+              fullWidth
+              stickyHeader
+              border
+              pinLastRow
+            />
+          </Table.Viewport>
+        </Table.Root>
       </div>
     );
   },
@@ -284,7 +352,6 @@ export const PinnedLastRow = {
 
 export const Resizable = {
   render: () => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(10));
 
     const onUpdate: ValueUpdater<Item, any> = useCallback(
@@ -293,25 +360,24 @@ export const Resizable = {
     );
 
     return (
-      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
-        <Table<Item>
-          rowsSelectable='multi'
-          keyAccessor={(row) => row.publicKey.toHex()}
-          columns={makeColumns(onUpdate)}
-          data={items}
-          fullWidth
-          stickyHeader
-          getScrollElement={() => containerRef.current}
-          // onColumnResize={handleColumnResize}
-        />
-      </div>
+      <Table.Root>
+        <Table.Viewport classNames='fixed inset-0 overflow-auto'>
+          <Table.Table<Item>
+            rowsSelectable='multi'
+            keyAccessor={(row) => row.publicKey.toHex()}
+            columns={makeColumns(onUpdate)}
+            data={items}
+            fullWidth
+            stickyHeader
+          />
+        </Table.Viewport>
+      </Table.Root>
     );
   },
 };
 
 export const TenThousandRows = {
   render: () => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
     const [items, setItems] = useState<Item[]>(createItems(10000));
 
     const onUpdate: ValueUpdater<Item, any> = useCallback(
@@ -322,19 +388,123 @@ export const TenThousandRows = {
     const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
 
     return (
-      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
-        <Table<Item>
-          role='grid'
-          rowsSelectable='multi'
-          keyAccessor={(row) => row.publicKey.toHex()}
-          columns={columns}
-          data={items}
-          fullWidth
-          stickyHeader
-          border
-          getScrollElement={() => containerRef.current}
-        />
-      </div>
+      <Table.Root>
+        <Table.Viewport classNames='fixed inset-0 overflow-auto'>
+          <Table.Table<Item>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => row.publicKey.toHex()}
+            columns={columns}
+            data={items}
+            fullWidth
+            stickyHeader
+            border
+          />{' '}
+        </Table.Viewport>
+      </Table.Root>
+    );
+  },
+};
+
+registerSignalRuntime();
+const state = create({ items: createItems(10) });
+
+export const RealTimeUpdates = {
+  args: {
+    periodicMutations: true,
+    mutationInterval: 1000,
+    periodicDeletions: false,
+    deletionInterval: 5000,
+    periodicInsertions: false,
+    insertionInterval: 3000,
+  },
+  argTypes: {
+    mutationInterval: { control: 'number' },
+    periodicDeletions: { control: 'boolean' },
+    deletionInterval: { control: 'number' },
+    periodicInsertions: { control: 'boolean' },
+    insertionInterval: { control: 'number' },
+  },
+  render: ({
+    periodicMutations,
+    mutationInterval,
+    periodicDeletions,
+    deletionInterval,
+    periodicInsertions,
+    insertionInterval,
+  }: any) => {
+    useEffect(() => {
+      if (!periodicMutations) {
+        return;
+      }
+
+      const interval = setInterval(() => {
+        if (state.items.length === 0) {
+          return;
+        }
+
+        const randomIndex = Math.floor(Math.random() * state.items.length);
+        console.log('Mutating row', randomIndex);
+        state.items[randomIndex].name = faker.commerce.productName();
+        state.items[randomIndex].count = Math.floor(Math.random() * 1000);
+        state.items[randomIndex].started = new Date();
+      }, mutationInterval);
+
+      return () => clearInterval(interval);
+    }, [periodicMutations, mutationInterval, state.items]);
+
+    useEffect(() => {
+      if (!periodicInsertions) {
+        return;
+      }
+
+      const interval = setInterval(() => {
+        console.log('Inserting...');
+        state.items.push(createItems(1)[0]);
+      }, insertionInterval);
+
+      return () => clearInterval(interval);
+    }, [periodicInsertions, insertionInterval, state.items]);
+
+    useEffect(() => {
+      if (!periodicDeletions) {
+        return;
+      }
+
+      const interval = setInterval(() => {
+        if (state.items.length === 0) {
+          return;
+        }
+
+        console.log('Deleting');
+
+        // Randomly delete a row from state.items
+        const randomIndex = Math.floor(Math.random() * state.items.length);
+        state.items.splice(randomIndex, 1);
+      }, deletionInterval);
+
+      return () => clearInterval(interval);
+    }, [periodicDeletions, deletionInterval, state.items]);
+
+    const onUpdate = useCallback((...args: any[]) => {}, []);
+    const columns = useMemo(() => makeColumns(onUpdate), []);
+
+    return (
+      <Table.Root>
+        <Table.Viewport classNames='fixed inset-0 overflow-auto'>
+          <Table.Table<Item>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => row.publicKey.toHex()}
+            columns={columns}
+            data={state.items}
+            fullWidth
+            stickyHeader
+            border
+            pinLastRow
+          />
+        </Table.Viewport>
+      </Table.Root>
     );
   },
 };

package/src/components/Table/Table.tsx

@@ -1,35 +1,60 @@
 //
 // Copyright 2023 DXOS.org
 //
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { type Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
 import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-  type ColumnSizingInfoState,
   type GroupingState,
   type RowData,
-  type ColumnSizingState,
-  type OnChangeFn,
-  type RowSelectionState,
   getGroupedRowModel,
   getExpandedRowModel,
+  type Row,
 } from '@tanstack/react-table';
-import { useVirtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { type ComponentPropsWithoutRef, Fragment, useCallback, useEffect, useState, useContext } from 'react';
 
-import { log } from '@dxos/log';
-import { useDefaultValue, useOnTransition } from '@dxos/react-ui';
+import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
 import { TableBody } from './TableBody';
 import { type TypedTableProvider, TableProvider as UntypedTableProvider, useTableContext } from './TableContext';
 import { TableFooter } from './TableFooter';
 import { TableHead } from './TableHead';
+import { TableRootContext, useTableRootContext } from './TableRootContext';
 import { type TableProps } from './props';
+import { useColumnResizing, usePinLastRow, useRowSelection } from '../../hooks';
 import { groupTh, tableRoot } from '../../theme';
-import { usePinLastRow } from '../hooks/usePinLastRow';
 
-export const Table = <TData extends RowData>(props: TableProps<TData>) => {
+type TableRootProps = { children: React.ReactNode };
+
+const TableRoot = ({ children }: TableRootProps) => {
+  const contextValue = useTableRootContext();
+  return <TableRootContext.Provider value={contextValue}>{children}</TableRootContext.Provider>;
+};
+
+type TableViewportProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const TableViewport = ({ children, classNames, asChild, ...props }: TableViewportProps) => {
+  const { scrollContextRef } = useContext(TableRootContext);
+
+  const classes = mx(classNames);
+
+  return asChild ? (
+    <Slot ref={scrollContextRef} {...props}>
+      {children}
+    </Slot>
+  ) : (
+    <div role='none' className={classes} ref={scrollContextRef} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>) => {
   const {
     role,
     onColumnResize,
@@ -38,62 +63,26 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     rowsSelectable,
     debug,
     onDataSelectionChange,
-    getScrollElement,
     pinLastRow,
   } = props;
 
   const columns = useDefaultValue(props.columns, []);
-  const data = useDefaultValue(props.data, []);
+  const incomingData = useDefaultValue(props.data, []);
 
-  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
-
-  const [columnsInitialised, setColumnsInitialised] = useState(false);
-  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
-
-  useEffect(() => {
-    if (columnsInitialised) {
-      return;
-    }
-
-    setColumnSizing(
-      columns
-        .filter((column) => !!column.size && (column as any).prop !== undefined)
-        .reduce<ColumnSizingState>((state, column) => {
-          state[(column as any).prop] = column.size!;
-          return state;
-        }, {}),
-    );
+  const [data, setData] = useState([...incomingData]);
 
-    setColumnsInitialised(true);
-  }, [columns, setColumnSizing]);
+  // Reactivity workaround: https://github.com/dxos/dxos/issues/6376.
+  const forceUpdate = useCallback(() => setData([...incomingData]), [incomingData]);
+  useEffect(() => forceUpdate(), [JSON.stringify(incomingData), forceUpdate]);
 
-  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
-
-  // Notify on column resize.
-  const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [onColumnResize, columnSizing]);
-  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === 'string', false, notifyColumnResize);
+  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
 
-  const [rowSelection = {}, setRowSelection] = useControllableState({
-    prop: props.rowSelection,
-    onChange: props.onRowSelectionChange,
-    defaultProp: props.defaultRowSelection,
+  const { columnSizing, setColumnSizing, columnSizingInfo, setColumnSizingInfo } = useColumnResizing({
+    columns,
+    onColumnResize,
   });
 
-  // 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') {
-        setRowSelection(nextRowSelection);
-      } else if (rowsSelectable) {
-        const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-        setRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
-      } else {
-        setRowSelection({});
-      }
-    },
-    [rowsSelectable, setRowSelection, rowSelection],
-  );
+  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
 
   const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
   useEffect(() => handleGroupingChange(props.grouping ?? []), [handleGroupingChange, props.grouping]);
@@ -150,15 +139,11 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [onDataSelectionChange, rowSelection, table]);
 
-  usePinLastRow(pinLastRow, table, data, getScrollElement);
+  usePinLastRow(pinLastRow, table, data);
 
   // Create additional expansion column if all columns have fixed width.
   const expand = false; // columns.map((column) => column.size).filter(Boolean).length === columns?.length;
 
-  if (!getScrollElement) {
-    log.warn('Table: getScrollElement is not set. This is required for virtualized tables.');
-  }
-
   return (
     <TableProvider
       {...props}
@@ -167,22 +152,18 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
       expand={expand}
       isGrid={role === 'grid' || role === 'treegrid'}
     >
-      <TableImpl<TData> debug={false} getScrollElement={getScrollElement} {...props} />
+      <TableImpl<TData> debug={false} {...props} />
     </TableProvider>
   );
 };
 
+// TODO(Zan): Smush this into the Table component.
 /**
  * Pure implementation of table outside of context set-up.
  */
 const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
-  const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
-  const { table } = useTableContext();
-
-  const centerRows = table.getCenterRows();
-  const bottomRows = table.getBottomRows();
-
-  const rows = [...centerRows, ...bottomRows];
+  const { debug, classNames, role, footer, grouping, fullWidth } = props;
+  const { table } = useTableContext<TData>();
 
   if (debug) {
     return (
@@ -192,9 +173,10 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
     );
   }
 
-  const virtualisable = getScrollElement !== undefined;
   const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
 
+  const TableComponent = isResizingColumn ? MemoizedVirtualisedTableContent : VirtualizedTableContent;
+
   return (
     <table
       role={role}
@@ -203,39 +185,34 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
     >
       <TableHead />
 
-      {grouping?.length !== 0 ? (
-        virtualisable ? (
-          isResizingColumn ? (
-            <MemoizedVirtualisedTableContent getScrollElement={getScrollElement} />
-          ) : (
-            <VirtualizedTableContent getScrollElement={getScrollElement} />
-          )
-        ) : (
-          <TableBody rows={rows} />
-        )
-      ) : (
-        <GroupedTableContent />
-      )}
+      {grouping?.length !== 0 ? <TableComponent /> : <GroupedTableContent />}
 
       {footer && <TableFooter />}
     </table>
   );
 };
 
-const VirtualizedTableContent = ({
-  getScrollElement,
-}: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
+const VirtualizedTableContent = () => {
   const { table } = useTableContext();
+  const { virtualizer, dispatch } = useContext(TableRootContext);
 
   const centerRows = table.getCenterRows();
-  const pinnedRows = table.getBottomRows();
 
-  const { getTotalSize, getVirtualItems } = useVirtualizer({
-    getScrollElement,
-    count: centerRows.length,
-    overscan: 8,
-    estimateSize: () => 40,
-  });
+  useEffect(() => {
+    dispatch({ type: 'updateTableCount', count: centerRows.length });
+  }, [centerRows.length]);
+
+  let pinnedRows = [] as Row<unknown>[];
+
+  try {
+    // TODO(zan): Work out how to sync the row pinning with rendering
+    // This is a hack because the first call to this function after a row is deleted will throw an error
+    // because the row index is no longer in the table
+    // The pin last row hook updates the pinned row key after the row is deleted
+    pinnedRows = table.getBottomRows();
+  } catch (_) {} // Ignore error
+
+  const { getTotalSize, getVirtualItems } = virtualizer;
 
   const virtualRows = getVirtualItems();
   const totalSize = getTotalSize();
@@ -246,7 +223,7 @@ const VirtualizedTableContent = ({
   const rowsToRender = [...virtualRows.map((virtualRow) => centerRows[virtualRow.index]), ...pinnedRows];
 
   return (
-    <>
+    <Fragment>
       {paddingTop > 0 && (
         <tbody role='none'>
           <tr role='none'>
@@ -262,7 +239,7 @@ const VirtualizedTableContent = ({
           </tr>
         </tbody>
       )}
-    </>
+    </Fragment>
   );
 };
 
@@ -299,3 +276,9 @@ const GroupedTableContent = () => {
     </>
   );
 };
+
+export const Table = {
+  Root: TableRoot,
+  Table: TablePrimitive,
+  Viewport: TableViewport,
+};