@dxos/react-ui-table 0.10.0 → 0.11.1

package/src/model/table-presentation.ts

@@ -2,13 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Atom, type Registry } from '@effect-atom/atom-react';
+import { type Registry } from '@effect-atom/atom';
 import * as Predicate from 'effect/Predicate';
 
 import { Obj, type View } from '@dxos/echo';
 import { Format, TypeEnum } from '@dxos/echo/Format';
 import { SchemaEx } from '@dxos/effect';
-import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
+import { cellClassesForFieldType } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
   type DxGridPlane,
@@ -16,6 +16,7 @@ import {
   type DxGridPlaneRange,
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
+import { formatForDisplay } from '@dxos/schema';
 import { VIEW_FIELD_LIMIT } from '@dxos/schema';
 import { mx } from '@dxos/ui-theme';
 
@@ -30,7 +31,6 @@ import { type TableModel, type TableRow } from './table-model';
  */
 export class TablePresentation<T extends TableRow = TableRow> {
   private readonly _registry: Registry.Registry;
-  private readonly _visibleRange: Atom.Writable<DxGridPlaneRange>;
   private fieldProjectionCache = new Map<string, ReturnType<typeof this.model.projection.getFieldProjection>>();
 
   constructor(
@@ -38,10 +38,6 @@ export class TablePresentation<T extends TableRow = TableRow> {
     private readonly model: TableModel<T>,
   ) {
     this._registry = registry;
-    this._visibleRange = Atom.make<DxGridPlaneRange>({
-      start: { row: 0, col: 0 },
-      end: { row: 0, col: 0 },
-    });
   }
 
   public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
@@ -52,20 +48,21 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
     switch (plane) {
       case 'grid':
-        this._registry.set(this._visibleRange, range);
+        // Report the visible range to the model so it can (re)subscribe to those rows' mutations.
+        this.model.setVisibleRange(range);
         cells = this.getMainGridCells(range);
         break;
       case 'frozenRowsStart':
         cells = this.getHeaderCells(range);
         break;
       case 'frozenColsStart':
-        cells = this.getSelectionColumnCells(range);
+        cells = this.getFrozenColsStartCells(range);
         break;
       case 'frozenColsEnd':
         cells = this.getActionColumnCells(range);
         break;
       case 'fixedStartStart':
-        cells = this.getSelectAllCell();
+        cells = this.getFixedStartStartCells();
         break;
       case 'fixedStartEnd':
         cells = this.getNewColumnCell();
@@ -74,7 +71,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
         cells = this.getDraftRowCells(range);
         break;
       case 'fixedEndStart':
-        cells = this.getDraftIconCells(range);
+        cells = this.getFixedEndStartCells(range);
         break;
       case 'fixedEndEnd':
         cells = this.getDraftActionCells(range);
@@ -110,6 +107,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     field: View.FieldType,
     colIndex: number,
     displayIndex: number,
+    plane: DxGridPlane = 'grid',
   ): void {
     const { props } = this.getFieldProjection(field.id);
 
@@ -210,7 +208,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       const targetObj = SchemaEx.getValue(obj, field.path)?.target;
       if (targetObj) {
         const uri = Obj.getURI(targetObj);
-        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><dx-anchor uri=${uri} class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
+        cell.accessoryHtml = `<div role="none" class="dx-grid__cell__block"><dx-anchor uri=${uri} class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
     }
 
@@ -219,7 +217,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       const value = SchemaEx.getValue(obj, field.path);
       const href = typeof value === 'string' ? safeHttpUrl(value) : undefined;
       if (href) {
-        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><a href="${escapeHtmlAttribute(href)}" target="_blank" rel="noopener noreferrer" class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--arrow-square-out--regular"/></a></div>`;
+        cell.accessoryHtml = `<div role="none" class="dx-grid__cell__block"><a href="${escapeHtmlAttribute(href)}" target="_blank" rel="noopener noreferrer" class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--arrow-square-out--regular"/></a></div>`;
       }
     }
 
@@ -229,6 +227,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       cell.accessoryHtml = tableControls.switch.render({
         colIndex,
         rowIndex: displayIndex,
+        plane,
         checked: value ?? false,
       });
       cell.readonly = 'no-text-select';
@@ -275,15 +274,18 @@ export class TablePresentation<T extends TableRow = TableRow> {
   private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
     const fields = this.model.projection?.getFields() ?? [];
+    // Pinned fields live in the frozen-column planes; the scrolling grid holds the remainder.
+    const pin = this.model.pinColumns;
+    const scrollingFields = fields.length - pin;
 
     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];
+      for (let col = range.start.col; col <= range.end.col && col < scrollingFields; col++) {
+        const field = fields[pin + col];
         if (!field) {
           continue;
         }
 
-        this.createDataCell(cells, this.model.getRows()[row], field, col, row);
+        this.createDataCell(cells, this.model.getRows()[row], field, col, row, 'grid');
       }
     }
 
@@ -295,9 +297,13 @@ export class TablePresentation<T extends TableRow = TableRow> {
     const fields = this.model.projection?.getFields() ?? [];
     const draftRows = this.model.getDraftRows();
 
+    // Pinned fields' draft cells render in the fixedEndStart corner; the scrolling draft row holds the remainder.
+    const pin = this.model.pinColumns;
+    const scrollingFields = fields.length - pin;
+
     // Return cells of the CTA row if no draft row is active
     if (draftRows.length === 0) {
-      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+      for (let col = range.start.col; col <= range.end.col && col < scrollingFields; col++) {
         cells[toPlaneCellIndex({ col, row: 0 })] = {
           value: '',
           readonly: true,
@@ -307,23 +313,13 @@ export class TablePresentation<T extends TableRow = TableRow> {
     } else {
       for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
         const draftRow = draftRows[row];
-        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-          const cellIndex = toPlaneCellIndex({ col, row });
-          const field = fields[col];
+        for (let col = range.start.col; col <= range.end.col && col < scrollingFields; col++) {
+          const field = fields[pin + col];
           if (!field) {
             continue;
           }
 
-          this.createDataCell(cells, draftRow.data, field, col, row);
-
-          if (this.model.hasDraftRowValidationError(row, field.path)) {
-            const cellValue = cells[cellIndex];
-            if (cellValue) {
-              const existingClasses = cellValue.className || '';
-              const draftClasses = 'dx-grid__cell--flagged';
-              cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
-            }
-          }
+          this.createDraftDataCell(cells, draftRow.data, field, col, row, 'frozenRowsEnd');
         }
       }
     }
@@ -331,41 +327,96 @@ export class TablePresentation<T extends TableRow = TableRow> {
     return cells;
   }
 
+  /**
+   * Renders a draft-row data cell and applies the validation-error flag when the field is invalid.
+   */
+  private createDraftDataCell(
+    cells: DxGridPlaneCells,
+    obj: T,
+    field: View.FieldType,
+    planeCol: number,
+    rowIndex: number,
+    plane: DxGridPlane,
+  ): void {
+    const cellIndex = toPlaneCellIndex({ col: planeCol, row: rowIndex });
+    this.createDataCell(cells, obj, field, planeCol, rowIndex, plane);
+
+    if (this.model.hasDraftRowValidationError(rowIndex, field.path)) {
+      const cellValue = cells[cellIndex];
+      if (cellValue) {
+        const existingClasses = cellValue.className || '';
+        const draftClasses = 'dx-grid__cell--flagged';
+        cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+      }
+    }
+  }
+
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
     const fields = this.model.projection?.getFields() ?? [];
-    const currentSort = this.model.getSorting();
-    for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-      const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
-      const direction = currentSort?.fieldId === field.id ? currentSort.direction : undefined;
-
-      cells[toPlaneCellIndex({ col, row: 0 })] = {
-        // TODO(burdon): Use same logic as form for fallback title.
-        value: '',
-        resizeHandle: 'col',
-        accessoryHtml: `
-          <span class="grow min-w-0 truncate">${props.title ?? field.path}</span>
-          ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
-          ${tableButtons.columnSettings.render({ fieldId: field.id })}
-        `,
-        className: 'bg-axis-surface! text-axis-text! [&>div]:flex [&>div]:items-stretch',
-      };
+    // Pinned fields' headers render in the fixedStartStart corner; the scrolling header holds the remainder.
+    const pin = this.model.pinColumns;
+    const scrollingFields = fields.length - pin;
+    for (let col = range.start.col; col <= range.end.col && col < scrollingFields; col++) {
+      this.createHeaderCell(cells, fields[pin + col].id, col);
     }
 
     return cells;
   }
 
-  private getSelectionColumnCells(range: DxGridPlaneRange): DxGridPlaneCells {
+  private createHeaderCell(cells: DxGridPlaneCells, fieldId: string, planeCol: number): void {
+    const currentSort = this.model.getSorting();
+    const { field, props } = this.model.projection.getFieldProjection(fieldId);
+    const direction = currentSort?.fieldId === field.id ? currentSort.direction : undefined;
+
+    cells[toPlaneCellIndex({ col: planeCol, row: 0 })] = {
+      // TODO(burdon): Use same logic as form for fallback title.
+      value: '',
+      resizeHandle: 'col',
+      accessoryHtml: `
+        <span class="grow min-w-0 truncate">${props.title ?? field.path}</span>
+        ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
+        ${tableButtons.columnSettings.render({ fieldId: field.id })}
+      `,
+      className: 'bg-axis-surface! text-axis-text! [&>div]:flex [&>div]:items-stretch',
+    };
+  }
+
+  /**
+   * Renders the frozenColsStart plane: the selection column (if enabled) followed by the pinned data columns.
+   */
+  private getFrozenColsStartCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
+    const selectionColumns = this.model.selectionColumns;
+    const fields = this.model.projection?.getFields() ?? [];
+    const pin = this.model.pinColumns;
+
     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, this.model.selection.selectionMode);
-      cells[toPlaneCellIndex({ col: 0, row })] = {
-        value: '',
-        readonly: 'no-text-select',
-        className: classes ? mx(classes) : undefined,
-        accessoryHtml: tableControls.checkbox.render({ rowIndex: row, checked: isSelected }),
-      };
+      if (selectionColumns > 0) {
+        const isSelected = this.model.selection.isRowIndexSelected(row);
+        const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
+        cells[toPlaneCellIndex({ col: 0, row })] = {
+          value: '',
+          readonly: 'no-text-select',
+          className: classes ? mx(classes) : undefined,
+          accessoryHtml: tableControls.checkbox.render({ rowIndex: row, checked: isSelected }),
+        };
+      }
+
+      for (let dataCol = 0; dataCol < pin; dataCol++) {
+        const field = fields[dataCol];
+        if (!field) {
+          continue;
+        }
+        this.createDataCell(
+          cells,
+          this.model.getRows()[row],
+          field,
+          selectionColumns + dataCol,
+          row,
+          'frozenColsStart',
+        );
+      }
     }
 
     return cells;
@@ -387,29 +438,41 @@ export class TablePresentation<T extends TableRow = TableRow> {
     return cells;
   }
 
-  private getSelectAllCell(): DxGridPlaneCells {
-    if (!this.model.features.selection.enabled || this.model.selection.selectionMode === 'single') {
-      return {
-        [toPlaneCellIndex({ col: 0, row: 0 })]: {
-          className: 'bg-axis-surface!',
-          readonly: true,
-          value: '',
-        },
-      };
-    }
+  /**
+   * Renders the fixedStartStart corner (frozen header row x frozen columns): the select-all cell (if the
+   * selection column is enabled) followed by the pinned columns' header cells.
+   */
+  private getFixedStartStartCells(): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const selectionColumns = this.model.selectionColumns;
 
-    return {
-      [toPlaneCellIndex({ col: 0, row: 0 })]: {
-        accessoryHtml: tableControls.checkbox.render({
-          rowIndex: 0,
-          header: true,
-          checked: this.model.selection.allRowsSelected,
-        }),
+    if (selectionColumns > 0) {
+      const showSelectAll = this.model.features.selection.enabled && this.model.selection.selectionMode !== 'single';
+      cells[toPlaneCellIndex({ col: 0, row: 0 })] = {
+        accessoryHtml: showSelectAll
+          ? tableControls.checkbox.render({
+              rowIndex: 0,
+              header: true,
+              checked: this.model.selection.allRowsSelected,
+            })
+          : undefined,
         className: 'bg-axis-surface!',
         readonly: true,
         value: '',
-      },
-    };
+      };
+    }
+
+    const fields = this.model.projection?.getFields() ?? [];
+    const pin = this.model.pinColumns;
+    for (let dataCol = 0; dataCol < pin; dataCol++) {
+      const field = fields[dataCol];
+      if (!field) {
+        continue;
+      }
+      this.createHeaderCell(cells, field.id, selectionColumns + dataCol);
+    }
+
+    return cells;
   }
 
   private getNewColumnCell(): DxGridPlaneCells {
@@ -454,17 +517,44 @@ export class TablePresentation<T extends TableRow = TableRow> {
     return cells;
   }
 
-  private getDraftIconCells(range: DxGridPlaneRange): DxGridPlaneCells {
+  /**
+   * Renders the fixedEndStart corner (draft row x frozen columns): the draft "+" icon (if the selection
+   * column is enabled) followed by the pinned columns' draft cells.
+   */
+  private getFixedEndStartCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
     const draftRows = this.model.getDraftRows();
+    const selectionColumns = this.model.selectionColumns;
+    const fields = this.model.projection?.getFields() ?? [];
+    const pin = this.model.pinColumns;
 
     for (let row = range.start.row; row <= range.end.row; row++) {
-      cells[toPlaneCellIndex({ col: 0, row })] = {
-        value: '',
-        readonly: true,
-        accessoryHtml: '<dx-icon icon="ph--plus--regular" class="contents"></dx-icon>',
-        className: mx('[&>div]:grid [&>div]:place-content-center', draftRows.length < 1 && 'dx-grid__row--cta__cell'),
-      };
+      if (selectionColumns > 0) {
+        cells[toPlaneCellIndex({ col: 0, row })] = {
+          value: '',
+          readonly: true,
+          accessoryHtml:
+            '<div role="none" class="dx-grid__cell__block"><dx-icon icon="ph--plus--regular" class="contents"></dx-icon></div>',
+          className: mx(draftRows.length < 1 && 'dx-grid__row--cta__cell'),
+        };
+      }
+
+      for (let dataCol = 0; dataCol < pin; dataCol++) {
+        const field = fields[dataCol];
+        if (!field) {
+          continue;
+        }
+        const planeCol = selectionColumns + dataCol;
+        if (draftRows.length === 0) {
+          cells[toPlaneCellIndex({ col: planeCol, row })] = {
+            value: '',
+            readonly: true,
+            className: 'dx-grid__row--cta__cell',
+          };
+        } else if (row < draftRows.length) {
+          this.createDraftDataCell(cells, draftRows[row].data, field, planeCol, row, 'fixedEndStart');
+        }
+      }
     }
 
     return cells;

package/src/model/table-view-state.ts

@@ -5,7 +5,7 @@
 import * as Schema from 'effect/Schema';
 
 import { QueryAST } from '@dxos/echo';
-import { defineViewState } from '@dxos/react-ui-attention';
+import { ViewState } from '@dxos/react-ui-attention';
 
 /**
  * Field sort configuration.
@@ -22,7 +22,7 @@ export type FieldSortType = Schema.Schema.Type<typeof FieldSortSchema>;
  * viewer's chosen sort survives remounts and reloads without writing to the shared view query
  * (which `TableModel.saveView` does explicitly).
  */
-export const tableSortAspect = defineViewState<FieldSortType | undefined>({
+export const tableSortAspect = ViewState.define<FieldSortType | undefined>({
   key: 'table-sort',
   backend: 'local',
   schema: Schema.UndefinedOr(FieldSortSchema),

package/src/testing/useTestTableModel.ts

@@ -6,8 +6,8 @@ import { RegistryContext } from '@effect-atom/atom-react';
 import { type RefObject, useCallback, useContext, useMemo, useRef } from 'react';
 
 import { type Database, Filter, Type } from '@dxos/echo';
+import { useQuery, useType } from '@dxos/echo-react';
 import { random } from '@dxos/random';
-import { useQuery, useType } from '@dxos/react-client/echo';
 import { useClientStory } from '@dxos/react-client/testing';
 import { useGlobalFilteredObjects } from '@dxos/react-ui-search';
 import { type ProjectionModel, getTypeURIFromQuery } from '@dxos/schema';

package/src/types/index.ts

@@ -2,4 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
+// A UI-free entrypoint: the Table schema with no React attached, so operation handlers and node
+// plugin variants can use it without pulling the table components.
+// TODO(wittjosiah): Factor this out into a package that does not carry a UI dependency at all.
+
 export * as Table from './Table';

package/src/util/dynamic-table.test.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Registry } from '@effect-atom/atom-react';
+import { Registry } from '@effect-atom/atom';
 import { describe, expect, test } from 'vitest';
 
 import { Format } from '@dxos/echo';

package/src/util/dynamic-table.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Registry } from '@effect-atom/atom-react';
+import { type Registry } from '@effect-atom/atom';
 import type * as Types from 'effect/Types';
 
 import { Filter, type JsonSchema, Obj, Order, Query, type QueryAST, Ref, Type, type View } from '@dxos/echo';

package/src/util/table-buttons.ts

@@ -39,7 +39,7 @@ const createButton = ({
     .map(([k, v]) => `${k}="${v}"`)
     .join(' ');
 
-  return `<button ${attr} data-testid="${testId}" class="dx-button w-6 aspect-square px-0.5 min-h-0" ${dataAttrs} ${disabled ? 'disabled' : ''} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<div role="none" class="dx-grid__cell__block"><button ${attr} data-testid="${testId}" class="dx-button w-6 aspect-square px-0.5 min-h-0" ${dataAttrs} ${disabled ? 'disabled' : ''} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button></div>`;
 };
 
 const addColumnButton = {

package/src/util/table-controls.ts

@@ -2,14 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-// Core types.
-import { accessoryHandlesPointerdownAttrs } from '@dxos/lit-grid';
+import { type DxGridPlane, accessoryHandlesPointerdownAttrs } from '@dxos/lit-grid';
 
 export type TableControl = 'checkbox' | 'switch';
 
 export type ControlData =
   | { type: 'checkbox'; rowIndex: number; header?: boolean }
-  | { type: 'switch'; colIndex: number; rowIndex: number };
+  | { type: 'switch'; colIndex: number; rowIndex: number; plane: DxGridPlane };
 
 type CommonRenderProps = {
   checked?: boolean;
@@ -25,8 +24,8 @@ export const CONTROL_IDENTIFIERS = {
 } as const;
 
 const BASE_CLASSES = {
-  checkbox: 'absolute inset-y-[.375rem] end-[.375rem] dx-checkbox',
-  switch: 'absolute inset-y-[.25rem] end-[.25rem] dx-checkbox--switch',
+  checkbox: 'dx-checkbox',
+  switch: 'dx-checkbox--switch',
 } as const;
 
 const renderAttributes = (data: Record<string, string>) => {
@@ -43,10 +42,10 @@ const renderInput = (
   preventToggle = false,
   testId: string,
 ) => {
-  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}" data-dx-grid-action="accessory"/>`;
+  return `<div role="none" class="dx-grid__cell__block"><input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}" data-dx-grid-action="accessory"/></div>`;
 };
 
-export const CheckboxStory = ({
+export const CheckboxComponent = ({
   rowIndex,
   header = false,
   checked = false,
@@ -61,11 +60,18 @@ export const CheckboxStory = ({
   return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, 'table-selection');
 };
 
-export const SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = false }: RenderSwitchProps): string => {
+export const SwitchComponent = ({
+  colIndex,
+  rowIndex,
+  plane,
+  checked = false,
+  disabled = false,
+}: RenderSwitchProps): string => {
   const attrs = {
     [CONTROL_IDENTIFIERS.switch]: '',
     'data-row-index': rowIndex.toString(),
     'data-col-index': colIndex.toString(),
+    'data-plane': plane,
     ...accessoryHandlesPointerdownAttrs,
   };
 
@@ -75,7 +81,7 @@ export const SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = fa
 export const tableControls = {
   checkbox: {
     attr: CONTROL_IDENTIFIERS.checkbox,
-    render: CheckboxStory,
+    render: CheckboxComponent,
     getData: (el: HTMLElement): Extract<ControlData, { type: 'checkbox' }> => ({
       type: 'checkbox',
       rowIndex: Number(el.getAttribute('data-row-index')),
@@ -84,11 +90,13 @@ export const tableControls = {
   },
   switch: {
     attr: CONTROL_IDENTIFIERS.switch,
-    render: SwitchStory,
+    render: SwitchComponent,
     getData: (el: HTMLElement): Extract<ControlData, { type: 'switch' }> => ({
       type: 'switch',
       rowIndex: Number(el.getAttribute('data-row-index')),
       colIndex: Number(el.getAttribute('data-col-index')),
+      // The plane round-trips through a DOM attribute string written by the switch renderer.
+      plane: (el.getAttribute('data-plane') as DxGridPlane | null) ?? 'grid',
     }),
   },
 } as const;

package/dist/lib/browser/chunk-J5LGTIGS.mjs

@@ -1,10 +0,0 @@
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-export {
-  __export
-};
-//# sourceMappingURL=chunk-J5LGTIGS.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}