@dxos/react-ui-table 0.4.9 → 0.4.10-main.068c3d8

package/src/components/ColumnMenu/ColumnMenu.tsx

@@ -0,0 +1,166 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { X, GearSix, CaretDown, ArrowDown, ArrowUp } from '@phosphor-icons/react';
+import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/react-table';
+import React, { useRef, useState, useCallback } from 'react';
+
+import { Button, DensityProvider, Popover, DropdownMenu } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { ColumnSettingsForm } from './ColumnSettingsForm';
+import { useColumnSorting } from '../../hooks';
+import { type TableDef, type ColumnProps } from '../../schema';
+
+export type ColumnMenuProps<TData extends RowData, TValue> = {
+  context: HeaderContext<TData, TValue>;
+  tableDefs: TableDef[];
+  tableDef: TableDef;
+  column: ColumnProps;
+  onUpdate?: (id: string, column: ColumnProps) => void;
+  onDelete?: (id: string) => void;
+};
+
+export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
+  const title = column.label?.length ? column.label : column.id;
+  const header = props.context.header;
+
+  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(header.column);
+
+  const columnSettingsAnchorRef = useRef<any>(null);
+
+  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState(false);
+
+  const shouldPreventFocusOnClose = useRef(false);
+
+  const onOpenColumnSettings = useCallback(() => {
+    shouldPreventFocusOnClose.current = true;
+    setIsColumnSettingsOpen(true);
+  }, [shouldPreventFocusOnClose, setIsColumnSettingsOpen]); // setIsColumnSettingsOpen is a dependency
+
+  const onDropdownCloseAutoFocus = useCallback(
+    (event: Event) => {
+      if (shouldPreventFocusOnClose.current) {
+        event.preventDefault();
+        shouldPreventFocusOnClose.current = false;
+      }
+    },
+    [shouldPreventFocusOnClose],
+  );
+
+  return (
+    <div className='flex items-center justify-center justify-between'>
+      <div className='flex items-center gap-1 truncate' title={title}>
+        <SortIndicator direction={sortDirection} onClick={onToggleSort} />
+        <div className='truncate'>{title}</div>
+      </div>
+
+      <DropdownMenu.Root modal={false}>
+        <Popover.Root open={isColumnSettingsOpen} onOpenChange={setIsColumnSettingsOpen} modal={false}>
+          <DropdownMenu.Trigger ref={columnSettingsAnchorRef} asChild>
+            <Popover.Anchor asChild>
+              <Button variant='ghost'>
+                <CaretDown className={getSize(4)} />
+              </Button>
+            </Popover.Anchor>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content onCloseAutoFocus={onDropdownCloseAutoFocus} sideOffset={4} collisionPadding={8}>
+            <DropdownMenu.Viewport>
+              {canSort && (
+                <>
+                  <DropdownMenu.Item onClick={() => onSelectSort('asc')}>
+                    <span className='grow'>Sort ascending</span>
+                    <span className='opacity-50'>
+                      <ArrowUp className={getSize(4)} />
+                    </span>
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item onClick={() => onSelectSort('desc')}>
+                    <span className='grow'>Sort descending</span>
+                    <span className='opacity-50'>
+                      <ArrowDown className={getSize(4)} />
+                    </span>
+                  </DropdownMenu.Item>
+                  {sortDirection !== false && (
+                    <DropdownMenu.Item onClick={onClearSort}>
+                      <span className='grow'>Clear sort</span>
+                      <span className='opacity-50'>
+                        <X className={getSize(4)} />
+                      </span>
+                    </DropdownMenu.Item>
+                  )}
+                </>
+              )}
+              <DropdownMenu.Item onClick={onOpenColumnSettings}>
+                <span className='grow'>Column settings</span>
+                <span className='opacity-50'>
+                  <GearSix className={mx(getSize(4), 'rotate-90')} />
+                </span>
+              </DropdownMenu.Item>
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+
+          <ColumnSettingsPanel {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
+        </Popover.Root>
+      </DropdownMenu.Root>
+    </div>
+  );
+};
+
+export const ColumnSettingsPanel = <TData extends RowData, TValue>({
+  tableDefs,
+  tableDef,
+  column,
+  onUpdate,
+  onDelete,
+  onClose,
+}: ColumnMenuProps<TData, TValue> & { onClose: () => void }) => (
+  <Popover.Portal>
+    <Popover.Content>
+      <Popover.Viewport classNames='w-60'>
+        <DensityProvider density='fine'>
+          <ColumnSettingsForm
+            column={column}
+            tableDefs={tableDefs}
+            tableDef={tableDef}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+            onClose={onClose}
+          />
+        </DensityProvider>
+      </Popover.Viewport>
+      <Popover.Arrow />
+    </Popover.Content>
+  </Popover.Portal>
+);
+
+export const SortIndicator = ({
+  direction,
+  onClick,
+}: {
+  direction: SortDirection | false;
+  onClick: (e: any) => void;
+}) => {
+  if (direction === false) {
+    return null;
+  }
+
+  let icon;
+
+  switch (direction) {
+    case 'asc':
+      icon = <ArrowUp className={getSize(3)} />;
+      break;
+    case 'desc':
+      icon = <ArrowDown className={getSize(3)} />;
+      break;
+  }
+
+  return (
+    <div onClick={onClick} className='flex items-center cursor-pointer'>
+      {icon}
+    </div>
+  );
+};

