@dxos/react-ui-table 0.7.1 → 0.7.2-main.f1adc9f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.7.1",
+  "version": "0.7.2-main.f1adc9f",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,32 +8,30 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "exports": {
+    "./deprecated": {
+      "types": "./dist/types/src/_deprecated/index.d.ts",
+      "browser": "./dist/lib/browser/_deprecated/index.mjs",
+      "node": "./dist/lib/node-esm/_deprecated/index.mjs"
+    },
     ".": {
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "require": "./dist/lib/node/index.cjs",
-      "import": "./dist/lib/node-esm/index.mjs"
+      "node": "./dist/lib/node-esm/index.mjs"
     },
     "./types": {
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
-      "require": "./dist/lib/node/types/index.cjs",
-      "import": "./dist/lib/node-esm/types/index.mjs"
-    },
-    "./deprecated": {
-      "types": "./dist/types/src/_deprecated/index.d.ts",
-      "browser": "./dist/lib/browser/_deprecated/index.mjs",
-      "require": "./dist/lib/node/_deprecated/index.cjs",
-      "import": "./dist/lib/node-esm/_deprecated/index.mjs"
+      "node": "./dist/lib/node-esm/types/index.mjs"
     }
   },
+  "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
       "deprecated": [
-        "./dist/types/src/_deprecated/index.d.ts"
+        "dist/types/src/_deprecated/index.d.ts"
       ],
       "types": [
-        "./dist/types/src/types/index.d.ts"
+        "dist/types/src/types/index.d.ts"
       ]
     }
   },
@@ -55,25 +53,25 @@
     "@tanstack/react-virtual": "^3.9.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/debug": "0.7.1",
