@dxos/react-ui-table 0.7.4 → 0.7.5-main.937ce75

package/src/model/table-presentation.ts

@@ -0,0 +1,217 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { signal } from '@preact/signals-core';
+
+import { FormatEnum, getValue } from '@dxos/echo-schema';
+import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay } from '@dxos/react-ui-form';
+import {
+  type DxGridPlane,
+  type DxGridPlaneCells,
+  toPlaneCellIndex,
+  type DxGridPlaneRange,
+  type DxGridCellValue,
+} from '@dxos/react-ui-grid';
+import { mx } from '@dxos/react-ui-theme';
+import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+
+import { type BaseTableRow, type TableModel } from './table-model';
+import { tableButtons, tableControls } from '../util';
+
+/**
+ * Presentation layer for a table component, handling cell rendering and grid display logic.
+ * Manages rendering of table cells, headers, selection columns, and action columns across
+ * different grid planes.
+ */
+export class TablePresentation<T extends BaseTableRow = { id: string }> {
+  constructor(
+    private readonly model: TableModel<T>,
+    private readonly _visibleRange = signal<DxGridPlaneRange>({
+      start: { row: 0, col: 0 },
+      end: { row: 0, col: 0 },
+    }),
+  ) {}
+
+  public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
+    switch (plane) {
+      case 'grid':
+        this._visibleRange.value = range;
+        return this.getMainGridCells(range);
+      case 'frozenRowsStart':
+        return this.getHeaderCells(range);
+      case 'frozenColsStart':
+        return this.getSelectionColumnCells(range);
+      case 'frozenColsEnd':
+        return this.getActionColumnCells(range);
+      case 'fixedStartStart':
+        return this.getSelectAllCell();
+      case 'fixedStartEnd':
+        return this.getNewColumnCell();
+      default:
+        return {};
+    }
+  }
+
+  private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const fields = this.model.table.view?.target?.fields ?? [];
+
+    const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
+      const { props } = this.model.projection.getFieldProjection(field.id);
+
+      const cell: DxGridCellValue = {
+        get value() {
+          const value = getValue(obj, field.path);
+          if (value == null) {
+            return '';
+          }
+
+          switch (props.format) {
+            case FormatEnum.Boolean: {
+              return '';
+            }
+            case FormatEnum.Ref: {
+              if (!field.referencePath) {
+                return ''; // TODO(burdon): Show error.
+              }
+
+              return getValue(value.target, field.referencePath);
+            }
+
+            default: {
+              return formatForDisplay({ type: props.type, format: props.format, value });
+            }
+          }
+        },
+      };
+
+      const classes = [];
+      const formatClasses = cellClassesForFieldType({ type: props.type, format: props.format });
+      if (formatClasses) {
+        classes.push(formatClasses);
+      }
+      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj));
+      if (rowSelectionClasses) {
+        classes.push(rowSelectionClasses);
+      }
+      if (classes.length > 0) {
+        cell.className = mx(classes.flat());
+      }
+
+      if (props.format === FormatEnum.Ref && props.referenceSchema) {
+        const targetObj = getValue(obj, field.path)?.target;
+        if (targetObj) {
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id as any as string,
+            schemaId: props.referenceSchema,
+          });
+        }
+      }
+
+      if (props.format === FormatEnum.Boolean) {
+        const value = getValue(obj, field.path);
+        cell.accessoryHtml = tableControls.switch.render({
+          colIndex,
+          rowIndex: displayIndex,
+          checked: value ?? false,
+        });
+        cell.readonly = true;
+      }
+
+      const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
+      cells[idx] = cell;
+    };
+
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        const field = fields[col];
+        if (!field) {
+          continue;
+        }
+
+        addCell(this.model.rows.value[row], field, col, row);
+      }
+    }
+
+    return cells;
+  }
+
+  private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const fields = this.model.table.view?.target?.fields ?? [];
+    for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+      const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
+      cells[toPlaneCellIndex({ col, row: 0 })] = {
+        // TODO(burdon): Use same logic as form for fallback title.
+        value: props.title ?? field.path,
+        readonly: true,
+        resizeHandle: 'col',
+        accessoryHtml: tableButtons.columnSettings.render({ fieldId: field.id }),
+        className: '!bg-gridHeader',
+      };
+    }
+
+    return cells;
+  }
+
+  private getSelectionColumnCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      const isSelected = this.model.selection.isRowIndexSelected(row);
+      const classes = cellClassesForRowSelection(isSelected);
+      cells[toPlaneCellIndex({ col: 0, row })] = {
+        value: '',
+        readonly: true,
+        className: classes ? mx(classes) : undefined,
+        accessoryHtml: tableControls.checkbox.render({ rowIndex: row, checked: isSelected }),
+      };
+    }
+
+    return cells;
+  }
+
+  private getActionColumnCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      const isSelected = this.model.selection.isRowIndexSelected(row);
+      const classes = cellClassesForRowSelection(isSelected);
+      cells[toPlaneCellIndex({ col: 0, row })] = {
+        value: '',
+        readonly: true,
+        className: classes ? mx(classes) : undefined,
+        accessoryHtml: tableButtons.rowMenu.render({ rowIndex: row }),
+      };
+    }
+
+    return cells;
+  }
+
+  private getSelectAllCell(): DxGridPlaneCells {
+    return {
+      [toPlaneCellIndex({ col: 0, row: 0 })]: {
+        accessoryHtml: tableControls.checkbox.render({
+          rowIndex: 0,
+          header: true,
+          checked: this.model.selection.allRowsSeleted.value,
+        }),
+        className: '!bg-gridHeader',
+        readonly: true,
+        value: '',
+      },
+    };
+  }
+
+  private getNewColumnCell(): DxGridPlaneCells {
+    return {
+      [toPlaneCellIndex({ col: 0, row: 0 })]: {
+        accessoryHtml: tableButtons.addColumn.render({
+          disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+        }),
+        className: '!bg-gridHeader',
+        readonly: true,
+        value: '',
+      },
+    };
+  }
+}

