@dxos/react-ui-table 0.3.8-next.f4e0086 → 0.3.9-main.03b62b6

package/src/components/ColumnMenu.tsx

@@ -6,11 +6,12 @@ import { Check, CaretDown, Trash, X } from '@phosphor-icons/react';
 import { type HeaderContext, type RowData } from '@tanstack/react-table';
 import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
 
-import { Button, DensityProvider, Input, Popover, Select, Separator } from '@dxos/react-ui';
+import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { safeParseInt } from '@dxos/util';
 
-import { type TableDef, type ColumnProps, columnTypes } from '../schema';
+import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
+import { translationKey } from '../translations';
 
 export type ColumnMenuProps<TData extends RowData, TValue> = {
   context: HeaderContext<TData, TValue>;
@@ -23,13 +24,11 @@ export type ColumnMenuProps<TData extends RowData, TValue> = {
 
 export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
   const title = column.label?.length ? column.label : column.id;
-
   return (
-    <div className='flex grow items-center overflow-hidden'>
-      <div className='truncate' title={title}>
+    <div className='flex items-center gap-2'>
+      <div className='flex-1 min-is-0 truncate' title={title}>
         {title}
       </div>
-      <div className='grow' />
       <div className='flex shrink-0'>
         <ColumnPanel {...props} column={column} />
       </div>
@@ -59,6 +58,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
   const [label, setLabel] = useState(column.label);
   const [digits, setDigits] = useState(String(column.digits ?? '0'));
   const propRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
 
   const handleCancel = () => {
     setProp(column.id);
@@ -99,7 +99,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
   return (
     <Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
       <Popover.Trigger asChild>
-        <Button variant='ghost' classNames='p-0'>
+        <Button variant='ghost' classNames='p-1'>
           <CaretDown className={getSize(4)} />
         </Button>
       </Popover.Trigger>
@@ -110,7 +110,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
               <div className='flex flex-col gap-1'>
                 <Section>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1'>Label</Input.Label>
+                    <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
                     <Input.TextInput
                       placeholder='Column label'
                       value={label ?? ''}
@@ -119,7 +119,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                     />
                   </Input.Root>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>Property</Input.Label>
+                    <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
                     <Input.TextInput
                       ref={propRef}
                       placeholder='Property key'
@@ -129,15 +129,15 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                     />
                   </Input.Root>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>Type</Input.Label>
+                    <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
                     <Select.Root value={type} onValueChange={setType}>
                       <Select.TriggerButton placeholder='Type' classNames='is-full' />
                       <Select.Portal>
                         <Select.Content>
                           <Select.Viewport>
-                            {Array.from(columnTypes.entries()).map(([type, label]) => (
+                            {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
                               <Select.Option key={type} value={type}>
-                                {label}
+                                {t(`${type} column type label`)}
                               </Select.Option>
                             ))}
                           </Select.Viewport>
@@ -151,7 +151,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                   <>
                     <Section>
                       <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>Decimal places</Input.Label>
+                        <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
                         {/* TODO(burdon): Constrain input to numbers. */}
                         <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
                       </Input.Root>
@@ -213,17 +213,17 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                 <Section className='space-b-1.5'>
                   {/* TODO(burdon): Style as DropdownMenuItem. */}
                   <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
-                    <span>Save</span>
+                    <span>{t('save label')}</span>
                     <div className='grow' />
                     <Check className={getSize(5)} />
                   </Button>
                   <Button classNames='is-full flex gap-2' onClick={handleCancel}>
-                    <span>Cancel</span>
+                    <span>{t('cancel label', { ns: 'os' })}</span>
                     <div className='grow' />
                     <X className={getSize(5)} />
                   </Button>
                   <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
-                    <span>Delete</span>
+                    <span>{t('delete label')}</span>
                     <div className='grow' />
                     <Trash className={getSize(5)} />
                   </Button>

package/src/components/{Table.stories.tsx → Table/Table.stories.tsx}

@@ -10,12 +10,12 @@ import { deepSignal } from 'deepsignal';
 import React, { useEffect, useState } from 'react';
 
 import { PublicKey } from '@dxos/keys';
-import { DensityProvider } from '@dxos/react-ui';
+import { DensityProvider, AnchoredOverflow } from '@dxos/react-ui';
 import { range } from '@dxos/util';
 
 import { Table } from './Table';
-import { createColumnBuilder, type SelectQueryModel, type ValueUpdater } from '../helpers';
-import { type TableColumnDef } from '../types';
+import { createColumnBuilder, type SearchListQueryModel, type ValueUpdater } from '../../helpers';
+import { type TableColumnDef } from '../../types';
 
 // TODO(burdon): Header menu builder.
 // TODO(burdon): Expand width if not all columns have explicit size.
@@ -29,7 +29,6 @@ type Item = {
   complete?: boolean;
 };
 
-// TODO(thure): …y’all okay?
 faker.seed(911);
 
 const createItems = (count: number) =>
@@ -59,7 +58,7 @@ const tableStorySelectItems: Record<string, Item> = range(128).reduce((acc: Reco
 
 const timeout = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-const tableStorySelectModel: SelectQueryModel<Item> = {
+const tableStorySelectModel: SearchListQueryModel<Item> = {
   getId: (object) => object?.publicKey?.toHex() ?? 'never',
   getText: (object) => object?.name ?? 'never',
   query: async (search: string) => {
@@ -71,36 +70,44 @@ const tableStorySelectModel: SelectQueryModel<Item> = {
 };
 
 const { helper, builder } = createColumnBuilder<Item>();
+
 const columns = (onUpdate?: ValueUpdater<Item, any>): TableColumnDef<Item, any>[] => [
+  helper.display(builder.selectRow()),
+  helper.accessor((item) => item.publicKey, { id: 'key', ...builder.key({ tooltip: true }) }),
   helper.accessor(
-    'complete',
-    builder.checkbox({
-      // enableGrouping: true,
-      getGroupingValue: (row) => row.complete === true,
-      label: '',
+    'name',
+    builder.string({
+      label: 'Name',
       onUpdate,
+      meta: { expand: true },
+      footer: (props) => props.table.getRowModel().rows.length,
     }),
   ),
-  helper.accessor((item) => item.publicKey, { id: 'key', ...builder.key({ tooltip: true }) }),
+  helper.accessor('started', builder.date({ label: 'Started', relative: true, meta: { resizable: true } })),
   helper.accessor(
-    'name',
-    builder.string({ onUpdate, meta: { expand: true }, footer: (props) => props.table.getRowModel().rows.length }),
+    'count',
+    builder.number({
+      label: 'Count',
+      meta: { resizable: true },
+      // TODO(burdon): Sorting.
+      getGroupingValue: (row) => (row.count ? (row.count < 2_000 ? 'A' : row.count < 5_000 ? 'B' : 'C') : 'D'),
+    }),
   ),
   helper.accessor(
     'company',
-    builder.select({
+    builder.combobox({
       label: 'Company',
       model: tableStorySelectModel,
       onUpdate,
     }),
   ),
-  helper.accessor('started', builder.date({ relative: true, meta: { resizable: true } })),
   helper.accessor(
-    'count',
-    builder.number({
-      meta: { resizable: true },
-      // TODO(burdon): Sorting.
-      getGroupingValue: (row) => (row.count ? (row.count < 2_000 ? 'A' : row.count < 5_000 ? 'B' : 'C') : 'D'),
+    'complete',
+    builder.switch({
+      // enableGrouping: true,
+      getGroupingValue: (row) => row.complete === true,
+      label: '',
+      onUpdate,
     }),
   ),
   helper.accessor('complete', builder.icon({ id: 'done', label: '' })),
@@ -138,9 +145,6 @@ export default {
     fullWidth: {
       control: 'boolean',
     },
-    pinToBottom: {
-      control: 'boolean',
-    },
     grouping: {
       control: 'select',
       options: ['none', 'complete', 'count'],
@@ -158,9 +162,9 @@ export default {
         limited: { key: false, started: false },
       },
     },
-    select: {
+    rowsSelectable: {
       control: 'select',
-      options: ['single', 'single-toggle', 'multiple', 'multiple-toggle'],
+      options: [false, true, 'multi'],
     },
   },
   decorators: [
@@ -209,25 +213,23 @@ export const Dynamic = {
           if (items.length >= 200) {
             clearInterval(interval);
           }
-
           return [...items, ...createItems(1)];
         });
       }, 500);
       return () => clearInterval(interval);
     }, []);
-
     return (
-      <div className='flex grow overflow-hidden'>
-        {/* prettier-ignore */}
+      <AnchoredOverflow.Root classNames='max-bs-[80dvh]'>
         <Table<Item>
-          keyAccessor={row => row.publicKey.toHex()}
+          rowsSelectable='multi'
+          keyAccessor={(row) => row.publicKey.toHex()}
           columns={columns()}
           data={items}
           fullWidth
-          pinToBottom
           footer
         />
-      </div>
+        <AnchoredOverflow.Anchor />
+      </AnchoredOverflow.Root>
     );
   },
 };
@@ -240,15 +242,15 @@ export const Editable = {
     };
 
     return (
-      <div className='flex grow overflow-hidden'>
-        {/* prettier-ignore */}
-        <Table<Item>
-          keyAccessor={row => row.publicKey.toHex()}
-          columns={columns(onUpdate)}
-          data={items}
-          fullWidth
-        />
-      </div>
+      <Table<Item>
+        role='grid'
+        rowsSelectable='multi'
+        keyAccessor={(row) => row.publicKey.toHex()}
+        columns={columns(onUpdate)}
+        data={items}
+        fullWidth
+        border
+      />
     );
   },
 };
@@ -265,16 +267,14 @@ export const Resizable = {
     // };
 
     return (
-      <div className='flex grow overflow-hidden'>
-        {/* prettier-ignore */}
-        <Table<Item>
-          keyAccessor={row => row.publicKey.toHex()}
-          columns={columns(onUpdate)}
-          data={items}
-          fullWidth
-          // onColumnResize={handleColumnResize}
-        />
-      </div>
+      <Table<Item>
+        rowsSelectable='multi'
+        keyAccessor={(row) => row.publicKey.toHex()}
+        columns={columns(onUpdate)}
+        data={items}
+        fullWidth
+        // onColumnResize={handleColumnResize}
+      />
     );
   },
 };

package/src/components/Table/Table.tsx

@@ -0,0 +1,184 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import {
+  getCoreRowModel,
+  getGroupedRowModel,
+  useReactTable,
+  type ColumnSizingInfoState,
+  type ColumnSizingState,
+  type GroupingState,
+  type RowData,
+  type RowSelectionState,
+  type OnChangeFn,
+} from '@tanstack/react-table';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+
+import { debounce } from '@dxos/async';
+
+import { TableBody } from './TableBody';
+import { TableProvider as UntypedTableProvider, type TypedTableProvider } from './TableContext';
+import { TableFooter } from './TableFooter';
+import { TableHead } from './TableHead';
+import { type TableProps } from './props';
+import { groupTh, tableRoot } from '../../theme';
+
+export const Table = <TData extends RowData>(props: TableProps<TData>) => {
+  const {
+    role,
+    data = [],
+    columns = [],
+    onColumnResize,
+    columnVisibility,
+    header = true,
+    footer,
+    rowsSelectable,
+    fullWidth,
+    debug,
+    onDataSelectionChange,
+    classNames,
+  } = props;
+
+  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
+
+  // Row selection
+  const [rowSelection = {}, directlySetRowSelection] = 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 (rowsSelectable === 'multi') {
+        directlySetRowSelection(nextRowSelection);
+      } else if (rowsSelectable) {
+        const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
+        directlySetRowSelection(nextRowSelectionKey ? { [nextRowSelectionKey]: true } : {});
+      } else {
+        directlySetRowSelection({});
+      }
+    },
+    [rowSelection, directlySetRowSelection],
+  );
+
+  // 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]);
+
+  const [grouping, setGrouping] = useState<GroupingState>(props.grouping ?? []);
+  useEffect(() => setGrouping(props.grouping ?? []), [props.grouping]);
+
+  const table = useReactTable({
+    // Data
+    meta: {},
+    data,
+
+    // Columns
+    columns,
+    defaultColumn: {
+      size: 256, // Required in order remove default width.
+      maxSize: 1024,
+    },
+
+    // Rows
+    getCoreRowModel: getCoreRowModel(),
+
+    // State
+    state: {
+      columnVisibility,
+      columnSizingInfo,
+      rowSelection,
+      grouping,
+    },
+
+    // Grouping
+    getGroupedRowModel: getGroupedRowModel(),
+    onGroupingChange: setGrouping,
+
+    // Selection
+    ...(rowsSelectable === 'multi'
+      ? { enableMultiRowSelection: true }
+      : rowsSelectable
+      ? { enableRowSelection: true }
+      : {}),
+    onRowSelectionChange: handleRowSelectionChange,
+
+    // Resize columns
+    columnResizeMode: 'onChange',
+    enableColumnResizing: true,
+    onColumnSizingInfoChange: setColumnSizingInfo,
+
+    // Debug
+    debugTable: debug,
+  });
+
+  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}
+      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 && <TableBody rows={table.getRowModel().rows} />}
+
+        {grouping.length !== 0 &&
+          table.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={table.getHeaderGroups()[0].headers.length}
+                      className={groupTh(props)}
+                    >
+                      {table.getState().grouping[0]}[{String(row.getGroupingValue(table.getState().grouping[0]))}]
+                    </th>
+                  </tr>
+                </thead>
+
+                <TableBody rows={row.subRows} />
+              </Fragment>
+            );
+          })}
+
+        {footer && <TableFooter />}
+      </table>
+
+      {debug && (
+        <pre className='font-mono text-xs text-neutral-500 my-4 p-2 ring'>
+          <code>{JSON.stringify(table.getState(), undefined, 2)}</code>
+        </pre>
+      )}
+    </TableProvider>
+  );
+};

package/src/components/Table/TableBody.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { flexRender, type Row, type RowData } from '@tanstack/react-table';
+import React from 'react';
+
+import { useTableContext } from './TableContext';
+import { tbodyTr } from '../../theme';
+import { Cell } from '../Cell/Cell';
+
+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 rowSelection = table.getState().rowSelection;
+  const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
+  const canBeCurrent = !isGrid && !!onDatumClick;
+  return (
+    <tbody {...(isGrid && domAttributes)}>
+      {rows.map((row) => {
+        const isCurrent = currentDatum === row.original;
+        const isSelected = rowSelection?.[row.id];
+        return (
+          <tr
+            key={keyAccessor ? keyAccessor(row.original) : row.id}
+            className={tbodyTr({ canBeCurrent })}
+            {...(isCurrent && { 'aria-current': 'location' })}
+            {...(isSelected && { 'aria-selected': 'true' })}
+            {...(canBeCurrent && {
+              tabIndex: 0,
+              onClick: () => {
+                onDatumClick(row.original);
+              },
+              onKeyUp: ({ key }) => {
+                if (key === 'Enter' || key === ' ') {
+                  onDatumClick(row.original);
+                }
+              },
+            })}
+          >
+            {debug && <td>{row.id}</td>}
+
+            {row.getVisibleCells().map((cell) => {
+              return (
+                <Cell key={cell.id} cell={cell}>
+                  {flexRender(cell.column.columnDef.cell, { className: 'pli-2', ...cell.getContext() })}
+                </Cell>
+              );
+            })}
+
+            {expand && <td />}
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+};
+
+TableBody.displayName = TABLE_BODY_NAME;
+
+export { TableBody };
+
+export type { TableBodyProps };

package/src/components/Table/TableContext.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { type RowData } from '@tanstack/react-table';
+import { type ReactNode } from 'react';
+
+import { type TableContextValue } from './props';
+
+export const TABLE_NAME = 'Table';
+
+type CreateContextResult<TData extends RowData> = Readonly<
+  [TypedTableProvider<unknown>, (consumerName: string) => TableContextValue<TData>]
+>;
+
+export type TypedTableProvider<TData extends RowData> = {
+  (props: TableContextValue<TData> & { children: ReactNode }): JSX.Element;
+  displayName: string;
+};
+
+const [TableProvider, useUntypedTableContext]: CreateContextResult<unknown> =
+  createContext<TableContextValue<unknown>>(TABLE_NAME);
+
+export const useTableContext = <TData extends RowData>(consumerName: string) =>
+  useUntypedTableContext(consumerName) as TableContextValue<TData>;
+
+export { TableProvider };

package/src/components/Table/TableFooter.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { flexRender, type RowData } from '@tanstack/react-table';
+import React from 'react';
+
+import { useTableContext } from './TableContext';
+import { tfootRoot, tfootTr, tfootTh } from '../../theme';
+
+export type TableFooterProps = {};
+
+const TABLE_FOOTER_NAME = 'TableFooter';
+
+const TableFooter = <TData extends RowData>(props: TableFooterProps) => {
+  const tableContext = useTableContext<TData>(TABLE_FOOTER_NAME);
+  const { table, expand, debug } = tableContext;
+  const footers = table.getFooterGroups();
+  return (
+    <tfoot className={tfootRoot(props)}>
+      {footers.map((footerGroup) => (
+        <tr key={footerGroup.id} className={tfootTr(tableContext)}>
+          {debug && <th />}
+
+          {footerGroup.headers.map((footer) => {
+            return (
+              <th key={footer.id} className={tfootTh(tableContext, footer.column.columnDef.meta?.footer?.classNames)}>
+                {footer.isPlaceholder ? null : flexRender(footer.column.columnDef.footer, footer.getContext())}
+              </th>
+            );
+          })}
+
+          {expand && <th />}
+        </tr>
+      ))}
+    </tfoot>
+  );
+};
+
+TableFooter.displayName = TABLE_FOOTER_NAME;
+
+export { TableFooter };