@dxos/react-ui-table 0.4.10-main.4c7b3fa → 0.4.10-main.4d26ea7

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,6 +24,8 @@ const TableBody = ({ rows }: TableBodyProps) => {
   const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
   const canBeCurrent = !isGrid && !!onDatumClick;
 
+  const { virtualizer } = useContext(TableRootContext);
+
   return (
     <tbody {...(isGrid && domAttributes)}>
       {rows.map((row) => {
@@ -37,6 +40,8 @@ const TableBody = ({ rows }: TableBodyProps) => {
           <tr
             key={keyAccessor ? keyAccessor(row.original) : row.id}
             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/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();

package/src/hooks/index.ts

@@ -2,5 +2,7 @@
 // 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/usePinLastRow.ts

@@ -5,21 +5,21 @@
 import { type Row, type Table } from '@tanstack/react-table';
 import { useCallback, useEffect, useState } from 'react';
 
-export const usePinLastRow = (
-  pinLastRow: boolean | undefined,
-  table: Table<any>,
-  data: any[],
-  getScrollElement?: () => Element | null,
-) => {
+import { useTableRootContext } from '../components';
+
+export const usePinLastRow = (pinLastRow: boolean | undefined, table: Table<any>, data: any[]) => {
+  const { scrollContextRef } = useTableRootContext();
   const [pinnedRowKey, setPinnedRowKey] = useState<string>();
 
   // Scrolls to the bottom of a scrollable element.
   const scrollToBottom = useCallback(() => {
-    const scrollElement = getScrollElement?.();
-    if (scrollElement) {
-      requestAnimationFrame(() => scrollElement.scrollTo({ top: scrollElement.scrollHeight }));
+    const element = scrollContextRef.current;
+    const scrollHeight = element?.scrollHeight;
+
+    if (element && scrollHeight) {
+      requestAnimationFrame(() => element.scrollTo({ top: scrollHeight }));
     }
-  }, [getScrollElement]);
+  }, []);
 
   const pinRow = useCallback(
     (rowToPin: Row<any>) => {

package/src/hooks/useRowSelection.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { type OnChangeFn, type RowSelectionState } from '@tanstack/react-table';
+import { useCallback } from 'react';
+
+import { type TableProps } from '../components/Table';
+
+export const useRowSelection = (
+  props: Pick<
+    TableProps<any>,
+    'rowsSelectable' | 'defaultRowSelection' | 'rowSelection' | 'onRowSelectionChange' | 'rowsSelectable'
+  >,
+) => {
+  const [rowSelection = {}, setRowSelection] = 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 (props.rowsSelectable === 'multi') {
+        setRowSelection(nextRowSelection);
+      } else if (props.rowsSelectable) {
+        const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
+        setRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
+      } else {
+        setRowSelection({});
+      }
+    },
+    [props.rowsSelectable, setRowSelection, rowSelection],
+  );
+
+  return { rowSelection, handleRowSelectionChange };
+};

package/src/schema/SchemaToTable.stories.tsx

@@ -6,7 +6,7 @@ import '@dxosTheme';
 
 import * as Arbitrary from '@effect/schema/Arbitrary';
 import * as fc from 'fast-check';
-import React, { useRef } from 'react';
+import React from 'react';
 
 import { S } from '@dxos/echo-schema';
 import { DensityProvider } from '@dxos/react-ui';
@@ -51,22 +51,21 @@ const items = fc.sample(exampleSchemaArbitrary, 10);
 
 export const SchemaTable = {
   render: () => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
-
     return (
-      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
-        <Table<ExampleSchema>
-          role='grid'
-          rowsSelectable='multi'
-          keyAccessor={(row) => JSON.stringify(row)}
-          columns={columns}
-          data={items}
-          fullWidth
-          stickyHeader
-          border
-          getScrollElement={() => containerRef.current}
-        />
-      </div>
+      <Table.Root>
+        <Table.Viewport classNames='inset-0 fixed'>
+          <Table.Table<ExampleSchema>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => JSON.stringify(row)}
+            columns={columns}
+            data={items}
+            fullWidth
+            stickyHeader
+            border
+          />
+        </Table.Viewport>
+      </Table.Root>
     );
   },
 };