@dxos/react-ui-table 0.6.14-staging.e15392e → 0.7.0

package/src/_deprecated/components/Table/Table.tsx

@@ -0,0 +1,301 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  type GroupingState,
+  type Row,
+  type RowData,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getGroupedRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+  useContext,
+} from 'react';
+
+import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { TableBody } from './TableBody';
+import { type TypedTableProvider, TableProvider as UntypedTableProvider, useTableContext } from './TableContext';
+import { TableHead } from './TableHead';
+import { TableRootContext, useTableRootContext } from './TableRootContext';
+import { type TableProps } from './props';
+import { useColumnResizing, useColumnSorting, usePinLastRow, useRowSelection } from '../../hooks';
+import { groupTh, tableRoot } from '../../theme';
+
+type TableRootProps = { children: ReactNode };
+
+const TableRoot = ({ children }: TableRootProps) => {
+  const contextValue = useTableRootContext();
+  return <TableRootContext.Provider value={contextValue}>{children}</TableRootContext.Provider>;
+};
+
+type TableViewportProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const TableViewport = ({ children, classNames, asChild, ...props }: TableViewportProps) => {
+  const { scrollContextRef } = useContext(TableRootContext);
+
+  const classes = mx(classNames, 'overflow-auto');
+  return asChild ? (
+    <Slot ref={scrollContextRef} className={classes} {...props}>
+      {children}
+    </Slot>
+  ) : (
+    <div role='none' className={classes} ref={scrollContextRef} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>) => {
+  const {
+    role,
+    header = true,
+    rowsSelectable,
+    debug,
+    pinLastRow,
+    columnVisibility,
+    onColumnResize,
+    onDataSelectionChange,
+  } = props;
+
+  const columns = useDefaultValue(props.columns, () => []);
+  const incomingData = useDefaultValue(props.data, () => []);
+
+  const [data, setData] = useState([...incomingData]);
+
+  // Reactivity workaround: https://github.com/dxos/dxos/issues/6376.
+  const forceUpdate = useCallback(() => setData([...incomingData]), [incomingData]);
+  useEffect(() => forceUpdate(), [JSON.stringify(incomingData), forceUpdate]);
+
+  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
+
+  const { columnSizing, setColumnSizing, columnSizingInfo, setColumnSizingInfo } = useColumnResizing({
+    columns,
+    onColumnResize,
+  });
+
+  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
+
+  const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
+  useEffect(() => handleGroupingChange(props.grouping ?? []), [handleGroupingChange, props.grouping]);
+
+  const columnSorting = useColumnSorting();
+
+  const table = useReactTable({
+    // Data
+    meta: {},
+    data,
+
+    // Columns
+    columns,
+    defaultColumn: {
+      size: 400, // Required in order remove default width.
+      maxSize: 1024,
+    },
+
+    // State
+    state: {
+      columnVisibility,
+      columnSizing,
+      columnSizingInfo,
+      sorting: columnSorting.sorting,
+      rowSelection,
+      grouping,
+    },
+
+    // Resize columns
+    columnResizeMode: 'onChange',
+    enableColumnResizing: true,
+    onColumnSizingChange: setColumnSizing,
+    onColumnSizingInfoChange: setColumnSizingInfo,
+
+    // Rows
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+
+    // Grouping
+    getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : undefined,
+    onGroupingChange: handleGroupingChange,
+
+    enableMultiRowSelection: rowsSelectable === 'multi' ? true : undefined,
+    enableRowSelection: rowsSelectable === true ? true : undefined,
+
+    onRowSelectionChange: handleRowSelectionChange,
+
+    enableSorting: true,
+    enableColumnPinning: true,
+
+    // Debug
+    debugTable: debug,
+  });
+
+  useEffect(() => {
+    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
+  }, [onDataSelectionChange, rowSelection, table]);
+
+  usePinLastRow(pinLastRow, table, data);
+
+  // 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, ...columnSorting }}
+      table={table}
+      header={header}
+      expand={expand}
+      isGrid={role === 'grid' || role === 'treegrid'}
+    >
+      <TableImpl<TData> debug={false} {...props} />
+    </TableProvider>
+  );
+};
+
+// TODO(zan): Smush this into the Table component.
+/**
+ * Pure implementation of table outside of context set-up.
+ */
+const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
+  const { debug, classNames, role, grouping, fullWidth } = props;
+  const { table } = useTableContext<TData>();
+
+  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>
+    );
+  }
+
+  const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+
+  const TableComponent = isResizingColumn ? MemoizedVirtualizedTableContent : VirtualizedTableContent;
+
+  return (
+    <table
+      role={role}
+      className={tableRoot(props, classNames)}
+      style={{
+        // borderCollapse: 'separate',
+        borderSpacing: 0,
+        ...(!fullWidth && { width: table.getTotalSize() }),
+      }}
+    >
+      <TableHead />
+
+      {grouping?.length !== 0 ? <TableComponent /> : <GroupedTableContent />}
+    </table>
+  );
+};
+
+const VirtualizedTableContent = () => {
+  const { table } = useTableContext();
+  const { virtualizer, dispatch } = useContext(TableRootContext);
+
+  const centerRows = table.getCenterRows();
+  let pinnedRows = [] as Row<unknown>[];
+
+  useEffect(() => {
+    dispatch({ type: 'updateTableCount', count: centerRows.length });
+  }, [centerRows.length]);
+
+  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 } = virtualizer;
+
+  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;
+
+  const rowsToRender = [...virtualRows.map((virtualRow) => centerRows[virtualRow.index]), ...pinnedRows].filter(
+    (r) => !!r,
+  );
+
+  return (
+    <Fragment>
+      {paddingTop > 0 && (
+        <tbody role='none'>
+          <tr role='none'>
+            <td style={{ height: `${paddingTop}px` }} role='none' />
+          </tr>
+        </tbody>
+      )}
+      <TableBody rows={rowsToRender} />
+      {paddingBottom > 0 && (
+        <tbody role='none'>
+          <tr role='none'>
+            <td style={{ height: `${paddingBottom}px` }} role='none' />
+          </tr>
+        </tbody>
+      )}
+    </Fragment>
+  );
+};
+
+export const MemoizedVirtualizedTableContent = memo(VirtualizedTableContent);
+
+const GroupedTableContent = () => {
+  const {
+    table: { getGroupedRowModel, getHeaderGroups, getState },
+    debug,
+  } = useTableContext();
+
+  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>
+        );
+      })}
+    </>
+  );
+};
+
+// TODO(burdon): Floating "add row" jumps by 1 pixel on scroll.
+// TODO(burdon): Blue focus highlight is clipped by 1px on the left.
+// TODO(burdon): Focused row and focus ring passes over the sticky header.
+export const Table = {
+  Root: TableRoot,
+  Viewport: TableViewport,
+  Main: TablePrimitive,
+};

