@dxos/react-ui-table 0.4.9 → 0.4.10-main.05b9ab6

package/src/components/Table/Table.tsx

@@ -1,34 +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';
 
-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,
@@ -37,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 [data, setData] = useState([...incomingData]);
 
-  const [columnsInitialised, setColumnsInitialised] = useState(false);
-  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+  // Reactivity workaround: https://github.com/dxos/dxos/issues/6376.
+  const forceUpdate = useCallback(() => setData([...incomingData]), [incomingData]);
+  useEffect(() => forceUpdate(), [JSON.stringify(incomingData), forceUpdate]);
 
-  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;
-        }, {}),
-    );
-
-    setColumnsInitialised(true);
-  }, [columns, setColumnSizing]);
-
-  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]);
@@ -149,25 +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]);
 
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
-    }
-
-    // Clear row pinning
-    table.resetRowPinning();
-
-    const rows = table.getRowModel().rows;
-    rows[rows.length - 1].pin('bottom');
-  }, [pinLastRow, table, data]);
+  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}
@@ -176,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 (
@@ -201,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}
@@ -212,41 +185,33 @@ 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();
+  let pinnedRows = [] as Row<unknown>[];
 
-  const rows = [...centerRows, ...pinnedRows];
+  useEffect(() => {
+    dispatch({ type: 'updateTableCount', count: centerRows.length });
+  }, [centerRows.length]);
 