package/src/components/ColumnMenu/ColumnSettingsForm.tsx

@@ -0,0 +1,214 @@
+//
+// Copyright 2024 DXOS.org
+//
+import { Check, Trash, X } from '@phosphor-icons/react';
+import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+
+import { Button, Input, 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, type ColumnType } from '../../schema';
+import { translationKey } from '../../translations';
+
+const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
+  <div role='none' className={mx('p-2', className)}>
+    {children}
+  </div>
+);
+
+export type ColumnSettingsFormProps = {
+  column: ColumnProps;
+  tableDef: TableDef;
+  tableDefs: TableDef[];
+  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
+  onDelete?: ((id: string) => void) | undefined;
+  onClose?: () => void;
+};
+
+export const ColumnSettingsForm = ({
+  column,
+  tableDef,
+  tableDefs,
+  onUpdate,
+  onDelete,
+  onClose,
+}: ColumnSettingsFormProps) => {
+  const [formState, setFormState] = useState({
+    prop: column.id,
+    refTable: column.refTable,
+    refProp: column.refProp,
+    type: String(column.type),
+    label: column.label,
+    digits: String(column.digits ?? '0'),
+  });
+
+  const propRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
+
+  const handleCancel = () => {
+    onClose?.();
+  };
+
+  const handleSave = () => {
+    const { prop, refTable, refProp, type, label, digits } = formState;
+
+    // Check valid.
+    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
+      propRef.current?.focus();
+      return;
+    }
+
+    // If already exists then check same type.
+    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
+    if (current) {
+      // TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
+      if (current.type !== 'ref' /* || current.ref !== refTable */) {
+        // TODO(burdon): Show error.
+        propRef.current?.focus();
+        return;
+      }
+    }
+
+    onUpdate?.(column.id, {
+      id: prop, // TODO(burdon): Make unique.
+      prop,
+      label,
+      type: type as ColumnProps['type'],
+      refTable,
+      refProp,
+      digits: safeParseInt(digits),
+    });
+    onClose?.();
+  };
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <Section>
+        <Input.Root>
+          <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
+          <Input.TextInput
+            placeholder='Column label'
+            value={formState.label ?? ''}
+            onChange={(event) => setFormState((prevState) => ({ ...prevState, label: event.target.value }))}
+            autoFocus
+          />
+        </Input.Root>
+        <Input.Root>
+          <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
+          <Input.TextInput
+            ref={propRef}
+            placeholder='Property key'
+            value={formState.prop ?? ''}
+            onChange={(event) =>
+              setFormState((prevState) => ({ ...prevState, prop: event.target.value.replace(/[^\w_]/g, '') }))
+            }
+          />
+        </Input.Root>
+        <Input.Root>
+          <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
+          <Select.Root
+            value={formState.type}
+            onValueChange={(value) => setFormState((prevState) => ({ ...prevState, type: value }))}
+          >
+            <Select.TriggerButton placeholder='Type' classNames='is-full' />
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
+                    <Select.Option key={type} value={type}>
+                      {t(`${type} column type label`)}
+                    </Select.Option>
+                  ))}
+                </Select.Viewport>
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </Input.Root>
+      </Section>
+      {formState.type === 'number' && (
+        <Section>
+          <Input.Root>
+            <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
+            <Input.TextInput
+              value={formState.digits ?? ''}
+              onChange={(event) => setFormState((prevState) => ({ ...prevState, digits: event.target.value }))}
+            />
+          </Input.Root>
+        </Section>
+      )}
+
+      {formState.type === 'ref' && (
+        <Section>
+          <Input.Root>
+            <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
+            <Select.Root
+              value={formState.refTable}
+              onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refTable: value }))}
+            >
+              <Select.TriggerButton placeholder='Table' classNames='is-full' />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {tableDefs
+                      .filter((t) => t.id !== tableDef.id)
+                      .map(({ id, name }) => (
+                        <Select.Option key={id} value={id}>
+                          {name ?? id}
+                        </Select.Option>
+                      ))}
+                  </Select.Viewport>
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </Input.Root>
+
+          {formState.refTable && (
+            <Input.Root>
+              <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
+              <Select.Root
+                value={formState.refProp}
+                onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refProp: value }))}
+              >
+                <Select.TriggerButton placeholder='Property' classNames='is-full' />
+                <Select.Portal>
+                  <Select.Content>
+                    <Select.Viewport>
+                      {tableDefs
+                        .find((tableDef) => tableDef.id === formState.refTable)
+                        ?.columns.map(({ id, label }) => (
+                          <Select.Option key={id} value={id}>
+                            {label ?? id}
+                          </Select.Option>
+                        ))}
+                    </Select.Viewport>
+                  </Select.Content>
+                </Select.Portal>
+              </Select.Root>
+            </Input.Root>
+          )}
+        </Section>
+      )}
+
+      <Separator classNames='mli-2' />
+
+      <Section className='space-b-1.5'>
+        <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
+          <span>{t('save label')}</span>
+          <div className='grow' />
+          <Check className={getSize(5)} />
+        </Button>
+        <Button classNames='is-full flex gap-2' onClick={handleCancel}>
+          <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>{t('delete label')}</span>
+          <div className='grow' />
+          <Trash className={getSize(5)} />
+        </Button>
+      </Section>
+    </div>
+  );
+};