package/src/{components → _deprecated/components}/Table/TableHead.tsx

@@ -5,6 +5,8 @@
 import { flexRender } from '@tanstack/react-table';
 import React from 'react';
 
+import { defaultSizeCol } from '@dxos/react-ui-grid';
+
 import { useTableContext } from './TableContext';
 import { theadResizeRoot, theadRoot, theadTh, theadTr } from '../../theme';
 
@@ -24,7 +26,7 @@ const TableHead = (_props: TableHeadProps) => {
           <tr key={headerGroup.id} className={theadTr(tableContext)}>
             {/* TODO(burdon): Calc. width. */}
             {tableContext.debug && (
-              <th className='font-mono' style={{ width: 32 }}>
+              <th className='font-mono' style={{ width: defaultSizeCol }}>
                 #
               </th>
             )}

package/src/_deprecated/components/Table/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './props';
+export * from './Table';
+export * from './TableContext';
+export * from './TableRootContext';

package/src/_deprecated/components/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Cell';
+export * from './ColumnMenu';
+export * from './Table';

package/src/{helpers.tsx → _deprecated/helpers.tsx}

@@ -19,6 +19,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { type PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
+import { defaultSizeRow } from '@dxos/react-ui-grid';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
 import { CellCombobox, useTableContext } from './components';
@@ -312,7 +313,7 @@ export class ColumnBuilder<TData extends RowData> {
         : (cell) => {
             let value = cell.getValue();
             // TODO(burdon): Hack to support automerge.
-            if (typeof value === 'object' && (value as any)?.__typename === 'dxos.Text.v0') {
+            if (typeof value === 'object' && (value as any)?.type === 'dxos.Text.v0') {
               value = (value as any).content;
             }
 
@@ -435,7 +436,7 @@ export class ColumnBuilder<TData extends RowData> {
   >[0] {
     return {
       id,
-      size: 32,
+      size: defaultSizeRow,
       enableResizing: false,
       meta: { onUpdate, cell: { classNames } },
       header: ({ table }) => {
@@ -484,7 +485,7 @@ export class ColumnBuilder<TData extends RowData> {
     const IconOn = on?.Icon ?? Check;
     const IconOff = off?.Icon ?? X;
     return {
-      size: size ?? 32,
+      size: size ?? defaultSizeRow,
       // TODO(zan): Implement sort algorithm.
       enableSorting: false,
       header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,

package/src/_deprecated/hooks/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useColumnSizing';
+export * from './useColumnSorting';
+export * from './usePinLastRow';
+export * from './useRowSelection';

package/src/_deprecated/index.ts

@@ -0,0 +1,12 @@
+//
+// 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 * from './types';

package/src/_deprecated/schema/column-utils.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ColumnDef } from '@tanstack/react-table';
+
+import { TypeEnum, type S } from '@dxos/echo-schema';
+import { FormatEnum } from '@dxos/echo-schema';
+import { mapSchemaToFields } from '@dxos/schema';
+
+import { createColumnBuilder } from '../helpers';
+
+/**
+ * @deprecated
+ */
+export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, any>[] => {
+  const { helper, builder } = createColumnBuilder<T>();
+
+  return mapSchemaToFields(schema).map(({ property, type, format }) => {
+    const propertyKey = property.toString();
+
+    if (!format) {
+      switch (type) {
+        case TypeEnum.String: {
+          return helper.accessor(
+            propertyKey as any,
+            builder.string({ label: propertyKey, classNames: [property === 'id' && 'font-mono'] }),
+          );
+        }
+        case TypeEnum.Number: {
+          return helper.accessor(propertyKey as any, builder.number({ label: propertyKey }));
+        }
+        case TypeEnum.Boolean: {
+          return helper.accessor(propertyKey as any, builder.switch({ label: propertyKey }));
+        }
+        default: {
+          throw new Error(`Unhandled scalar type: ${type}`);
+        }
+      }
+    }
+
+    switch (format) {
+      case FormatEnum.Date: {
+        return helper.accessor(propertyKey as any, builder.date({ label: propertyKey }));
+      }
+      case FormatEnum.JSON: {
+        return helper.accessor(propertyKey as any, builder.json({ label: propertyKey, id: propertyKey }));
+      }
+      default: {
+        throw new Error(`Unhandled format: ${format}`);
+      }
+    }
+  });
+};

package/src/{schema → _deprecated/schema}/types.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type FieldValueType } from '@dxos/schema';
+import { type TypeEnum, type FormatEnum } from '@dxos/echo-schema';
 
 /**
  * @deprecated
@@ -21,7 +21,8 @@ export type TableDef = {
 export type ColumnDef = {
   id: string;
   prop: string;
-  type: FieldValueType;
+  type: TypeEnum;
+  format?: FormatEnum;
   size?: number;
   label?: string;
 

package/src/_deprecated/translations.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const translationKey = 'table';
+
+export default [
+  {
+    'en-US': {
+      [translationKey]: {
+        'no selection label': ' ',
+        'number column type label': 'Number',
+        'boolean column type label': 'Boolean',
+        'date column type label': 'Date',
+        'string column type label': 'Text',
+        'ref column type label': 'Reference',
+        'digits label': 'Decimal places',
+        'save label': 'Save',
+        'delete label': 'Delete',
+        'column label label': 'Label',
+        'property key label': 'Property',
+        'column type label': 'Type',
+      },
+    },
+  },
+];

package/src/components/Table/ColumnActionsMenu.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+
+import { type TableModel } from '../../model';
+import { translationKey } from '../../translations';
+
+type ColumnActionsMenuProps = { model?: TableModel };
+
+export const ColumnActionsMenu = ({ model }: ColumnActionsMenuProps) => {
+  const { t } = useTranslation(translationKey);
+  const state = model?.modalController.state.value;
+
+  if (!model || state?.type !== 'column') {
+    return null;
+  }
+
+  const currentSort = model.sorting;
+  const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+
+  return (
+    <DropdownMenu.Root modal={false} open={state?.type === 'column'} onOpenChange={model.modalController.close}>
+      <DropdownMenu.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content>
+          <DropdownMenu.Viewport>
+            {(!isCurrentColumnSorted || currentSort?.direction === 'asc') && (
+              <DropdownMenu.Item onClick={() => model.setSort(state.fieldId, 'desc')}>
+                {t('column action sort descending')}
+              </DropdownMenu.Item>
+            )}
+            {(!isCurrentColumnSorted || currentSort?.direction === 'desc') && (
+              <DropdownMenu.Item onClick={() => model.setSort(state.fieldId, 'asc')}>
+                {t('column action sort ascending')}
+              </DropdownMenu.Item>
+            )}
+            {isCurrentColumnSorted && (
+              <DropdownMenu.Item onClick={() => model.clearSort()}>
+                {t('column action clear sorting')}
+              </DropdownMenu.Item>
+            )}
+            {model.getColumnCount() > 1 && (
+              <DropdownMenu.Item onClick={() => model.deleteColumn(state.fieldId)}>
+                {t('column action delete')}
+              </DropdownMenu.Item>
+            )}
+            <DropdownMenu.Item onClick={() => model.modalController.openColumnSettings()}>
+              {t('column action settings')}
+            </DropdownMenu.Item>
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

package/src/components/Table/ColumnSettings.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { getSpace } from '@dxos/react-client/echo';
+import { DropdownMenu } from '@dxos/react-ui';
+import { FieldEditor } from '@dxos/react-ui-data';
+import { type FieldType } from '@dxos/schema';
+
+import { type TableModel } from '../../model';
+
+type ColumnSettingsProps = { model?: TableModel };
+
+export const ColumnSettings = ({ model }: ColumnSettingsProps) => {
+  const [newField, setNewField] = useState<FieldType>();
+  const state = model?.modalController.state.value;
+
+  const space = getSpace(model?.table);
+
+  useEffect(() => {
+    if (state?.type === 'columnSettings' && state.mode.type === 'create' && model?.projection) {
+      setNewField(model.projection.createFieldProjection());
+    } else {
+      setNewField(undefined);
+    }
+  }, [model?.projection, state]);
+
+  const existingField = useMemo(() => {
+    if (state?.type === 'columnSettings') {
+      const { mode } = state;
+      if (mode.type === 'edit') {
+        return model?.table?.view?.fields.find((f) => f.id === mode.fieldId);
+      }
+    }
+    return undefined;
+  }, [model?.table?.view?.fields, state]);
+
+  const field = existingField ?? newField;
+
+  const handleClose = useCallback(() => {
+    model?.modalController.close();
+  }, [model?.modalController]);
+
+  const handleCancel = useCallback(() => {
+    if (state?.type === 'columnSettings' && state.mode.type === 'create' && newField) {
+      model?.projection?.deleteFieldProjection(newField.id);
+    }
+  }, [model?.projection, state, newField]);
+
+  if (!model?.table?.view || !model.projection || !field) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu.Root modal={false} open={state?.type === 'columnSettings'}>
+      <DropdownMenu.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content classNames='md:is-64'>
+          <DropdownMenu.Viewport>
+            <FieldEditor
+              view={model.table.view}
+              projection={model.projection}
+              field={field}
+              registry={space?.db.schemaRegistry}
+              onClose={handleClose}
+              onCancel={handleCancel}
+            />
+          </DropdownMenu.Viewport>
+          <DropdownMenu.Arrow />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

package/src/components/Table/RowActionsMenu.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+
+import { type TableModel } from '../../model';
+import { translationKey } from '../../translations';
+
+type RowActionsMenuProps = { model: TableModel };
+
+export const RowActionsMenu = ({ model }: RowActionsMenuProps) => {
+  const { t } = useTranslation(translationKey);
+  const state = model.modalController.state.value;
+  const hasSelection = model.selection.hasSelection.value;
+
+  if (state?.type !== 'row') {
+    return null;
+  }
+
+  return (
+    <DropdownMenu.Root modal={false} open={true} onOpenChange={model.modalController.close}>
+      <DropdownMenu.VirtualTrigger virtualRef={model.modalController.trigger} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Viewport>
+          <DropdownMenu.Item onClick={() => model.deleteRow(state.rowIndex)}>
+            {t(hasSelection ? 'bulk delete row label' : 'delete row label')}
+          </DropdownMenu.Item>
+        </DropdownMenu.Viewport>
+        <DropdownMenu.Arrow />
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};