package/src/model/table-sorting.ts

@@ -0,0 +1,131 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { computed, type Signal, signal, type ReadonlySignal } from '@preact/signals-core';
+import orderBy from 'lodash.orderby';
+
+import { getValue, FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { formatForDisplay } from '@dxos/react-ui-form';
+import { type PropertyType, type FieldType, type ViewProjection } from '@dxos/schema';
+
+import { type BaseTableRow } from './table-model';
+import { type TableType } from '../types';
+
+export type SortDirection = 'asc' | 'desc';
+export type SortConfig = { fieldId: string; direction: SortDirection };
+
+/**
+ * Manages table sorting functionality through display and data index mapping.
+ *
+ * When a table is sorted, rows visually reorder but we need to maintain references
+ * to the original data positions. This is handled through two types of indices:
+ *
+ * - Display indices: The visual positions after sorting
+ * - Data indices: The original positions in the source data
+ *
+ * The _displayToDataIndex map maintains these relationships, enabling lookups
+ * between visual and source positions.
+ *
+ * Example mapping between display and data indices:
+ *
+ * Original Data:        Sorted Display:       Mapping: (Display → Data)
+ * ┌──────────────┐      ┌──────────────┐      ┌────────┐
+ * │ 0: "Banana"  │  =>  │ 0: "Apple"   │  =>  │ 0 => 1 │
+ * │ 1: "Apple"   │  =>  │ 1: "Banana"  │  =>  │ 1 => 0 │
+ * │ 2: "Cherry"  │  =>  │ 2: "Cherry"  │  =>  │ 2 => 2 │
+ * └──────────────┘      └──────────────┘      └────────┘
+ */
+export class TableSorting<T extends BaseTableRow> {
+  private readonly _displayToDataIndex = new Map<number, number>();
+  private readonly _sorting = signal<SortConfig | undefined>(undefined);
+  private readonly _rows: Signal<T[]>;
+  public readonly sortedRows: ReadonlySignal<T[]>;
+
+  constructor(
+    rows: Signal<T[]>,
+    private readonly _table: TableType,
+    private readonly _projection: ViewProjection,
+  ) {
+    this._rows = rows;
+    this.sortedRows = this.initialiseSortedRows();
+  }
+
+  /**
+   * @reactive
+   */
+  public get sorting(): SortConfig | undefined {
+    return this._sorting.value;
+  }
+
+  public getDataIndex(displayIndex: number): number {
+    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
+  }
+
+  public setSort(fieldId: string, direction: SortDirection): void {
+    this._sorting.value = { fieldId, direction };
+  }
+
+  //
+  // Initialisation.
+  //
+
+  private initialiseSortedRows(): ReadonlySignal<T[]> {
+    return computed(() => {
+      this._displayToDataIndex.clear();
+      const sort = this._sorting.value;
+      if (!sort) {
+        return this._rows.value;
+      }
+
+      const field = this._table.view?.target?.fields.find((f) => f.id === sort.fieldId);
+      if (!field) {
+        return this._rows.value;
+      }
+
+      const { props } = this._projection.getFieldProjection(field.id);
+
+      const dataWithIndices = this._rows.value.map((item, index) => {
+        const sortValue = this.getSortValue(props, field, item);
+        const isEmpty = !(props.type === TypeEnum.Boolean) && (sortValue == null || sortValue === '');
+
+        return { item, index, value: sortValue, isEmpty };
+      });
+
+      const ordered = orderBy(dataWithIndices, ['isEmpty', 'value'], ['asc', sort.direction]);
+
+      ordered.forEach(({ index: dataIndex }, displayIndex) => {
+        if (displayIndex !== dataIndex) {
+          this._displayToDataIndex.set(displayIndex, dataIndex);
+        }
+      });
+
+      return ordered.map(({ item }) => item);
+    });
+  }
+
+  private getSortValue(props: PropertyType, field: FieldType, item: T) {
+    const { type, format } = props;
+    const value = getValue(item, field.path);
+
+    if (type === TypeEnum.Boolean) {
+      return !!value; // Coerce null/undefined to false for booleans.
+    }
+    if (type === TypeEnum.Number) {
+      return value;
+    }
+    if (value == null) {
+      return value;
+    }
+
+    // TODO(ZaymonFC): Should we format this returned value for display based on the referenced prop format?
+    //   Right now we're going to be sorting based on the raw values.
+    //   Maybe we need to recurse this function with the referenced prop format and field?
+    if (format === FormatEnum.Ref && field.referencePath) {
+      const refValue = getValue(value.target, field.referencePath);
+      return refValue;
+    }
+
+    return formatForDisplay({ type, format, value });
+  }
+}

package/src/playwright/TableManager.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Page } from '@playwright/test';
+import { type Locator, type Page } from '@playwright/test';
 
 import { DxGridManager } from '@dxos/lit-grid/testing';
 