package/src/components/ColumnMenu/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './ColumnMenu';
+export * from './ColumnSettingsForm';

package/src/components/Table/Table.stories.tsx

@@ -7,10 +7,10 @@ import '@dxosTheme';
 import { Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import * as E from '@dxos/echo-schema/schema';
+import { create } from '@dxos/echo-schema/schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { AnchoredOverflow, DensityProvider } from '@dxos/react-ui';
+import { AnchoredOverflow, Button, DensityProvider } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 import { range } from '@dxos/util';
 
@@ -35,7 +35,7 @@ faker.seed(911);
 const createItems = (count: number) =>
   range(count).map(
     () =>
-      E.object<Item>({
+      create<Item>({
         publicKey: PublicKey.random(),
         name: faker.commerce.productName(),
         count: faker.datatype.boolean({ probability: 0.9 }) ? faker.number.int({ min: 0, max: 10_000 }) : undefined,
@@ -251,6 +251,92 @@ export const Editable = {
   },
 };
 
+export const PinnedLastRow = {
+  render: () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const [items, setItems] = useState<Item[]>(createItems(200));
+
+    const onUpdate: ValueUpdater<Item, any> = useCallback(
+      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
+      [setItems],
+    );
+
+    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
+
+    return (
+      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
+        <Table<Item>
+          role='grid'
+          rowsSelectable='multi'
+          keyAccessor={(row) => row.publicKey.toHex()}
+          columns={columns}
+          data={items}
+          fullWidth
+          stickyHeader
+          border
+          getScrollElement={() => containerRef.current}
+          pinLastRow
+        />
+      </div>
+    );
+  },
+};
+
+export const InsertDelete = {
+  render: () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const [items, setItems] = useState<Item[]>(createItems(10));
+
+    const onUpdate: ValueUpdater<Item, any> = useCallback(
+      (item, prop, value) => setItems((items) => updateItems(items, item.publicKey, prop, value)),
+      [setItems],
+    );
+
+    const columns = useMemo(() => makeColumns(onUpdate), [onUpdate]);
+
+    const onInsertFirst = () => {
+      setItems((items) => [...createItems(1), ...items]);
+    };
+
+    const onInsertLast = () => {
+      setItems((items) => [...items, ...createItems(1)]);
+    };
+
+    const onDeleteFirst = () => {
+      setItems(([_first, ...rest]) => rest);
+    };
+
+    const onDeleteLast = () => {
+      setItems((items) => [...items.slice(0, items.length - 1)]);
+    };
+
+    return (
+      <div>
+        <div className='flex flex-row gap-2'>
+          <Button onClick={onInsertFirst}>Insert first</Button>
+          <Button onClick={onInsertLast}>Insert last</Button>
+          <Button onClick={onDeleteFirst}>Delete first</Button>
+          <Button onClick={onDeleteLast}>Delete last</Button>
+        </div>
+        <div ref={containerRef} className='fixed inset-0 top-[72px] overflow-auto'>
+          <Table<Item>
+            role='grid'
+            rowsSelectable='multi'
+            keyAccessor={(row) => row.publicKey.toHex()}
+            columns={columns}
+            data={items}
+            fullWidth
+            stickyHeader
+            border
+            getScrollElement={() => containerRef.current}
+            pinLastRow
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
 export const Resizable = {
   render: () => {
     const containerRef = useRef<HTMLDivElement | null>(null);

package/src/components/Table/Table.tsx

@@ -14,6 +14,7 @@ import {
   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';
@@ -26,6 +27,7 @@ import { type TypedTableProvider, TableProvider as UntypedTableProvider, useTabl
 import { TableFooter } from './TableFooter';
 import { TableHead } from './TableHead';
 import { type TableProps } from './props';
+import { usePinLastRow } from '../../hooks';
 import { groupTh, tableRoot } from '../../theme';
 
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
@@ -149,17 +151,7 @@ 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, getScrollElement);
 
   // Create additional expansion column if all columns have fixed width.
   const expand = false; // columns.map((column) => column.size).filter(Boolean).length === columns?.length;
@@ -186,12 +178,7 @@ 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();
-
-  const centerRows = table.getCenterRows();
-  const bottomRows = table.getBottomRows();
-
-  const rows = [...centerRows, ...bottomRows];
+  const { table } = useTableContext<TData>();
 
   if (debug) {
     return (
@@ -220,7 +207,7 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
             <VirtualizedTableContent getScrollElement={getScrollElement} />
           )
         ) : (
-          <TableBody rows={rows} />
+          <UnvirtualizedTableContent />
         )
       ) : (
         <GroupedTableContent />
@@ -231,19 +218,36 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
   );
 };
 
+const UnvirtualizedTableContent = () => {
+  const { table } = useTableContext();
+
+  const centerRows = table.getCenterRows();
+  const pinnedRows = table.getBottomRows();
+
+  const rows = [...centerRows, ...pinnedRows];
+
+  return <TableBody rows={rows} />;
+};
+
 const VirtualizedTableContent = ({
   getScrollElement,
 }: Pick<VirtualizerOptions<Element, Element>, 'getScrollElement'>) => {
   const { table } = useTableContext();
 
   const centerRows = table.getCenterRows();
-  const pinnedRows = table.getBottomRows();
+  let pinnedRows = [] as Row<unknown>[];
 
-  const rows = [...centerRows, ...pinnedRows];
+  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 } = useVirtualizer({
     getScrollElement,
-    count: rows.length,
+    count: centerRows.length,
     overscan: 8,
     estimateSize: () => 40,
   });
@@ -254,6 +258,8 @@ 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];
+
   return (
     <>
       {paddingTop > 0 && (
@@ -263,7 +269,7 @@ const VirtualizedTableContent = ({
           </tr>
         </tbody>
       )}
-      <TableBody rows={virtualRows.map((virtualRow) => rows[virtualRow.index])} />
+      <TableBody rows={rowsToRender} />
       {paddingBottom > 0 && (
         <tbody role='none'>
           <tr role='none'>

package/src/components/Table/TableBody.tsx

@@ -28,10 +28,15 @@ const TableBody = ({ rows }: TableBodyProps) => {
       {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}
             {...(isCurrent && { 'aria-current': 'location' })}
             {...(isSelected && { 'aria-selected': 'true' })}
             {...(canBeCurrent && {

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

@@ -340,7 +340,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 +498,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,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useColumnSorting';
+export * from './usePinLastRow';