@dxos/react-ui-table 0.4.8-main.c67d72c → 0.4.8-main.cd60bd2

package/src/components/Table/Table.tsx

@@ -4,6 +4,7 @@
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import {
   getCoreRowModel,
+  getSortedRowModel,
   useReactTable,
   type ColumnSizingInfoState,
   type GroupingState,
@@ -12,12 +13,13 @@ import {
   type OnChangeFn,
   type RowSelectionState,
   getGroupedRowModel,
+  getExpandedRowModel,
 } from '@tanstack/react-table';
 import { useVirtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 
-import { debounce } from '@dxos/async';
 import { log } from '@dxos/log';
+import { useDefaultValue, useOnTransition } from '@dxos/react-ui';
 
 import { TableBody } from './TableBody';
 import { TableProvider as UntypedTableProvider, type TypedTableProvider, useTableContext } from './TableContext';
@@ -29,8 +31,6 @@ import { groupTh, tableRoot } from '../../theme';
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   const {
     role,
-    data = [],
-    columns = [],
     onColumnResize,
     columnVisibility,
     header = true,
@@ -38,18 +38,22 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     debug,
     onDataSelectionChange,
     getScrollElement,
+    pinLastRow,
   } = props;
 
-  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
+  const columns = useDefaultValue(props.columns, []);
+  const data = useDefaultValue(props.data, []);
 
-  //
-  // Column resizing
-  //
+  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
 
+  const [columnsInitialised, setColumnsInitialised] = useState(false);
   const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
 
   useEffect(() => {
-    // Set initial state.
+    if (columnsInitialised) {
+      return;
+    }
+
     setColumnSizing(
       columns
         .filter((column) => !!column.size && (column as any).prop !== undefined)
@@ -58,20 +62,15 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
           return state;
         }, {}),
     );
-  }, [columns]);
 
-  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
+    setColumnsInitialised(true);
+  }, [columns, setColumnSizing]);
 
-  const onColumnResizeDebounced = onColumnResize && debounce<ColumnSizingState>(onColumnResize, 1_000);
-  useEffect(() => {
-    if (columnSizingInfo.columnSizingStart?.length === 0) {
-      onColumnResizeDebounced?.(table.getState().columnSizing);
-    }
-  }, [columnSizingInfo]);
+  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
 
-  //
-  // Row selection
-  //
+  // Notify on column resize.
+  const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [onColumnResize, columnSizing]);
+  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === 'string', false, notifyColumnResize);
 
   const [rowSelection = {}, setRowSelection] = useControllableState({
     prop: props.rowSelection,
@@ -79,10 +78,6 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     defaultProp: props.defaultRowSelection,
   });
 
-  useEffect(() => {
-    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
-  }, [onDataSelectionChange, rowSelection]);
-
   // TODO(thure): Does @tanstack/react-table really need this intervention? It did seem necessary to enforce single-selection...
   const handleRowSelectionChange = useCallback<OnChangeFn<RowSelectionState>>(
     (updaterOrValue) => {
@@ -96,15 +91,11 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
         setRowSelection({});
       }
     },
-    [rowSelection, setRowSelection],
+    [rowsSelectable, setRowSelection, rowSelection],
   );
 
-  //
-  // Row grouping
-  //
-
   const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
-  useEffect(() => handleGroupingChange(props.grouping ?? []), [props.grouping]);
+  useEffect(() => handleGroupingChange(props.grouping ?? []), [handleGroupingChange, props.grouping]);
 
   const table = useReactTable({
     // Data
@@ -135,23 +126,41 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
 
     // Rows
     getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
 
     // Grouping
     getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : undefined,
     onGroupingChange: handleGroupingChange,
 
-    // Selection
-    ...(rowsSelectable === 'multi'
-      ? { enableMultiRowSelection: true }
-      : rowsSelectable
-        ? { enableRowSelection: true }
-        : {}),
+    enableMultiRowSelection: rowsSelectable === 'multi' ? true : undefined,
+    enableRowSelection: rowsSelectable === true ? true : undefined,
+
     onRowSelectionChange: handleRowSelectionChange,
 
+    enableSorting: true,
+    enableColumnPinning: true,
+
     // Debug
     debugTable: debug,
   });
 
+  useEffect(() => {
+    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]);
+
   // Create additional expansion column if all columns have fixed width.
   const expand = false; // columns.map((column) => column.size).filter(Boolean).length === columns?.length;
 
@@ -178,7 +187,11 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
 const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
   const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
   const { table } = useTableContext<TData>('TableImpl');
-  const { rows } = table.getRowModel();
+
+  const centerRows = table.getCenterRows();
+  const bottomRows = table.getBottomRows();
+
+  const rows = [...centerRows, ...bottomRows];
 
   if (debug) {
     return (
@@ -188,6 +201,8 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
     );
   }
 