-  const { getTotalSize, getVirtualItems } = useVirtualizer({
-    getScrollElement,
-    count: rows.length,
-    overscan: 8,
-    estimateSize: () => 40,
-  });
+  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();
@@ -254,8 +219,12 @@ const VirtualizedTableContent = ({
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
 
+  const rowsToRender = [...virtualRows.map((virtualRow) => centerRows[virtualRow.index]), ...pinnedRows].filter(
+    (r) => !!r,
+  );
+
   return (
-    <>
+    <Fragment>
       {paddingTop > 0 && (
         <tbody role='none'>
           <tr role='none'>
@@ -263,7 +232,7 @@ const VirtualizedTableContent = ({
           </tr>
         </tbody>
       )}
-      <TableBody rows={virtualRows.map((virtualRow) => rows[virtualRow.index])} />
+      <TableBody rows={rowsToRender} />
       {paddingBottom > 0 && (
         <tbody role='none'>
           <tr role='none'>
@@ -271,7 +240,7 @@ const VirtualizedTableContent = ({
           </tr>
         </tbody>
       )}
-    </>
+    </Fragment>
   );
 };
 
@@ -308,3 +277,9 @@ const GroupedTableContent = () => {
     </>
   );
 };
+
+export const Table = {
+  Root: TableRoot,
+  Table: TablePrimitive,
+  Viewport: TableViewport,
+};

package/src/components/Table/TableBody.tsx

@@ -4,9 +4,10 @@
 
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { flexRender, type Row, type RowData } from '@tanstack/react-table';
-import React from 'react';
+import React, { useContext } from 'react';
 
 import { useTableContext } from './TableContext';
+import { TableRootContext } from './TableRootContext';
 import { tbodyTr } from '../../theme';
 import { Cell } from '../Cell/Cell';
 
@@ -23,15 +24,24 @@ const TableBody = ({ rows }: TableBodyProps) => {
   const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
   const canBeCurrent = !isGrid && !!onDatumClick;
 
+  const { virtualizer } = useContext(TableRootContext);
+
   return (
     <tbody {...(isGrid && domAttributes)}>
       {rows.map((row) => {
         const isCurrent = currentDatum === row.original;
         const isSelected = rowSelection?.[row.id];
+
+        const isPinned = row.getIsPinned();
+
+        const classNames = tbodyTr({ canBeCurrent, isPinned: isPinned !== false });
+
         return (
           <tr
             key={keyAccessor ? keyAccessor(row.original) : row.id}
-            className={tbodyTr({ canBeCurrent })}
+            className={classNames}
+            data-index={row.index}
+            ref={virtualizer.measureElement}
             {...(isCurrent && { 'aria-current': 'location' })}
             {...(isSelected && { 'aria-selected': 'true' })}
             {...(canBeCurrent && {

package/src/components/Table/TableRootContext.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { createContext, useRef, useState } from 'react';
+
+type TableRootContextActions = { type: 'updateTableCount'; count: number };
+
+export const useTableRootContext = () => {
+  const scrollContextRef = useRef<HTMLDivElement>(null);
+  const [tableCount, setTableCount] = useState(0);
+
+  const virtualizer = useVirtualizer({
+    getScrollElement: () => scrollContextRef?.current ?? null,
+    count: tableCount,
+    overscan: 8,
+    estimateSize: () => 40,
+  });
+
+  const dispatch = (action: TableRootContextActions) => {
+    switch (action.type) {
+      case 'updateTableCount':
+        setTableCount(action.count);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return { scrollContextRef, virtualizer, dispatch };
+};
+
+export type TableRootContextValue = ReturnType<typeof useTableRootContext>;
+
+// Create the context without a default value.
+// The expectation is that the provider will always supply a value, so no need to define a default here.
+export const TableRootContext = createContext<TableRootContextValue>({} as TableRootContextValue);

package/src/components/Table/index.ts

@@ -4,3 +4,4 @@
 
 export * from './Table';
 export * from './props';
+export * from './TableRootContext';

package/src/components/Table/props.ts

@@ -3,7 +3,6 @@
 //
 
 import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
-import { type VirtualizerOptions } from '@tanstack/react-virtual';
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
@@ -31,30 +30,24 @@ export type TableCurrent<TData extends RowData> = Partial<{
   onDatumClick: (datum: TData) => void;
 }>;
 
-export type TableProps<
-  TData extends RowData,
-  ScrollElement extends Element | Window = Element,
-  ItemElement extends Element = HTMLTableRowElement,
-> = TableFlags &
+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;
-      // `table` element props
-      classNames: ClassNameValue;
-      pinLastRow: boolean;
-    } & Pick<VirtualizerOptions<ScrollElement, ItemElement>, 'getScrollElement'>
-  >;
+  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;
+    // `table` element props
+    classNames: ClassNameValue;
+    pinLastRow: boolean;
+  }>;
 
 export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
 

package/src/components/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './Cell';
 export * from './ColumnMenu';
 export * from './Table';
-export * from './Cell';

package/src/helpers.tsx

@@ -14,7 +14,7 @@ import {
 } from '@tanstack/react-table';
 import { format } from 'date-fns/format';
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { type PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
@@ -102,14 +102,16 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
 
   // https://tanstack.com/table/v8/docs/examples/react/editable-data
   const initialValue = cellContext.getValue();
-  const [value, setValue] = useState(() => {
+
+  const getInitialValue = useCallback(() => {
     // TODO(burdon): Temporary shim for automerge.
-    if ((initialValue as any)?.content) {
-      return (initialValue as any)?.content;
-    }
+    return (initialValue as any)?.content ?? initialValue;
+  }, [initialValue]);
+
+  const [value, setValue] = useState(getInitialValue);
 
-    return initialValue;
-  });
+  // Update value if initialValue changes externally (cell reactivity).
+  useEffect(() => setValue(getInitialValue()), [getInitialValue]);
 
   const handleSave = () => {
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
@@ -340,7 +342,7 @@ export class ColumnBuilder<TData extends RowData> {
         ...props.meta,
         onUpdate,
         digits,
-        header: { classNames: 'text-end', ...props.meta?.header },
+        header: { ...props.meta?.header },
         cell: { ...props.meta?.cell, classNames },
       },
     };
@@ -498,4 +500,26 @@ export class ColumnBuilder<TData extends RowData> {
       ...props,
     };
   }
+
+  /**
+   * This display column type is for nested/unhandled data to appear as JSON.
+   */
+  display({ label, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
+    return {
+      size: 120,
+      minSize: 120,
+      header: (cell) => label ?? cell.header.id,
+      cell: (cell) => {
+        const value = cell.getValue();
+
+        return (
+          <div className='overflow-scroll'>
+            <code className='text-xs'>{JSON.stringify(value)}</code>
+          </div>
+        );
+      },
+      ...props,
+      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames: ['font-mono', textPadding, classNames] } },
+    };
+  }
 }

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useColumnSizing';
+export * from './useColumnSorting';
+export * from './usePinLastRow';
+export * from './useRowSelection';

package/src/hooks/useColumnSizing.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { type ColumnSizingInfoState, type ColumnSizingState } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+
+import { useOnTransition } from '@dxos/react-ui';
+
+import { type TableColumnDef } from '../components/Table';
+
+export const useColumnResizing = ({
+  columns,
+  onColumnResize,
+}: {
+  columns: TableColumnDef<any>[];
+  onColumnResize: ((state: Record<string, number>) => void) | undefined;
+}) => {
+  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;
+        }, {}),
+    );
+
+    setColumnsInitialised(true);
+  }, [columns, setColumnSizing]);
+
+  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);
+
+  return { columnSizing, columnSizingInfo, setColumnSizing, setColumnSizingInfo };
+};

package/src/hooks/useColumnSorting.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type SortDirection, type Column } from '@tanstack/react-table';
+import { useState } from 'react';
+
+export const useColumnSorting = (column: Column<any>) => {
+  const [sortDirection, setSortDirection] = useState<SortDirection | false>(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState<SortDirection | undefined>();
+
+  const canSort = column.getCanSort();
+
+  const updateColumnSort = (direction: SortDirection | false) => {
+    setSortDirection(direction);
+
+    switch (direction) {
+      case false:
+        column.clearSorting();
+        break;
+      case 'asc':
+        column.toggleSorting(false); // descending false
+        break;
+      case 'desc':
+        column.toggleSorting(true); // descending true
+        break;
+    }
+  };
+
+  // Whichever sort is explicitly set first, will be the first sort direction
+  // When toggling, we always go to the other direction, and then to unsorted.
+  const onToggleSort = () => {
+    if (sortDirection === false) {
+      return;
+    }
+
+    if (sortDirection === firstSort) {
+      updateColumnSort(firstSort === 'asc' ? 'desc' : 'asc');
+    } else {
+      updateColumnSort(false);
+    }
+  };
+
+  const onSelectSort = (direction: SortDirection) => {
+    setFirstSort(direction);
+    updateColumnSort(direction);
+  };
+
+  const onClearSort = () => {
+    updateColumnSort(false);
+  };
+
+  return { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort };
+};