@dxos/react-ui-table 0.4.3-main.f97384b → 0.4.3

package/dist/types/src/components/Table/TableFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableFooter.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAIlC,QAAA,MAAM,WAAW;mCAAkC,gBAAgB;;CAuBlE,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableFooter.tsx"],"names":[],"mappings":"AAUA,KAAK,gBAAgB,GAAG,EAAE,CAAC;AAI3B,QAAA,MAAM,WAAW;mCAAkC,gBAAgB;;CAwBlE,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/types/src/components/Table/TableHead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAcA,KAAK,cAAc,GAAG,EAAE,CAAC;AAEzB,QAAA,MAAM,SAAS;oCAAmC,cAAc;;CAwD/D,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAcA,KAAK,cAAc,GAAG,EAAE,CAAC;AAEzB,QAAA,MAAM,SAAS;oCAAmC,cAAc;;CA0D/D,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.4.3-main.f97384b",
+  "version": "0.4.3",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -22,14 +22,14 @@
     "@tanstack/react-table": "^8.9.3",
     "@tanstack/react-virtual": "^3.0.1",
     "date-fns": "^3.3.1",
-    "@dxos/async": "0.4.3-main.f97384b",
-    "@dxos/keys": "0.4.3-main.f97384b",
-    "@dxos/invariant": "0.4.3-main.f97384b",
-    "@dxos/react-ui": "0.4.3-main.f97384b",
-    "@dxos/react-ui-theme": "0.4.3-main.f97384b",
-    "@dxos/react-ui-searchlist": "0.4.3-main.f97384b",
-    "@dxos/react-ui-types": "0.4.3-main.f97384b",
-    "@dxos/util": "0.4.3-main.f97384b"
+    "@dxos/async": "0.4.3",
+    "@dxos/keys": "0.4.3",
+    "@dxos/invariant": "0.4.3",
+    "@dxos/util": "0.4.3",
+    "@dxos/react-ui-searchlist": "0.4.3",
+    "@dxos/react-ui": "0.4.3",
+    "@dxos/react-ui-types": "0.4.3",
+    "@dxos/react-ui-theme": "0.4.3"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -40,9 +40,9 @@
     "react-dom": "^18.2.0",
     "vite": "^5.0.12",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/random": "0.4.3-main.f97384b",
-    "@dxos/storybook-utils": "0.4.3-main.f97384b",
-    "@dxos/react-ui-theme": "0.4.3-main.f97384b"
+    "@dxos/react-ui-theme": "0.4.3",
+    "@dxos/random": "0.4.3",
+    "@dxos/storybook-utils": "0.4.3"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/Table/Table.tsx

@@ -5,14 +5,14 @@
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import {
   getCoreRowModel,
-  getGroupedRowModel,
   useReactTable,
   type ColumnSizingInfoState,
-  type ColumnSizingState,
   type GroupingState,
   type RowData,
-  type RowSelectionState,
+  type ColumnSizingState,
   type OnChangeFn,
+  type RowSelectionState,
+  getGroupedRowModel,
 } from '@tanstack/react-table';
 import { useVirtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
@@ -26,78 +26,6 @@ import { TableHead } from './TableHead';
 import { type TableProps } from './props';
 import { groupTh, tableRoot } from '../../theme';
 
-const VirtualizedTableContent = ({
-  getScrollElement,
-}: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
-  const {
-    table: { getRowModel },
-  } = useTableContext('VirtualizedTableContent');
-  const rows = getRowModel().rows;
-
-  const { getTotalSize, getVirtualItems } = useVirtualizer({
-    getScrollElement,
-    count: rows.length,
-    overscan: 16,
-    estimateSize: () => 33,
-  });
-  const virtualRows = getVirtualItems();
-  const totalSize = getTotalSize();
-
-  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
-  const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
-
-  return (
-    <>
-      {paddingTop > 0 && (
-        <tbody role='none'>
-          <tr role='none'>
-            <td style={{ height: `${paddingTop}px` }} role='none' />
-          </tr>
-        </tbody>
-      )}
-      <TableBody rows={virtualRows.map((virtualRow) => rows[virtualRow.index])} />
-      {paddingBottom > 0 && (
-        <tbody role='none'>
-          <tr role='none'>
-            <td style={{ height: `${paddingBottom}px` }} role='none' />
-          </tr>
-        </tbody>
-      )}
-    </>
-  );
-};
-
-const GroupedTableContent = () => {
-  const {
-    table: { getGroupedRowModel, getHeaderGroups, getState },
-    debug,
-  } = useTableContext('GroupedTableContent');
-  return (
-    <>
-      {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={getHeaderGroups()[0].headers.length}
-                  className={groupTh({})}
-                >
-                  {getState().grouping[0]}[{String(row.getGroupingValue(getState().grouping[0]))}]
-                </th>
-              </tr>
-            </thead>
-            <TableBody rows={row.subRows} />
-          </Fragment>
-        );
-      })}
-    </>
-  );
-};
-
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   const {
     role,
@@ -106,51 +34,74 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
     onColumnResize,
     columnVisibility,
     header = true,
-    footer,
     rowsSelectable,
-    fullWidth,
     debug,
     onDataSelectionChange,
-    classNames,
-    getScrollElement,
   } = props;
 
   const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
 