-    "@dxos/context": "0.7.1",
-    "@dxos/keys": "0.7.1",
-    "@dxos/invariant": "0.7.1",
-    "@dxos/echo-schema": "0.7.1",
-    "@dxos/lit-grid": "0.7.1",
-    "@dxos/log": "0.7.1",
-    "@dxos/plugin-search": "0.7.1",
-    "@dxos/react-client": "0.7.1",
-    "@dxos/plugin-space": "0.7.1",
-    "@dxos/react-ui-attention": "0.7.1",
-    "@dxos/react-ui-form": "0.7.1",
-    "@dxos/react-ui-searchlist": "0.7.1",
-    "@dxos/react-ui-stack": "0.7.1",
-    "@dxos/react-ui-syntax-highlighter": "0.7.1",
-    "@dxos/react-ui-grid": "0.7.1",
-    "@dxos/react-ui-types": "0.7.1",
-    "@dxos/schema": "0.7.1",
-    "@dxos/util": "0.7.1"
+    "@dxos/debug": "0.7.2-main.f1adc9f",
+    "@dxos/context": "0.7.2-main.f1adc9f",
+    "@dxos/invariant": "0.7.2-main.f1adc9f",
+    "@dxos/echo-schema": "0.7.2-main.f1adc9f",
+    "@dxos/lit-grid": "0.7.2-main.f1adc9f",
+    "@dxos/keys": "0.7.2-main.f1adc9f",
+    "@dxos/log": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-search": "0.7.2-main.f1adc9f",
+    "@dxos/plugin-space": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-attention": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-form": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-grid": "0.7.2-main.f1adc9f",
+    "@dxos/react-client": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-searchlist": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-stack": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-syntax-highlighter": "0.7.2-main.f1adc9f",
+    "@dxos/schema": "0.7.2-main.f1adc9f",
+    "@dxos/util": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-types": "0.7.2-main.f1adc9f"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -84,18 +82,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.7.1",
-    "@dxos/random": "0.7.1",
-    "@dxos/react-ui": "0.7.1",
-    "@dxos/react-ui-theme": "0.7.1",
-    "@dxos/storybook-utils": "0.7.1"
+    "@dxos/echo-signals": "0.7.2-main.f1adc9f",
+    "@dxos/random": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui": "0.7.2-main.f1adc9f",
+    "@dxos/storybook-utils": "0.7.2-main.f1adc9f",
+    "@dxos/test-utils": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-theme": "0.7.2-main.f1adc9f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.1",
-    "@dxos/react-ui-theme": "0.7.1"
+    "@dxos/react-ui": "0.7.2-main.f1adc9f",
+    "@dxos/react-ui-theme": "0.7.2-main.f1adc9f"
   },
   "publishConfig": {
     "access": "public"

package/src/_deprecated/components/ColumnMenu/ColumnMenu.stories.tsx

@@ -15,7 +15,7 @@ import { type ColumnSettingsProps } from './ColumnSettings';
 import { type ColumnDef } from '../../schema';
 
 export default {
-  title: 'ui/react-ui-table/ColumnMenu',
+  title: 'ui/react-ui-table/deprecated/ColumnMenu',
   component: ColumnMenu,
   decorators: [withTheme],
 };

package/src/_deprecated/components/ColumnMenu/ColumnSettings.stories.tsx

@@ -20,7 +20,7 @@ const DefaultStory = (props: ColumnSettingsProps) => (
 );
 
 export default {
-  title: 'ui/react-ui-table/ColumnSettings',
+  title: 'ui/react-ui-table/deprecated/ColumnSettings',
   component: ColumnSettings,
   render: DefaultStory,
   decorators: [withTheme, withLayout()],

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

@@ -128,7 +128,7 @@ const MinimalTable = (props: any) => {
 };
 
 export default {
-  title: 'ui/react-ui-table/Table',
+  title: 'ui/react-ui-table/deprecated/Table',
   component: MinimalTable,
   args: {
     header: true,

package/src/components/Table/ColumnActionsMenu.tsx

@@ -14,7 +14,6 @@ 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;
   }
@@ -29,26 +28,32 @@ export const ColumnActionsMenu = ({ model }: ColumnActionsMenuProps) => {
         <DropdownMenu.Content>
           <DropdownMenu.Viewport>
             {(!isCurrentColumnSorted || currentSort?.direction === 'asc') && (
-              <DropdownMenu.Item onClick={() => model.setSort(state.fieldId, 'desc')}>
+              <DropdownMenu.Item
+                data-testid='column-sort-descending'
+                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')}>
+              <DropdownMenu.Item
+                data-testid='column-sort-ascending'
+                onClick={() => model.setSort(state.fieldId, 'asc')}
+              >
                 {t('column action sort ascending')}
               </DropdownMenu.Item>
             )}
             {isCurrentColumnSorted && (
-              <DropdownMenu.Item onClick={() => model.clearSort()}>
+              <DropdownMenu.Item data-testid='column-clear-sort' onClick={() => model.clearSort()}>
                 {t('column action clear sorting')}
               </DropdownMenu.Item>
             )}
             {model.getColumnCount() > 1 && (
-              <DropdownMenu.Item onClick={() => model.deleteColumn(state.fieldId)}>
+              <DropdownMenu.Item data-testid='column-delete' onClick={() => model.deleteColumn(state.fieldId)}>
                 {t('column action delete')}
               </DropdownMenu.Item>
             )}
-            <DropdownMenu.Item onClick={() => model.modalController.openColumnSettings()}>
+            <DropdownMenu.Item data-testid='column-settings' onClick={() => model.modalController.openColumnSettings()}>
               {t('column action settings')}
             </DropdownMenu.Item>
           </DropdownMenu.Viewport>

package/src/components/Table/ColumnSettings.tsx

@@ -39,7 +39,7 @@ export const ColumnSettings = ({ model }: ColumnSettingsProps) => {
 
   const field = existingField ?? newField;
 
-  const handleClose = useCallback(() => {
+  const handleSave = useCallback(() => {
     model?.modalController.close();
   }, [model?.modalController]);
 
@@ -64,7 +64,7 @@ export const ColumnSettings = ({ model }: ColumnSettingsProps) => {
               projection={model.projection}
               field={field}
               registry={space?.db.schemaRegistry}
-              onClose={handleClose}
+              onSave={handleSave}
               onCancel={handleCancel}
             />
           </DropdownMenu.Viewport>

package/src/components/Table/RowActionsMenu.tsx

@@ -13,9 +13,8 @@ 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;
-
+  const state = model.modalController.state.value;
   if (state?.type !== 'row') {
     return null;
   }
@@ -25,7 +24,7 @@ export const RowActionsMenu = ({ model }: RowActionsMenuProps) => {
       <DropdownMenu.VirtualTrigger virtualRef={model.modalController.trigger} />
       <DropdownMenu.Content>
         <DropdownMenu.Viewport>
-          <DropdownMenu.Item onClick={() => model.deleteRow(state.rowIndex)}>
+          <DropdownMenu.Item data-testid='row-menu-delete' onClick={() => model.deleteRow(state.rowIndex)}>
             {t(hasSelection ? 'bulk delete row label' : 'delete row label')}
           </DropdownMenu.Item>
         </DropdownMenu.Viewport>

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

@@ -27,6 +27,8 @@ import { initializeTable } from '../../util';
 import { Toolbar } from '../Toolbar';
 import { createItems, createTable, type SimulatorProps, useSimulator } from '../testing';
 
+faker.seed(0);
+
 //
 // Story components.
 //
@@ -42,7 +44,7 @@ const DefaultStory = () => {
       const table = tables[0];
       invariant(table.view);
       setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.query.type));
+      setSchema(space.db.schemaRegistry.getSchema(table.view.query.typename));
     }
   }, [tables]);
 
@@ -189,7 +191,7 @@ const TablePerformanceStory = (props: StoryProps) => {
 //
 
 const meta: Meta<StoryProps> = {
-  title: 'plugins/plugin-table/Table',
+  title: 'ui/react-ui-table/Table',
   component: Table.Main as any,
   render: DefaultStory,
   parameters: { translations },
@@ -200,8 +202,8 @@ const meta: Meta<StoryProps> = {
       createSpace: true,
       onSpaceCreated: async ({ space }) => {
         const table = space.db.add(create(TableType, {}));
-        const schema = initializeTable({ space, table });
-        Array.from({ length: 30 }).map(() => {
+        const schema = initializeTable({ space, table, initialRow: false });
+        Array.from({ length: 10 }).map(() => {
           return space.db.add(
             create(schema, {
               name: faker.person.fullName(),

package/src/components/Table/Table.tsx

@@ -48,8 +48,8 @@ const TableRoot = ({ children, role }: TableRootProps) => {
       className={mx(
         'relative border-bs !border-separator',
         role === 'section'
-          ? 'attention-surface overflow-hidden [&_.dx-grid]:max-is-max'
-          : 'flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-max [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-max',
+          ? 'attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]'
+          : 'flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]',
       )}
     >
       {children}
@@ -72,7 +72,6 @@ export type TableMainProps = {
 
 const TableMain = forwardRef<TableController, TableMainProps>(({ model, ignoreAttention }, forwardedRef) => {
   const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-
   const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : 'table');
 
   /**

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -37,7 +37,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
       const table = tables[0];
       invariant(table.view);
       setTable(table);
-      setSchema(space.db.schemaRegistry.getSchema(table.view.query.type));
+      setSchema(space.db.schemaRegistry.getSchema(table.view.query.typename));
     }
   }, [tables]);
 

package/src/model/table-model.ts

@@ -321,6 +321,7 @@ export class TableModel<T extends BaseTableRow = { id: string }> extends Resourc
     for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
       const { field, props } = this._projection.getFieldProjection(fields[col].id);
       values[fromGridCell({ col, row: 0 })] = {
+        // TODO(burdon): Use same logic as form for fallback title.
         value: props.title ?? field.path,
         readonly: true,
         resizeHandle: 'col',

package/src/playwright/TableManager.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Page } from '@playwright/test';
+
+import { DxGridManager } from '@dxos/lit-grid/testing';
+
+const TABLE_SELECTORS = {
+  columnSettingsButton: 'table-column-settings-button',
+  rowMenuButton: 'table-row-menu-button',
+  newColumnButton: 'table-new-column-button',
+  selection: 'table-selection',
+  columnSort: {
+    ascending: 'column-sort-ascending',
+    descending: 'column-sort-descending',
+  },
+  columnDelete: 'column-delete',
+  rowDelete: 'row-menu-delete',
+} as const;
+
+export class TableManager {
+  private readonly _grid: DxGridManager;
+
+  constructor(private readonly page: Page) {
+    this._grid = new DxGridManager(page);
+  }
+
+  public get grid(): DxGridManager {
+    return this._grid;
+  }
+
+  public async deleteColumn(index: number): Promise<void> {
+    await this.page.getByTestId(TABLE_SELECTORS.columnSettingsButton).nth(index).click();
+    await this.page.getByTestId(TABLE_SELECTORS.columnDelete).click();
+  }
+
+  public async deleteRow(index = 0): Promise<void> {
+    await this.page.getByTestId(TABLE_SELECTORS.rowMenuButton).nth(index).click();
+    await this.page.getByTestId(TABLE_SELECTORS.rowDelete).click();
+  }
+
+  public async toggleSelectAll(): Promise<void> {
+    await this.page.getByTestId(TABLE_SELECTORS.selection).nth(0).click();
+  }
+
+  public async sortColumn(index: number, direction: 'ascending' | 'descending'): Promise<void> {
+    await this.page.getByTestId(TABLE_SELECTORS.columnSettingsButton).nth(index).click();
+    await this.page.getByTestId(TABLE_SELECTORS.columnSort[direction]).click();
+  }
+
+  public async addColumn({ label, format }: { label: string; format: 'number' }): Promise<void> {
+    await this.page.getByTestId(TABLE_SELECTORS.newColumnButton).click();
+    await this.page.getByRole('combobox').click();
+    await this.page.getByLabel(`format ${format}`).click();
+    await this.page.getByPlaceholder('Property label.').click();
+    await this.page.getByPlaceholder('Property label.').fill(label);
+    await this.page.getByRole('button', { name: 'button save' }).click();
+  }
+}

package/src/playwright/playwright.config.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: __dirname }),
+  ...e2ePreset(__dirname),
+  webServer: {
+    command: 'pnpm -w nx storybook-e2e stories',
+    port: 9009,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/src/playwright/smoke.spec.ts

@@ -0,0 +1,105 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect, test } from '@playwright/test';
+
+import { setupPage } from '@dxos/test-utils/playwright';
+
+import { TableManager } from './TableManager';
+
+const storyId = 'ui-react-ui-table-table';
+const storyUrl = `http://localhost:9009/iframe.html?id=${storyId}&viewMode=story`;
+
+// NOTE(ZaymonFC): This test suite relies on the faker seed being set to 0 in the story.
+test.describe('Table', () => {
+  test('Loads', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    // (name, email, salary, manager) * 10 rows.
+    await table.grid.ready();
+    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(40);
+    await page.close();
+  });
+
+  test('sort', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    await table.sortColumn(0, 'descending');
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Uwe Øvergård');
+    await expect(table.grid.cell(0, 9, 'grid')).toContainText('Anita');
+
+    await table.sortColumn(0, 'ascending');
+    await expect(table.grid.cell(0, 0, 'grid')).toContainText('Anita');
+    await expect(table.grid.cell(0, 9, 'grid')).toHaveText('Uwe Øvergård');
+    await page.close();
+  });
+
+  test('delete row', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    await table.deleteRow(0);
+    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toHaveCount(0);
+    await page.close();
+  });
+
+  test('delete row--select all', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    await table.toggleSelectAll();
+
+    // Delete action affects all selected rows.
+    await table.deleteRow(0);
+
+    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toHaveCount(0);
+    await expect(page.getByRole('gridcell', { name: 'Phonthip Sigurjónsson' })).toHaveCount(0);
+    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(0);
+    await page.close();
+  });
+
+  test('delete column', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    await table.deleteColumn(0);
+    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(30);
+
+    await table.deleteColumn(0);
+    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(20);
+
+    await table.deleteColumn(0);
+    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(10);
+
+    await page.getByTestId('table-column-settings-button').nth(0).click();
+
+    // Ensure that the delete menu item is not visible when there is only one column left.
+    await expect(page.getByTestId('column-delete')).toHaveCount(0);
+    await page.close();
+  });
+
+  // Rest of add column test remains the same as it's a more complex flow
+  test('add column', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    const newColumnLabel = 'TEST LABEL';
+
+    await table.addColumn({ label: newColumnLabel, format: 'number' });
+
+    // Delete first two columns to get the new column into view
+    await table.deleteColumn(0);
+    await table.deleteColumn(0);
+
+    await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
+    await page.close();
+  });
+});

package/src/types/table.ts

@@ -6,8 +6,18 @@ import { ref, S, TypedObject } from '@dxos/echo-schema';
 import { ThreadType } from '@dxos/plugin-space';
 import { ViewType } from '@dxos/schema';
 
-export class TableType extends TypedObject({ typename: 'dxos.org/type/Table', version: '0.1.0' })({
+export const TableSchema = S.Struct({
+  id: S.String,
   name: S.optional(S.String),
   view: S.optional(ref(ViewType)),
-  threads: S.optional(S.mutable(S.Array(ref(ThreadType)))),
-}) {}
+  // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.
+  threads: S.optional(S.Array(ref(ThreadType))),
+});
+
+// type TableType = S.ClassType<typeof TableSchema>;
+
+// TODO(burdon): UX should not depend on ECHO types.
+export class TableType extends TypedObject({
+  typename: 'dxos.org/type/Table',
+  version: '0.1.0',
+})(TableSchema.fields) {}

package/src/util/grid.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type DxGridCellIndex } from '@dxos/react-ui-grid';
+import { type DxGridPlaneCellIndex } from '@dxos/react-ui-grid';
 
 // TODO(burdon): Factor out to grid.
 export type GridCell = { col: number; row: number };
@@ -10,14 +10,14 @@ export type GridCell = { col: number; row: number };
 /**
  * Generates a string key for a cell based on its column and row indices.
  */
-export const fromGridCell = ({ col, row }: GridCell): DxGridCellIndex => {
+export const fromGridCell = ({ col, row }: GridCell): DxGridPlaneCellIndex => {
   return `${col},${row}` as const; // TODO(burdon): ":" delim.
 };
 
 /**
  * Converts a cell key string back into column and row coordinates.
  */
-export const toGridCell = (cell: DxGridCellIndex): GridCell => {
+export const toGridCell = (cell: DxGridPlaneCellIndex): GridCell => {
   const [col, row] = cell.split(',').map(Number);
   return { row, col };
 };

package/src/util/table-buttons.ts

@@ -20,29 +20,34 @@ const createButtonHtml = ({
   button,
   value = '',
   disabled = false,
+  testId,
 }: {
   button: TableButton;
   value?: string;
   disabled?: boolean;
+  testId: string;
 }): string => {
   const buttonClasses = 'ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2' as const;
-  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" data-testid="${testId}" ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
 };
 
 export const tableButtons = {
   columnSettings: {
     attr: TABLE_ATTRS.columnSettings,
     icon: ICONS.columnSettings,
-    render: ({ fieldId }: { fieldId: string }) => createButtonHtml({ button: 'columnSettings', value: fieldId }),
+    render: ({ fieldId }: { fieldId: string }) =>
+      createButtonHtml({ button: 'columnSettings', value: fieldId, testId: 'table-column-settings-button' }),
   },
   rowMenu: {
     attr: TABLE_ATTRS.rowMenu,
     icon: ICONS.rowMenu,
-    render: ({ rowIndex }: { rowIndex: number }) => createButtonHtml({ button: 'rowMenu', value: rowIndex.toString() }),
+    render: ({ rowIndex }: { rowIndex: number }) =>
+      createButtonHtml({ button: 'rowMenu', value: rowIndex.toString(), testId: 'table-row-menu-button' }),
   },
   addColumn: {
     attr: TABLE_ATTRS.newColumn,
     icon: ICONS.newColumn,
-    render: ({ disabled }: { disabled?: boolean } = {}) => createButtonHtml({ button: 'newColumn', disabled }),
+    render: ({ disabled }: { disabled?: boolean } = {}) =>
+      createButtonHtml({ button: 'newColumn', disabled, testId: 'table-new-column-button' }),
   },
 } as const;

package/src/util/table-controls.ts

@@ -16,7 +16,7 @@ export const renderCheckbox = ({
 }: RenderCheckboxProps): string => {
   const baseClasses = 'absolute inset-block-[6px] inline-end-[6px] ch-checkbox' as const;
   const { attributes } = tableControls.checkbox;
-  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ''} ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''}/>`;
+  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ''} ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''} data-testid="table-selection"/>`;
 };
 
 export const tableControls = {

package/src/util/table.ts

@@ -20,9 +20,15 @@ import { createFieldId, createView, ViewProjection } from '@dxos/schema';
 
 import { type TableType } from '../types';
 
+type InitialiseTableProps = {
+  space: Space;
+  table: TableType;
+  initialRow?: boolean;
+};
+
 // TODO(burdon): Pass in type.
 // TODO(burdon): User should determine typename.
-export const initializeTable = ({ space, table }: { space: Space; table: TableType }): MutableSchema => {
+export const initializeTable = ({ space, table, initialRow = true }: InitialiseTableProps): MutableSchema => {
   log.info('initializeTable', { table });
 
   const ContactSchema = TypedObject({
@@ -70,8 +76,10 @@ export const initializeTable = ({ space, table }: { space: Space; table: TableTy
     },
   });
 
-  // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
-  space.db.add(create(contactSchema, {}));
+  if (initialRow) {
+    // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
+    space.db.add(create(contactSchema, {}));
+  }
 
   return contactSchema;
 };

package/dist/lib/browser/chunk-A5W4XWPD.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { ref, S, TypedObject } from '@dxos/echo-schema';\nimport { ThreadType } from '@dxos/plugin-space';\nimport { ViewType } from '@dxos/schema';\n\nexport class TableType extends TypedObject({ typename: 'dxos.org/type/Table', version: '0.1.0' })({\n  name: S.optional(S.String),\n  view: S.optional(ref(ViewType)),\n  threads: S.optional(S.mutable(S.Array(ref(ThreadType)))),\n}) {}\n"],
-  "mappings": ";AAIA,SAASA,KAAKC,GAAGC,mBAAmB;AACpC,SAASC,kBAAkB;AAC3B,SAASC,gBAAgB;AAElB,IAAMC,YAAN,cAAwBC,YAAY;EAAEC,UAAU;EAAuBC,SAAS;AAAQ,CAAA,EAAG;EAChGC,MAAMC,EAAEC,SAASD,EAAEE,MAAM;EACzBC,MAAMH,EAAEC,SAASG,IAAIC,QAAAA,CAAAA;EACrBC,SAASN,EAAEC,SAASD,EAAEO,QAAQP,EAAEQ,MAAMJ,IAAIK,UAAAA,CAAAA,CAAAA,CAAAA;AAC5C,CAAA,EAAA;AAAI;",
-  "names": ["ref", "S", "TypedObject", "ThreadType", "ViewType", "TableType", "TypedObject", "typename", "version", "name", "S", "optional", "String", "view", "ref", "ViewType", "threads", "mutable", "Array", "ThreadType"]
-}

package/dist/lib/node/chunk-32IGMRME.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { ref, S, TypedObject } from '@dxos/echo-schema';\nimport { ThreadType } from '@dxos/plugin-space';\nimport { ViewType } from '@dxos/schema';\n\nexport class TableType extends TypedObject({ typename: 'dxos.org/type/Table', version: '0.1.0' })({\n  name: S.optional(S.String),\n  view: S.optional(ref(ViewType)),\n  threads: S.optional(S.mutable(S.Array(ref(ThreadType)))),\n}) {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAIA,yBAAoC;AACpC,0BAA2B;AAC3B,oBAAyB;AAElB,IAAMA,YAAN,kBAAwBC,gCAAY;EAAEC,UAAU;EAAuBC,SAAS;AAAQ,CAAA,EAAG;EAChGC,MAAMC,qBAAEC,SAASD,qBAAEE,MAAM;EACzBC,MAAMH,qBAAEC,aAASG,wBAAIC,sBAAAA,CAAAA;EACrBC,SAASN,qBAAEC,SAASD,qBAAEO,QAAQP,qBAAEQ,UAAMJ,wBAAIK,8BAAAA,CAAAA,CAAAA,CAAAA;AAC5C,CAAA,EAAA;AAAI;",
-  "names": ["TableType", "TypedObject", "typename", "version", "name", "S", "optional", "String", "view", "ref", "ViewType", "threads", "mutable", "Array", "ThreadType"]
-}