@@ -44,6 +44,10 @@ export class TableManager {
     await this.page.getByTestId(TABLE_SELECTORS.selection).nth(0).click();
   }
 
+  public selection(index: number): Locator {
+    return this.page.getByTestId(TABLE_SELECTORS.selection).nth(index + 1);
+  }
+
   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();

package/src/playwright/smoke.spec.ts

@@ -38,6 +38,26 @@ test.describe('Table', () => {
     await page.close();
   });
 
+  test('selection', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    // Select All
+    await table.toggleSelectAll();
+    await expect(table.selection(0)).toBeChecked();
+    await expect(table.selection(1)).toBeChecked();
+    await expect(table.selection(2)).toBeChecked();
+
+    // Deselect All
+    await table.toggleSelectAll();
+    await expect(table.selection(0)).not.toBeChecked();
+    await expect(table.selection(1)).not.toBeChecked();
+    await expect(table.selection(2)).not.toBeChecked();
+
+    await page.close();
+  });
+
   test('delete row', async ({ browser }) => {
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
@@ -69,6 +89,9 @@ test.describe('Table', () => {
     const table = new TableManager(page);
 
     await table.grid.ready();
+    await table.deleteColumn(0);
+    await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(40);
+
     await table.deleteColumn(0);
     await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(30);
 
@@ -85,7 +108,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  // Rest of add column test remains the same as it's a more complex flow
+  // Rest of add column test remains the same as it's a more complex flow.
+  // TODO(ZaymonFC): Restore this after fixing format selection.
   test('add column', async ({ browser }) => {
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
@@ -98,4 +122,58 @@ test.describe('Table', () => {
     await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
     await page.close();
   });
+
+  test('reference > reference / create new object', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+
+    // Reference existing object.
+    // Scroll over to the manager column.
+    await table.grid.panByWheel(10000, 0);
+
+    await table.grid.cell(4, 0, 'grid').click();
+    await page.keyboard.press('A');
+    await page.keyboard.press('N');
+    await page.getByRole('option', { name: 'Anita Mayer' }).click();
+
+    // Assert that the value is shown in the cell.
+    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toBeVisible();
+
+    // Create new object.
+    await table.grid.cell(4, 1, 'grid').click();
+    await page.keyboard.type('t');
+    await page.keyboard.type('e');
+    await page.keyboard.type('s');
+    await page.keyboard.type('t');
+    await page.getByText('Create new object', { exact: false }).click();
+    await page.getByTestId('save-button').click();
+
+    // Scroll to the left.
+    await page.getByRole('gridcell', { name: 'test' }).click();
+
+    await page.close();
+  });
+
+  test('test toggles', async ({ browser }) => {
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+
+    await page.getByTestId('table-switch').first().click();
+    await page.getByTestId('table-switch').nth(7).click();
+
+    // Test that checks are durable in the data model by sorting.
+    await table.sortColumn(1, 'descending');
+
+    // Assert the first two switch checkboxes are checked.
+    await expect(page.getByTestId('table-switch').first()).toBeChecked();
+    await expect(page.getByTestId('table-switch').nth(1)).toBeChecked();
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Anita Mayer');
+    await expect(table.grid.cell(0, 1, 'grid')).toHaveText('Uwe Øvergård');
+
+    await page.close();
+  });
 });

package/src/types/table.ts

@@ -2,16 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';
+import { Ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';
 import { ThreadType } from '@dxos/plugin-space';
 import { ViewType } from '@dxos/schema';
 
 export const TableSchema = S.Struct({
   id: ObjectId, // TODO(burdon): Where should this be?
   name: S.optional(S.String),
-  view: S.optional(ref(ViewType)),
+  view: S.optional(Ref(ViewType)),
   // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.
-  threads: S.optional(S.Array(ref(ThreadType))),
+  threads: S.optional(S.Array(Ref(ThreadType))),
 });
 
 // type TableType = S.Schema.Type<typeof TableSchema>;

package/src/util/index.ts

@@ -5,3 +5,4 @@
 export * from './signals';
 export * from './table';
 export * from './table-buttons';
+export * from './table-controls';

package/src/util/table-buttons.ts

@@ -2,69 +2,118 @@
 // Copyright 2024 DXOS.org
 //
 
-type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell';
+export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell';
 
-// TODO(thure): Lots of copy-pasted business here, this could by DRYed out substantially.
-
-// TODO(thure): These unique attributes come with more caveats than e.g. applying multiple attributes – one key-value
-//  pair for identifying the button type and another for passing the fieldId.
-
-const TABLE_ATTRS: { [K in TableButton]: string } = {
-  referencedCell: 'data-table-ref-cell-button',
+export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
   columnSettings: 'data-table-column-settings-button',
-  rowMenu: 'data-table-row-menu-button',
   newColumn: 'data-table-new-column-button',
+  referencedCell: 'data-table-ref-cell-button',
+  rowMenu: 'data-table-row-menu-button',
 } as const;
 
-const ICONS: { [K in TableButton]: string } = {
-  referencedCell: 'ph--link-simple-horizontal--regular',
-  columnSettings: 'ph--caret-down--regular',
-  rowMenu: 'ph--dots-three--regular',
-  newColumn: 'ph--plus--regular',
-} as const;
+type ButtonData =
+  | { type: 'columnSettings'; fieldId: string }
+  | { type: 'newColumn'; disabled?: boolean }
+  | { type: 'referencedCell'; schemaId: string; targetId: string }
+  | { type: 'rowMenu'; rowIndex: number };
 
-const createButtonHtml = ({
-  button,
-  value = '',
+const createButton = ({
+  attr,
+  data,
   disabled = false,
+  icon,
   testId,
 }: {
-  button: TableButton;
-  value?: string;
+  attr: string;
+  data: Record<string, string>;
   disabled?: boolean;
+  icon: string;
   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}" data-testid="${testId}" ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+}) => {
+  const dataAttrs = Object.entries(data)
+    .map(([k, v]) => `${k}="${v}"`)
+    .join(' ');
+
+  return `<button ${attr} data-testid="${testId}" class="ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
-export const tableButtons = {
-  referencedCell: {
-    attr: TABLE_ATTRS.referencedCell,
-    icon: ICONS.referencedCell,
-    render: ({ targetId, schemaId }: { targetId: string; schemaId: string }) =>
-      createButtonHtml({
-        button: 'referencedCell',
-        value: `${schemaId}#${targetId}`,
-        testId: 'table-ref-cell-button',
-      }),
+const addColumnButton = {
+  attr: BUTTON_IDENTIFIERS.newColumn,
+  icon: 'ph--plus--regular',
+  render: ({ disabled }: Omit<Extract<ButtonData, { type: 'newColumn' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.newColumn,
+      icon: addColumnButton.icon,
+      disabled,
+      data: {},
+      testId: 'table-new-column-button',
+    });
   },
-  columnSettings: {
-    attr: TABLE_ATTRS.columnSettings,
-    icon: ICONS.columnSettings,
-    render: ({ fieldId }: { fieldId: string }) =>
-      createButtonHtml({ button: 'columnSettings', value: fieldId, testId: 'table-column-settings-button' }),
+  getData: (_el: HTMLElement): Extract<ButtonData, { type: 'newColumn' }> => ({ type: 'newColumn' }),
+} as const;
+
+const columnSettingsButton = {
+  attr: BUTTON_IDENTIFIERS.columnSettings,
+  icon: 'ph--caret-down--regular',
+  render: ({ fieldId }: Omit<Extract<ButtonData, { type: 'columnSettings' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.columnSettings,
+      icon: columnSettingsButton.icon,
+      data: {
+        'data-field-id': fieldId,
+      },
+      testId: 'table-column-settings-button',
+    });
   },
-  rowMenu: {
-    attr: TABLE_ATTRS.rowMenu,
-    icon: ICONS.rowMenu,
-    render: ({ rowIndex }: { rowIndex: number }) =>
-      createButtonHtml({ button: 'rowMenu', value: rowIndex.toString(), testId: 'table-row-menu-button' }),
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'columnSettings' }> => ({
+    type: 'columnSettings',
+    fieldId: el.getAttribute('data-field-id')!,
+  }),
+} as const;
+
+const referencedCellButton = {
+  attr: BUTTON_IDENTIFIERS.referencedCell,
+  icon: 'ph--link-simple-horizontal--regular',
+  render: ({ targetId, schemaId }: Omit<Extract<ButtonData, { type: 'referencedCell' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.referencedCell,
+      icon: referencedCellButton.icon,
+      data: {
+        'data-target-id': targetId,
+        'data-schema-id': schemaId,
+      },
+      testId: 'table-ref-cell-button',
+    });
   },
-  addColumn: {
-    attr: TABLE_ATTRS.newColumn,
-    icon: ICONS.newColumn,
-    render: ({ disabled }: { disabled?: boolean } = {}) =>
-      createButtonHtml({ button: 'newColumn', disabled, testId: 'table-new-column-button' }),
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'referencedCell' }> => ({
+    type: 'referencedCell',
+    targetId: el.getAttribute('data-target-id')!,
+    schemaId: el.getAttribute('data-schema-id')!,
+  }),
+} as const;
+
+const rowMenuButton = {
+  attr: BUTTON_IDENTIFIERS.rowMenu,
+  icon: 'ph--dots-three--regular',
+  render: ({ rowIndex }: Omit<Extract<ButtonData, { type: 'rowMenu' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.rowMenu,
+      icon: rowMenuButton.icon,
+      data: {
+        'data-row-index': rowIndex.toString(),
+      },
+      testId: 'table-row-menu-button',
+    });
   },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'rowMenu' }> => ({
+    type: 'rowMenu',
+    rowIndex: Number(el.getAttribute('data-row-index')!),
+  }),
+} as const;
+
+export const tableButtons = {
+  addColumn: addColumnButton,
+  columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
+  rowMenu: rowMenuButton,
 } as const;