+  const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+
   return (
     <table
       role={role}
@@ -198,7 +213,11 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
 
       {grouping?.length !== 0 ? (
         getScrollElement ? (
-          <VirtualizedTableContent getScrollElement={getScrollElement} />
+          isResizingColumn ? (
+            <MemoizedVirtualisedTableContent getScrollElement={getScrollElement} />
+          ) : (
+            <VirtualizedTableContent getScrollElement={getScrollElement} />
+          )
         ) : (
           <TableBody rows={rows} />
         )
@@ -214,10 +233,12 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
 const VirtualizedTableContent = ({
   getScrollElement,
 }: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
-  const {
-    table: { getRowModel },
-  } = useTableContext('VirtualizedTableContent');
-  const rows = getRowModel().rows;
+  const { table } = useTableContext('VirtualizedTableContent');
+
+  const centerRows = table.getCenterRows();
+  const pinnedRows = table.getBottomRows();
+
+  const rows = [...centerRows, ...pinnedRows];
 
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
@@ -225,6 +246,7 @@ const VirtualizedTableContent = ({
     overscan: 4,
     estimateSize: () => 33,
   });
+
   const virtualRows = getVirtualItems();
   const totalSize = getTotalSize();
 
@@ -252,6 +274,8 @@ const VirtualizedTableContent = ({
   );
 };
 
+export const MemoizedVirtualisedTableContent = React.memo(VirtualizedTableContent) as typeof VirtualizedTableContent;
+
 const GroupedTableContent = () => {
   const {
     table: { getGroupedRowModel, getHeaderGroups, getState },

package/src/components/Table/TableBody.tsx

@@ -19,6 +19,7 @@ type TableBodyProps<TData extends RowData> = {
 const TableBody = <TData extends RowData>({ rows }: TableBodyProps<TData>) => {
   const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } =
     useTableContext<TData>(TABLE_BODY_NAME);
+
   const rowSelection = table.getState().rowSelection;
   const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
   const canBeCurrent = !isGrid && !!onDatumClick;

package/src/components/Table/TableHead.tsx

@@ -34,6 +34,8 @@ const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
 
             {headerGroup.headers.map((header) => {
               const isResizing = header.column.getIsResizing();
+              const resizeHandler = header.getResizeHandler();
+
               return (
                 <th
                   key={header.id}
@@ -56,8 +58,8 @@ const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
                       style={{
                         transform: `translateX(${isResizing ? state.columnSizingInfo.deltaOffset : 0}px)`,
                       }}
-                      onMouseDown={header.getResizeHandler()}
-                      onTouchStart={header.getResizeHandler()}
+                      onMouseDown={resizeHandler}
+                      onTouchStart={resizeHandler}
                     >
                       <div className={mx(theadResizeThumb(tableContext))} />
                     </div>

package/src/components/Table/props.ts

@@ -52,6 +52,7 @@ export type TableProps<
       onDataSelectionChange: (dataSelection: TData[]) => void;
       // `table` element props
       classNames: ClassNameValue;
+      pinLastRow: boolean;
     } & Pick<VirtualizerOptions<ScrollElement, ItemElement>, 'getScrollElement'>
   >;
 

package/src/helpers.tsx

@@ -95,8 +95,11 @@ const ComboboxBuilderCell = <TData extends RowData>(cellContext: CellContext<TDa
 };
 
 const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, string>) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { onUpdate } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+  const ref = useRef<HTMLInputElement>(null);
+  const { findPrevFocusable } = useFocusFinders();
+
+  const { onUpdate, cell } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+
   // https://tanstack.com/table/v8/docs/examples/react/editable-data
   const initialValue = cellContext.getValue();
   const [value, setValue] = useState(() => {
@@ -109,32 +112,34 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
   });
 
   const handleSave = () => {
-    if (value === initialValue) {
-      return;
-    }
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
 
-    onUpdate?.(cellContext.row.original, cellContext.column.id, value);
+    if (value !== initialValue) {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, value);
+    }
   };
 
-  const handleCancel = () => {
-    setValue(initialValue);
-  };
+  const handleCancel = () => setValue(initialValue);
 
-  // Check if first input column of last row.
-  const rows = cellContext.table.getRowModel().flatRows;
+  let placeholder = false;
   const columns = cellContext.table.getVisibleFlatColumns();
-  const placeholder = cellContext.row.index === rows.length - 1 && columns[0].id === cellContext.column.id;
+
+  // Calling getRowModel is expensive, so only do it when we're a cell in the first position
+  if (columns[0].id === cellContext.column.id) {
+    const rowCount = cellContext.table.getRowModel().rows.length;
+    placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
+  }
 
   // TODO(burdon): Don't render inputs unless mouse over (Show ellipsis when div)?
   return (
     <Input.Root>
       <Input.TextInput
-        ref={inputRef}
+        ref={ref}
         variant='subdued'
         placeholder={placeholder ? 'Add row...' : undefined}
-        classNames={['is-full', textPadding]}
+        classNames={['is-full', textPadding, cell?.classNames]}
         value={value ?? ''}
-        onBlur={() => handleSave()}
+        onBlur={handleSave}
         onChange={(event) => setValue(event.target.value)}
         onKeyDown={(event) => (event.key === 'Enter' && handleSave()) || (event.key === 'Escape' && handleCancel())}
       />
@@ -164,17 +169,20 @@ const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [digits, value]);
 
-  const handleEdit = () => {
-    if (onUpdate) {
-      setText(value !== undefined ? String(value) : '');
-    }
-  };
+  const handleEdit = () => setText(value !== undefined ? String(value) : '');
 
   // TODO(burdon): Property is encoded as float (e.g., 6.1 => 6.099)
   const handleSave = () => {
     const nextValue = parseNumber(text);
-    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? undefined : nextValue);
-    setText(displayNumber(nextValue, digits));
+
+    if (!isNaN(nextValue)) {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, nextValue);
+      setText(displayNumber(nextValue, digits));
+    } else {
+      // Reset the text to display the original value without updating the model.
+      setText(displayNumber(value, digits));
+    }
+
     // Shift focus only if input is focused on save (e.g. on `Enter`).
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
   };
@@ -210,20 +218,23 @@ const RowSelectorBuilderCell = <TData extends RowData>(cellContext: CellContext<
   const checked = row.getCanSelect()
     ? row.getIsSelected()
     : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? 'indeterminate' : row.getIsAllSubRowsSelected());
+
   return (
-    <Input.Root>
-      <Input.Checkbox
-        size={4}
-        classNames={['mli-auto', cell?.classNames]}
-        checked={checked}
-        onCheckedChange={(event) => {
-          if (row.getCanSelect()) {
-            row.getToggleSelectedHandler()(event);
-          }
-        }}
-        disabled={!(row.getCanSelect() || row.getCanSelectSubRows())}
-      />
-    </Input.Root>
+    <div className='flex justify-center w-full h-full' role='presentation'>
+      <Input.Root>
+        <Input.Checkbox
+          size={4}
+          classNames={[cell?.classNames]}
+          checked={checked}
+          onCheckedChange={(event) => {
+            if (row.getCanSelect()) {
+              row.getToggleSelectedHandler()(event);
+            }
+          }}
+          disabled={!(row.getCanSelect() || row.getCanSelectSubRows())}
+        />
+      </Input.Root>
+    </div>
   );
 };
 
@@ -422,21 +433,22 @@ export class ColumnBuilder<TData extends RowData> {
     return {
       id,
       size: 32,
-      minSize: 32,
-      maxSize: 32,
+      enableResizing: false,
       meta: { onUpdate, cell: { classNames } },
       header: ({ table }) => {
         const { rowsSelectable } = useTableContext('HELPER_SELECT_ROW_HEADER_CELL');
         const checked = table.getIsSomeRowsSelected() ? 'indeterminate' : table.getIsAllRowsSelected();
         return rowsSelectable === 'multi' ? (
-          <Input.Root>
-            <Input.Checkbox
-              size={4}
-              classNames={['mli-auto', classNames]}
-              checked={checked}
-              onCheckedChange={() => table.toggleAllRowsSelected()}
-            />
-          </Input.Root>
+          <div className='flex justify-center w-full h-full' role='presentation'>
+            <Input.Root>
+              <Input.Checkbox
+                size={4}
+                classNames={['mli-auto', classNames]}
+                checked={checked}
+                onCheckedChange={() => table.toggleAllRowsSelected()}
+              />
+            </Input.Root>
+          </div>
         ) : null;
       },
       cell: RowSelectorBuilderCell,
@@ -453,6 +465,8 @@ export class ColumnBuilder<TData extends RowData> {
       size: 50,
       minSize: 50,
       header: (column) => label ?? column.header.id,
+      // TODO(Zan): Implement sort algorithm
+      enableSorting: true,
       cell: SwitchBuilderCell,
       ...props,
       meta: { ...props.meta, onUpdate, cell: { ...props.meta?.cell, classNames: [textPadding, classNames] } },
@@ -467,6 +481,8 @@ export class ColumnBuilder<TData extends RowData> {
     const IconOff = off?.Icon ?? X;
     return {
       size: size ?? 32,
+      // TODO(Zan): Implement sort algorithm
+      enableSorting: false,
       header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
       cell: (cell) => {
         const value = cell.getValue();

package/src/theme.ts

@@ -23,7 +23,8 @@ export const flushPadding = 'pli-0 plb-0';
 export const textPadding = 'pli-2 plb-0.5';
 export const headPadding = 'pli-2 plb-1.5';
 
-export const gridCellFocusRing = 'focus:z-[11] focus:outline outline-2 outline-primary-500 dark:outline-primary-400';
+export const gridCellFocusRing =
+  'focus-within:z-[11] focus-within:outline outline-2 outline-primary-500 dark:outline-primary-400';
 
 //
 // table
@@ -89,6 +90,7 @@ export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent },
 
 export const tdRoot: ComponentFunction<TbodyStyleProps> = ({ border, isGrid }, ...etc) =>
   mx('relative', flushPadding, border && 'border', border && groupBorder, isGrid && gridCellFocusRing, ...etc);
+
 export const tdContent: ComponentFunction<CellContext<any, any>> = (_props, ...etc) => mx(...etc);
 
 //