@dxos/react-ui-table 0.4.9 → 0.4.10-main.06ef97a

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,208 @@
+//
+// 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 [prop, setProp] = useState(column.id);
+  const [refTable, setRefTable] = useState(column.refTable);
+  const [refProp, setRefProp] = useState(column.refProp);
+  const [type, setType] = useState(String(column.type));
+  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);
+    onClose?.();
+  };
+
+  const handleSave = () => {
+    // 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?.(prop, {
+      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={label ?? ''}
+            onChange={(event) => setLabel(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'
+            // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
+            value={prop ?? ''}
+            onChange={(event) => setProp(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={type} onValueChange={setType}>
+            <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>
+
+      {type === 'number' && (
+        <>
+          <Section>
+            <Input.Root>
+              <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>
+          </Section>
+        </>
+      )}
+
+      {/* TODO(burdon): Selectors on same line. */}
+      {type === 'ref' && (
+        <>
+          <Section>
+            <Input.Root>
+              <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
+              <Select.Root value={refTable} onValueChange={setRefTable}>
+                <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>
+
+            {refTable && (
+              <Input.Root>
+                <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
+                <Select.Root value={refProp} onValueChange={setRefProp}>
+                  <Select.TriggerButton placeholder='Property' classNames='is-full' />
+                  <Select.Portal>
+                    <Select.Content>
+                      <Select.Viewport>
+                        {tableDefs
+                          .find((tableDef) => tableDef.id === 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'>
+        {/* TODO(burdon): Style as DropdownMenuItem. */}
+        <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

@@ -251,6 +251,37 @@ 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 Resizable = {
   render: () => {
     const containerRef = useRef<HTMLDivElement | null>(null);

package/src/components/Table/Table.tsx

@@ -26,6 +26,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 +150,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;
@@ -239,11 +230,9 @@ const VirtualizedTableContent = ({
   const centerRows = table.getCenterRows();
   const pinnedRows = table.getBottomRows();
 
-  const rows = [...centerRows, ...pinnedRows];
-
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
-    count: rows.length,
+    count: centerRows.length,
     overscan: 8,
     estimateSize: () => 40,
   });
@@ -254,6 +243,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 +254,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';

package/src/hooks/useColumnSorting.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type SortDirection, type Column } from '@tanstack/react-table';
+import { useState } from 'react';
+
+export const useColumnSorting = (column: Column<any>) => {
+  const [sortDirection, setSortDirection] = useState<SortDirection | false>(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState<SortDirection | undefined>();
+
+  const canSort = column.getCanSort();
+
+  const updateColumnSort = (direction: SortDirection | false) => {
+    setSortDirection(direction);
+
+    switch (direction) {
+      case false:
+        column.clearSorting();
+        break;
+      case 'asc':
+        column.toggleSorting(false); // descending false
+        break;
+      case 'desc':
+        column.toggleSorting(true); // descending true
+        break;
+    }
+  };
+
+  // Whichever sort is explicitly set first, will be the first sort direction
+  // When toggling, we always go to the other direction, and then to unsorted.
+  const onToggleSort = () => {
+    if (sortDirection === false) {
+      return;
+    }
+
+    if (sortDirection === firstSort) {
+      updateColumnSort(firstSort === 'asc' ? 'desc' : 'asc');
+    } else {
+      updateColumnSort(false);
+    }
+  };
+
+  const onSelectSort = (direction: SortDirection) => {
+    setFirstSort(direction);
+    updateColumnSort(direction);
+  };
+
+  const onClearSort = () => {
+    updateColumnSort(false);
+  };
+
+  return { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort };
+};

package/src/hooks/usePinLastRow.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Table } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
+
+export const usePinLastRow = (
+  pinLastRow: boolean | undefined,
+  table: Table<any>,
+  data: any,
+  getScrollElement?: () => Element | null,
+) => {
+  const [pinnedRowKey, setPinnedRowKey] = useState<string>();
+
+  useEffect(() => {
+    if (!pinLastRow) {
+      return;
+    }
+
+    const rows = table.getRowModel().rows;
+    const rowToPin = rows[rows.length - 1];
+    const rowId = rowToPin.id;
+
+    if (rowId === pinnedRowKey) {
+      return;
+    }
+
+    table.resetRowPinning();
+    rowToPin.pin('bottom');
+
+    const scrollElement = getScrollElement?.();
+    const isFirstRender = pinnedRowKey === undefined;
+
+    if (scrollElement && !isFirstRender) {
+      requestAnimationFrame(() => {
+        scrollElement.scrollTo({ top: scrollElement.scrollHeight });
+      });
+    }
+
+    setPinnedRowKey(rowId);
+  }, [pinLastRow, table, getScrollElement, pinnedRowKey, setPinnedRowKey, data]);
+};

package/src/index.ts

@@ -2,9 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
+export { default as translations } from './translations';
+
 export * from './components';
 export * from './helpers';
+export * from './hooks';
 export * from './schema';
 export * from './theme';
-export { default as translations } from './translations';
 export * from './types';