@dxos/react-ui-table 0.4.10-main.c32f430 → 0.4.10-main.c5e8686

package/src/components/{ColumnSettingsForm.tsx → ColumnMenu/ColumnSettingsForm.tsx}

@@ -1,7 +1,6 @@
 //
 // Copyright 2024 DXOS.org
 //
-
 import { Check, Trash, X } from '@phosphor-icons/react';
 import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
 
@@ -9,8 +8,8 @@ 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';
+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)}>
@@ -18,6 +17,15 @@ const Section: FC<PropsWithChildren & { className?: string }> = ({ children, cla
   </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,
@@ -25,29 +33,26 @@ export const ColumnSettingsForm = ({
   onUpdate,
   onDelete,
   onClose,
-}: {
-  column: ColumnProps;
-  tableDef: TableDef;
-  tableDefs: TableDef[];
-  onUpdate?: ((id: string, column: ColumnProps) => void) | undefined;
-  onDelete?: ((id: string) => void) | undefined;
-  onClose: () => void;
-}) => {
-  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'));
+}: 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 = () => {
-    setProp(column.id);
-    onClose;
+    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();
@@ -56,7 +61,6 @@ export const ColumnSettingsForm = ({
 
     // 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 */) {
@@ -66,7 +70,7 @@ export const ColumnSettingsForm = ({
       }
     }
 
-    onUpdate?.(prop, {
+    onUpdate?.(column.id, {
       id: prop, // TODO(burdon): Make unique.
       prop,
       label,
@@ -75,8 +79,7 @@ export const ColumnSettingsForm = ({
       refProp,
       digits: safeParseInt(digits),
     });
-
-    onClose();
+    onClose?.();
   };
 
   return (
@@ -86,8 +89,8 @@ export const ColumnSettingsForm = ({
           <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
           <Input.TextInput
             placeholder='Column label'
-            value={label ?? ''}
-            onChange={(event) => setLabel(event.target.value)}
+            value={formState.label ?? ''}
+            onChange={(event) => setFormState((prevState) => ({ ...prevState, label: event.target.value }))}
             autoFocus
           />
         </Input.Root>
@@ -96,14 +99,18 @@ export const ColumnSettingsForm = ({
           <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, ''))}
+            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={type} onValueChange={setType}>
+          <Select.Root
+            value={formState.type}
+            onValueChange={(value) => setFormState((prevState) => ({ ...prevState, type: value }))}
+          >
             <Select.TriggerButton placeholder='Type' classNames='is-full' />
             <Select.Portal>
               <Select.Content>
@@ -119,35 +126,59 @@ export const ColumnSettingsForm = ({
           </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>
-        </>
+      {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>
       )}
 
-      {/* TODO(burdon): Selectors on same line. */}
-      {type === 'ref' && (
-        <>
-          <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</Input.Label>
-              <Select.Root value={refTable} onValueChange={setRefTable}>
-                <Select.TriggerButton placeholder='Table' classNames='is-full' />
+              <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
-                        .filter((t) => t.id !== tableDef.id)
-                        .map(({ id, name }) => (
+                        .find((tableDef) => tableDef.id === formState.refTable)
+                        ?.columns.map(({ id, label }) => (
                           <Select.Option key={id} value={id}>
-                            {name ?? id}
+                            {label ?? id}
                           </Select.Option>
                         ))}
                     </Select.Viewport>
@@ -155,36 +186,13 @@ export const ColumnSettingsForm = ({
                 </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>
-        </>
+          )}
+        </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' />

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,
@@ -282,6 +282,61 @@ export const PinnedLastRow = {
   },
 };
 
+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,8 +27,8 @@ 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';
-import { usePinLastRow } from '../hooks/usePinLastRow';
 
 export const Table = <TData extends RowData>(props: TableProps<TData>) => {
   const {
@@ -177,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 (
@@ -211,7 +207,7 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
             <VirtualizedTableContent getScrollElement={getScrollElement} />
           )
         ) : (
-          <TableBody rows={rows} />
+          <UnvirtualizedTableContent />
         )
       ) : (
         <GroupedTableContent />
@@ -222,13 +218,32 @@ 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>[];
+
+  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,

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

@@ -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/usePinLastRow.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Row, type Table } from '@tanstack/react-table';
+import { useCallback, useEffect, useState } from 'react';
+
+export const usePinLastRow = (
+  pinLastRow: boolean | undefined,
+  table: Table<any>,
+  data: any[],
+  getScrollElement?: () => Element | null,
+) => {
+  const [pinnedRowKey, setPinnedRowKey] = useState<string>();
+
+  // Scrolls to the bottom of a scrollable element.
+  const scrollToBottom = useCallback(() => {
+    const scrollElement = getScrollElement?.();
+    if (scrollElement) {
+      requestAnimationFrame(() => scrollElement.scrollTo({ top: scrollElement.scrollHeight }));
+    }
+  }, [getScrollElement]);
+
+  const pinRow = useCallback(
+    (rowToPin: Row<any>) => {
+      table.resetRowPinning();
+      rowToPin.pin('bottom');
+      setPinnedRowKey(rowToPin.id);
+    },
+    [table],
+  );
+
+  const clearRowPinning = useCallback(() => {
+    table.resetRowPinning();
+    setPinnedRowKey(undefined);
+  }, [table]);
+
+  // Define the logic for pinning the last row in a callback.
+  const pinLastRowCallback = useCallback(() => {
+    const rows = table.getRowModel().rows;
+
+    if (rows.length === 0) {
+      return clearRowPinning();
+    }
+
+    const lastRow = rows[rows.length - 1];
+    if (lastRow.id === pinnedRowKey) {
+      return;
+    }
+
+    pinRow(lastRow);
+
+    if (pinnedRowKey !== undefined) {
+      scrollToBottom();
+    }
+  }, [table, scrollToBottom, pinnedRowKey]);
+
+  // Effect to handle pinning logic when data changes.
+  useEffect(() => {
+    if (pinLastRow) {
+      pinLastRowCallback();
+    }
+  }, [data, pinLastRow, pinLastRowCallback]);
+};

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';

package/src/schema/SchemaToTable.stories.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import * as Arbitrary from '@effect/schema/Arbitrary';
+import * as fc from 'fast-check';
+import React, { useRef } from 'react';
+
+import { S } from '@dxos/echo-schema';
+import { DensityProvider } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { schemaToColumnDefs } from './schemaToColumns';
+import { Table } from '../components';
+
+export default {
+  title: 'react-ui-table/SchemaTable',
+  args: {},
+  decorators: [
+    withTheme,
+    (Story: any) => (
+      <DensityProvider density='fine'>
+        <Story />
+      </DensityProvider>
+    ),
+  ],
+};
+
+const exampleSchema = S.struct({
+  field1: S.string,
+  field2: S.number,
+  field3: S.Date,
+  field4: S.optional(S.string.pipe(S.length(10))),
+  field5: S.optional(
+    S.struct({
+      innerField1: S.string,
+      innerField2: S.number,
+    }),
+  ),
+});
+
+type ExampleSchema = S.Schema.Type<typeof exampleSchema>;
+
+const columns = schemaToColumnDefs(exampleSchema);
+
+const exampleSchemaArbitrary = Arbitrary.make(exampleSchema)(fc);
+
+const items = fc.sample(exampleSchemaArbitrary, 10);
+
+export const SchemaTable = {
+  render: () => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    return (
+      <div ref={containerRef} className='fixed inset-0 overflow-auto'>
+        <Table<ExampleSchema>
+          role='grid'
+          rowsSelectable='multi'
+          keyAccessor={(row) => JSON.stringify(row)}
+          columns={columns}
+          data={items}
+          fullWidth
+          stickyHeader
+          border
+          getScrollElement={() => containerRef.current}
+        />
+      </div>
+    );
+  },
+};

package/src/schema/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './schemaToColumns';
+export * from './types';