+  //
+  // Column resizing
+  //
+
+  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+  useEffect(() => {
+    // Set initial state.
+    setColumnSizing(
+      columns
+        .filter((column) => !!column.size && (column as any).prop !== undefined)
+        .reduce<ColumnSizingState>((state, column) => {
+          state[(column as any).prop] = column.size!;
+          return state;
+        }, {}),
+    );
+  }, [columns]);
+
+  const [columnSizingInfo, setColumnSizingInfo] = useState<ColumnSizingInfoState>({} as ColumnSizingInfoState);
+  const onColumnResizeDebounced = onColumnResize && debounce<ColumnSizingState>(onColumnResize, 1_000);
+  useEffect(() => {
+    if (columnSizingInfo.columnSizingStart?.length === 0) {
+      onColumnResizeDebounced?.(table.getState().columnSizing);
+    }
+  }, [columnSizingInfo]);
+
+  //
   // Row selection
-  const [rowSelection = {}, directlySetRowSelection] = useControllableState({
+  //
+
+  const [rowSelection = {}, setRowSelection] = useControllableState({
     prop: props.rowSelection,
     onChange: props.onRowSelectionChange,
     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) => {
       const nextRowSelection = typeof updaterOrValue === 'function' ? updaterOrValue(rowSelection) : updaterOrValue;
       if (rowsSelectable === 'multi') {
-        directlySetRowSelection(nextRowSelection);
+        setRowSelection(nextRowSelection);
       } else if (rowsSelectable) {
         const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-        directlySetRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
+        setRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
       } else {
-        directlySetRowSelection({});
+        setRowSelection({});
       }
     },
-    [rowSelection, directlySetRowSelection],
+    [rowSelection, setRowSelection],
   );
 
-  // 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]);
+  //
+  // Row grouping
+  //
 
-  const [grouping, setGrouping] = useState<GroupingState>(props.grouping ?? []);
-  useEffect(() => setGrouping(props.grouping ?? []), [props.grouping]);
+  const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
+  useEffect(() => handleGroupingChange(props.grouping ?? []), [props.grouping]);
 
   const table = useReactTable({
     // Data
@@ -164,20 +115,27 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
       maxSize: 1024,
     },
 
-    // Rows
-    getCoreRowModel: getCoreRowModel(),
-
     // State
     state: {
       columnVisibility,
+      columnSizing,
       columnSizingInfo,
       rowSelection,
       grouping,
     },
 
+    // Resize columns
+    columnResizeMode: 'onChange',
+    enableColumnResizing: true,
+    onColumnSizingChange: setColumnSizing,
+    onColumnSizingInfoChange: setColumnSizingInfo,
+
+    // Rows
+    getCoreRowModel: getCoreRowModel(),
+
     // Grouping
-    getGroupedRowModel: getGroupedRowModel(),
-    onGroupingChange: setGrouping,
+    getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : undefined,
+    onGroupingChange: handleGroupingChange,
 
     // Selection
     ...(rowsSelectable === 'multi'
@@ -187,59 +145,133 @@ export const Table = <TData extends RowData>(props: TableProps<TData>) => {
         : {}),
     onRowSelectionChange: handleRowSelectionChange,
 
-    // Resize columns
-    columnResizeMode: 'onChange',
-    enableColumnResizing: true,
-    onColumnSizingInfoChange: setColumnSizingInfo,
-
     // Debug
     debugTable: debug,
   });
 
-  const rows = table.getRowModel().rows;
-
-  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}
+      table={table}
       header={header}
       expand={expand}
-      table={table}
       isGrid={role === 'grid' || role === 'treegrid'}
     >
-      <table
-        role={role}
-        className={tableRoot(props, classNames)}
-        {...(!fullWidth && { style: { width: table.getTotalSize() } })}
-      >
-        <TableHead />
-
-        {grouping.length === 0 ? (
-          getScrollElement ? (
-            <VirtualizedTableContent getScrollElement={getScrollElement} />
-          ) : (
-            <TableBody rows={rows} />
-          )
+      <TableImpl<TData> debug={false} />
+    </TableProvider>
+  );
+};
+
+/**
+ * Pure implementation of table outside of context set-up.
+ */
+const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
+  const { role, footer, grouping, getScrollElement, fullWidth, classNames, debug } = props;
+  const { table } = useTableContext<TData>('TableImpl');
+  const { rows } = table.getRowModel();
+
+  if (debug) {
+    return (
+      <pre className='font-mono text-xs text-neutral-500 m-1 p-2 ring'>
+        <code>{JSON.stringify(table.getState(), undefined, 2)}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <table
+      role={role}
+      className={tableRoot(props, classNames)}
+      {...(!fullWidth && { style: { width: table.getTotalSize() } })}
+    >
+      <TableHead />
+
+      {grouping?.length !== 0 ? (
+        getScrollElement ? (
+          <VirtualizedTableContent getScrollElement={getScrollElement} />
         ) : (
-          <GroupedTableContent />
-        )}
+          <TableBody rows={rows} />
+        )
+      ) : (
+        <GroupedTableContent />
+      )}
 
-        {footer && <TableFooter />}
-      </table>
+      {footer && <TableFooter />}
+    </table>
+  );
+};
+
+const VirtualizedTableContent = ({
+  getScrollElement,
+}: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
+  const {
+    table: { getRowModel },
+  } = useTableContext('VirtualizedTableContent');
+  const rows = getRowModel().rows;
+
+  const { getTotalSize, getVirtualItems } = useVirtualizer({
+    getScrollElement,
+    count: rows.length,
+    overscan: 16,
+    estimateSize: () => 33,
+  });
+  const virtualRows = getVirtualItems();
+  const totalSize = getTotalSize();
+
+  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
 
-      {debug && (
-        <pre className='font-mono text-xs text-neutral-500 my-4 p-2 ring'>
-          <code>{JSON.stringify(table.getState(), undefined, 2)}</code>
-        </pre>
+  return (
+    <>
+      {paddingTop > 0 && (
+        <tbody role='none'>
+          <tr role='none'>
+            <td style={{ height: `${paddingTop}px` }} role='none' />
+          </tr>
+        </tbody>
       )}
-    </TableProvider>
+      <TableBody rows={virtualRows.map((virtualRow) => rows[virtualRow.index])} />
+      {paddingBottom > 0 && (
+        <tbody role='none'>
+          <tr role='none'>
+            <td style={{ height: `${paddingBottom}px` }} role='none' />
+          </tr>
+        </tbody>
+      )}
+    </>
+  );
+};
+
+const GroupedTableContent = () => {
+  const {
+    table: { getGroupedRowModel, getHeaderGroups, getState },
+    debug,
+  } = useTableContext('GroupedTableContent');
+  return (
+    <>
+      {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={getHeaderGroups()[0].headers.length}
+                  className={groupTh({})}
+                >
+                  {getState().grouping[0]}[{String(row.getGroupingValue(getState().grouping[0]))}]
+                </th>
+              </tr>
+            </thead>
+            <TableBody rows={row.subRows} />
+          </Fragment>
+        );
+      })}
+    </>
   );
 };

package/src/components/Table/TableBody.tsx

@@ -10,18 +10,19 @@ import { useTableContext } from './TableContext';
 import { tbodyTr } from '../../theme';
 import { Cell } from '../Cell/Cell';
 
+const TABLE_BODY_NAME = 'TableBody';
+
 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 { 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;
+
   return (
     <tbody {...(isGrid && domAttributes)}>
       {rows.map((row) => {

package/src/components/Table/TableFooter.tsx

@@ -8,14 +8,15 @@ import React from 'react';
 import { useTableContext } from './TableContext';
 import { tfootRoot, tfootTr, tfootTh } from '../../theme';
 
-export type TableFooterProps = {};
+type TableFooterProps = {};
 
-const TABLE_FOOTER_NAME = 'TableFooter';
+const TABLE_FOOT_NAME = 'TableFooter';
 
 const TableFooter = <TData extends RowData>(props: TableFooterProps) => {
-  const tableContext = useTableContext<TData>(TABLE_FOOTER_NAME);
+  const tableContext = useTableContext<TData>(TABLE_FOOT_NAME);
   const { table, expand, debug } = tableContext;
   const footers = table.getFooterGroups();
+
   return (
     <tfoot className={tfootRoot(props)}>
       {footers.map((footerGroup) => (
@@ -37,6 +38,8 @@ const TableFooter = <TData extends RowData>(props: TableFooterProps) => {
   );
 };
 
-TableFooter.displayName = TABLE_FOOTER_NAME;
+TableFooter.displayName = TABLE_FOOT_NAME;
 
 export { TableFooter };
+
+export type { TableFooterProps };

package/src/components/Table/TableHead.tsx

@@ -10,7 +10,7 @@ import { mx } from '@dxos/react-ui-theme';
 import { useTableContext } from './TableContext';
 import { theadResizeRoot, theadResizeThumb, theadRoot, theadTh, theadTr } from '../../theme';
 
-const TABLE_HEAD_NAME = 'TableHead';
+const TABLE_HEAD_NAME = 'TableHeader';
 
 type TableHeadProps = {};
 
@@ -18,6 +18,7 @@ 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) => {
@@ -64,6 +65,7 @@ const TableHead = <TData extends RowData>(_props: TableHeadProps) => {
                 </th>
               );
             })}
+
             {tableContext.expand && <th />}
           </tr>
         );