@dxos/react-ui-table 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/src/model/table-model.ts

@@ -2,44 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, computed, effect, signal } from '@preact/signals-core';
 
-import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
-import { Ref } from '@dxos/echo';
+import { Obj, Ref } from '@dxos/echo';
 import {
   type FieldSortType,
   FormatEnum,
-  getValue,
-  setValue,
   type JsonProp,
-  getSnapshot,
+  type JsonSchemaType,
   getSchema,
+  getSnapshot,
+  getValue,
+  setValue,
   toEffectSchema,
 } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
 import { isLiveObject } from '@dxos/live-object';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type Label } from '@dxos/react-ui';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
-  type DxGridPlaneRange,
   type DxGridPlanePosition,
+  type DxGridPlaneRange,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import {
-  type ViewType,
-  type ViewProjection,
-  type PropertyType,
-  validateSchema,
-  type ValidationError,
-} from '@dxos/schema';
+import { type DataType, ProjectionModel, type PropertyType, type ValidationError, validateSchema } from '@dxos/schema';
 
-import { type SelectionMode, SelectionModel } from './selection-model';
-import { TableSorting } from './table-sorting';
+import { TableView } from '../types';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
+import { type SelectionMode, SelectionModel } from './selection-model';
+import { TableSorting } from './table-sorting';
+
 // Domain types for cell classification
 export type TableCellType = 'standard' | 'draft' | 'header';
 
@@ -57,7 +55,7 @@ export type TableRow = Record<JsonProp, any> & { id: string };
 
 export type TableRowAction = {
   id: string;
-  translationKey: string;
+  label: Label;
 };
 
 export type TableFeatures = {
@@ -73,14 +71,15 @@ const defaultFeatures: TableFeatures = {
 };
 
 export type TableModelProps<T extends TableRow = TableRow> = {
-  id?: string;
-  space?: Space;
-  view?: ViewType;
-  projection: ViewProjection;
+  view: DataType.View;
+  schema: JsonSchemaType;
+  projection?: ProjectionModel;
   features?: Partial<TableFeatures>;
   sorting?: FieldSortType[];
+  initialSelection?: string[];
   pinnedRows?: { top: number[]; bottom: number[] };
   rowActions?: TableRowAction[];
+  onResolveSchema?: (typename: string) => Promise<JsonSchemaType>;
   onInsertRow?: (data?: any) => boolean;
   onDeleteRows?: (index: number, obj: T[]) => void;
   onDeleteColumn?: (fieldId: string) => void;
@@ -90,10 +89,9 @@ export type TableModelProps<T extends TableRow = TableRow> = {
 };
 
 export class TableModel<T extends TableRow = TableRow> extends Resource {
-  private readonly _id: string | undefined;
-  private readonly _space: Space | undefined;
-  private readonly _view: ViewType | undefined;
-  private readonly _projection: ViewProjection;
+  private readonly _view: DataType.View;
+  private readonly _projection: ProjectionModel;
+  private _table?: TableView;
 
   private readonly _visibleRange = signal<DxGridPlaneRange>({
     start: { row: 0, col: 0 },
@@ -118,12 +116,12 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   private _columnMeta?: ReadonlySignal<DxGridAxisMeta>;
 
   constructor({
-    id,
-    space,
     view,
+    schema,
     projection,
     features = {},
     sorting = [],
+    initialSelection = [],
     pinnedRows = { top: [], bottom: [] },
     rowActions = [],
     onCellUpdate,
@@ -134,10 +132,8 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     onRowAction,
   }: TableModelProps<T>) {
     super();
-    this._id = id;
-    this._space = space;
     this._view = view;
-    this._projection = projection;
+    this._projection = projection ?? new ProjectionModel(schema, view.projection);
 
     // TODO(ZaymonFC): Use our more robust config merging module?
     this._features = { ...defaultFeatures, ...features };
@@ -147,13 +143,20 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       'Single selection is not compatible with editable tables.',
     );
 
-    this._sorting = new TableSorting(this._rows, this._view, projection);
+    this._sorting = new TableSorting(this._rows, this._view, this._projection);
 
     if (sorting.length > 0) {
       const [sort] = sorting;
       this._sorting.setSort(sort.fieldId, sort.direction);
     }
 
+    this._selection = new SelectionModel(
+      this._sorting.sortedRows,
+      this._features.selection.mode ?? 'multiple',
+      initialSelection,
+      () => this._onRowOrderChange?.(),
+    );
+
     this._pinnedRows = pinnedRows;
     this._rowActions = rowActions;
     this._onInsertRow = onInsertRow;
@@ -164,24 +167,25 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     this._onRowAction = onRowAction;
   }
 
-  public get id() {
-    return this._id;
+  public get id(): string {
+    return fullyQualifiedId(this._view);
   }
 
-  public get space() {
-    return this._space;
+  public get view(): DataType.View {
+    return this._view;
   }
 
-  public get view() {
-    return this._view;
+  public get table(): TableView {
+    invariant(this._table, 'Model not initialized');
+    return this._table;
   }
 
-  public get projection() {
+  public get projection(): ProjectionModel {
     return this._projection;
   }
 
   public get rows(): ReadonlySignal<T[]> {
-    return this._sorting.sortedRows;
+    return this.sorting.sortedRows;
   }
 
   public get features(): TableFeatures {
@@ -191,7 +195,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   /**
    * @reactive
    */
-  public get sorting(): TableSorting<T> | undefined {
+  public get sorting(): TableSorting<T> {
     return this._sorting;
   }
 
@@ -199,11 +203,11 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
    * Gets the row data at the specified display index.
    */
   public getRowAt(displayIndex: number): T | undefined {
-    if (displayIndex < 0 || displayIndex >= this._sorting.sortedRows.value.length) {
+    if (displayIndex < 0 || displayIndex >= this.sorting.sortedRows.value.length) {
       return undefined;
     }
 
-    return this._sorting.sortedRows.value[displayIndex];
+    return this.sorting.sortedRows.value[displayIndex];
   }
 
   public get pinnedRows(): NonNullable<TableModelProps<T>['pinnedRows']> {
@@ -221,7 +225,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   /** @reactive */
   public get isViewDirty(): boolean {
-    return this._sorting.isDirty;
+    return this.sorting.isDirty;
   }
 
   public get rowActions(): TableRowAction[] {
@@ -233,19 +237,20 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
 
   protected override async _open(): Promise<void> {
+    const presentation = this._view.presentation.target ?? (await this._view.presentation.load());
+    invariant(Obj.instanceOf(TableView, presentation));
+    this._table = presentation;
+
     this.initializeColumnMeta();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? 'multiple', () =>
-      this._onRowOrderChange?.(),
-    );
     await this._selection.open(this._ctx);
   }
 
   private initializeColumnMeta(): void {
     this._columnMeta = computed(() => {
-      const fields = this._view?.fields ?? [];
+      const fields = this._projection?.fields ?? [];
       const meta = Object.fromEntries(
-        fields.map((field, index: number) => [index, { size: field?.size ?? 256, resizeable: true }]),
+        fields.map((field, index: number) => [index, { size: this.table.sizes[field.path] ?? 256, resizeable: true }]),
       );
 
       return {
@@ -258,7 +263,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   private initializeEffects(): void {
     const rowOrderWatcher = effect(() => {
-      touch(this._sorting.sortedRows.value);
+      touch(this.sorting.sortedRows.value);
       this._onRowOrderChange?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -274,8 +279,8 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push(
           effect(() => {
-            const obj = this._sorting.sortedRows.value[row];
-            this._view?.fields.forEach((field) => touch(getValue(obj, field.path)));
+            const obj = this.sorting.sortedRows.value[row];
+            this._projection?.fields.forEach((field) => touch(getValue(obj, field.path)));
             this._onCellUpdate?.({ row, col: start.col, plane: 'grid' });
           }),
         );
@@ -329,7 +334,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     return validationErrors.some((error) => error.path === fieldPath);
   }
 
-  public getColumnCount = (): number => this._view?.fields.length ?? 0;
+  public getColumnCount = (): number => this._projection?.fields.length ?? 0;
 
   public insertRow = (): void => {
     const result = this._onInsertRow?.();
@@ -339,7 +344,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   };
 
   private createDraftRow(): void {
-    if (!this._view) {
+    if (!this._projection) {
       return;
     }
 
@@ -376,7 +381,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   }
 
   private validateDraftRowData(data: T): ValidationError[] {
-    const schema = toEffectSchema(this._projection.schema);
+    const schema = toEffectSchema(this._projection.baseSchema);
     return validateSchema(schema, data) || [];
   }
 
@@ -430,7 +435,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   public getCellData = (cell: DxGridPosition): any => {
     const { col, row, plane } = cell;
-    const fields = this._view?.fields ?? [];
+    const fields = this._projection?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return undefined;
     }
@@ -472,7 +477,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   };
 
   public validateCellData = async ({ col, row, plane }: DxGridPosition, value: any): Promise<ValidationResult> => {
-    const fields = this._view?.fields ?? [];
+    const fields = this._projection?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return { valid: false, error: 'Invalid column index' };
     }
@@ -494,6 +499,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       setValue(snapshot, field.path, transformedValue);
 
       const validationErrors = this.validateDraftRowData(snapshot);
+      // TODO(thure): These errors sometimes result in a useless message like “is missing” (what is missing?)
       if (validationErrors.length > 0) {
         const error = validationErrors.find((err) => err.path === field.path);
         if (error) {
@@ -525,7 +531,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   public setCellData = (cell: DxGridPosition, value: any): void => {
     const { col, row, plane } = cell;
-    const fields = this._view?.fields ?? [];
+    const fields = this._projection?.fields ?? [];
     if (col < 0 || col >= fields.length) {
       return;
     }
@@ -560,7 +566,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
    */
   public updateCellData({ col, row }: DxGridPlanePosition, update: (value: any) => any): void {
     const dataRow = this._sorting.getDataIndex(row);
-    const fields = this._view?.fields ?? [];
+    const fields = this._projection?.fields ?? [];
     const field = fields[col];
 
     const value = getValue(this._rows.value[dataRow], field.path);
@@ -600,11 +606,11 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
 
   public deleteColumn(fieldId: string): void {
-    if (!this._view) {
+    if (!this._projection) {
       return;
     }
 
-    const field = this._view?.fields.find((field) => field.id === fieldId);
+    const field = this._projection?.fields.find((field) => field.id === fieldId);
     if (field && this._onDeleteColumn) {
       this._onDeleteColumn(field.id);
     }
@@ -615,12 +621,12 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   //
 
   public setColumnWidth(columnIndex: number, width: number): void {
-    const fields = this._view?.fields ?? [];
+    const fields = this._projection?.fields ?? [];
     if (columnIndex < fields.length) {
       const newWidth = Math.max(0, width);
       const field = fields[columnIndex];
       if (field) {
-        field.size = newWidth;
+        this.table.sizes[field.path] = newWidth;
       }
     }
   }

package/src/model/table-presentation.test.ts

@@ -3,17 +3,18 @@
 //
 
 import { Schema } from 'effect';
-import { describe, expect, it, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj, Ref } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
 import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView, ViewProjection } from '@dxos/schema';
+import { createView } from '@dxos/schema';
+
+import { TableView } from '../types';
 
 import { TableModel, type TableModelProps } from './table-model';
 import { TablePresentation } from './table-presentation';
-import { TableType } from '../types';
 
 describe('TablePresentation', () => {
   describe('row reactivity', () => {
@@ -97,8 +98,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
-  const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = Obj.make(TableType, { view: Ref.make(view) });
-  return new TableModel({ id: table.id, view, projection, ...props });
+  const table = Obj.make(TableView, { sizes: {} });
+  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
+  return new TableModel({ view, schema: schema.jsonSchema, ...props });
 };

package/src/model/table-presentation.ts

@@ -6,7 +6,7 @@ import { signal } from '@preact/signals-core';
 import { isNotNullable } from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, getValue, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
@@ -16,12 +16,13 @@ import {
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+import { type FieldType, VIEW_FIELD_LIMIT } from '@dxos/schema';
 
-import { type SelectionMode } from './selection-model';
-import { type TableRow, type TableModel } from './table-model';
 import { tableButtons, tableControls } from '../util';
 
+import { type SelectionMode } from './selection-model';
+import { type TableModel, type TableRow } from './table-model';
+
 /**
  * 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
@@ -67,6 +68,9 @@ export class TablePresentation<T extends TableRow = TableRow> {
       case 'frozenRowsEnd':
         cells = this.getDraftRowCells(range);
         break;
+      case 'fixedEndStart':
+        cells = this.getDraftSelectCells(range);
+        break;
       case 'fixedEndEnd':
         cells = this.getDraftActionCells(range);
         break;
@@ -186,7 +190,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           .map(getLabel)
           .filter(isNotNullable)
           .map((title) => {
-            return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
+            return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
           })
           .join('');
 
@@ -199,7 +203,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
       }
     }
 
@@ -254,7 +258,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+    const fields = this.model.projection?.fields ?? [];
 
     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++) {
@@ -272,12 +276,13 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getDraftRowCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+    const fields = this.model.projection?.fields ?? [];
     const draftRows = this.model.draftRows.value;
 
     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];
         if (!field) {
           continue;
@@ -286,7 +291,6 @@ export class TablePresentation<T extends TableRow = TableRow> {
         this.createDataCell(cells, draftRow.data, field, col, row);
 
         if (this.model.hasDraftRowValidationError(row, field.path)) {
-          const cellIndex = toPlaneCellIndex({ col, row });
           const cellValue = cells[cellIndex];
           if (cellValue) {
             const existingClasses = cellValue.className || '';
@@ -294,6 +298,8 @@ export class TablePresentation<T extends TableRow = TableRow> {
             cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
           }
         }
+
+        cells[cellIndex].className += ' !bg-toolbarSurface';
       }
     }
 
@@ -302,9 +308,9 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+    const fields = this.model.projection?.fields ?? [];
     for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-      const { field, props } = this.getFieldProjection(fields[col].id);
+      const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
       const sorting = this.model.sorting?.sorting;
       const direction = sorting?.fieldId === field.id ? sorting.direction : undefined;
 
@@ -386,7 +392,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: this.model.features.schemaEditable
           ? tableButtons.addColumn.render({
-              disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+              disabled: (this.model.projection?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
         className: '!bg-toolbarSurface',
@@ -408,6 +414,22 @@ export class TablePresentation<T extends TableRow = TableRow> {
         value: '',
         readonly: true,
         accessoryHtml: tableButtons.saveDraftRow.render({ rowIndex: row, disabled }),
+        className: '!bg-toolbarSurface',
+      };
+    }
+
+    return cells;
+  }
+
+  private getDraftSelectCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.draftRows.value;
+
+    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+      cells[toPlaneCellIndex({ col: 0, row })] = {
+        value: '',
+        readonly: true,
+        className: '!bg-toolbarSurface',
       };
     }
 
@@ -427,7 +449,7 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
   switch (selectionMode) {
     case 'single':
       // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
-      return ['!bg-currentRelated hover:bg-hoverSurface', '!cursor-pointer'];
+      return ['!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer'];
     case 'multiple':
       return ['!bg-gridCellSelected'];
   }

package/src/model/table-sorting.ts

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, signal, type Signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortType } from '@dxos/echo-schema';
+import { type FieldSortType, FormatEnum, type SortDirectionType, TypeEnum, getValue } from '@dxos/echo-schema';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type { PropertyType, FieldType, ViewProjection, ViewType } from '@dxos/schema';
+import type { DataType, FieldType, ProjectionModel, PropertyType } from '@dxos/schema';
 
 import { type TableRow } from './table-model';
 
@@ -49,13 +49,13 @@ export class TableSorting<T extends TableRow> {
 
   constructor(
     rows: Signal<T[]>,
-    private readonly _view: ViewType | undefined,
-    private readonly _projection: ViewProjection,
+    private readonly _view: DataType.View,
+    private readonly _projection: ProjectionModel,
   ) {
     this._rows = rows;
     this._isDirty = computed(() => {
       const local = this._localSort.value;
-      const viewSort = this._view?.query.sort?.[0];
+      const viewSort = this._view.query.sort?.[0];
       if (local?.type === 'cleared') {
         return viewSort !== undefined;
       }
@@ -83,7 +83,7 @@ export class TableSorting<T extends TableRow> {
       return local.sort;
     }
 
-    return this._view?.query.sort?.[0];
+    return this._view.query.sort?.[0];
   }
 
   /**
@@ -106,7 +106,7 @@ export class TableSorting<T extends TableRow> {
   }
 
   public toggleSort(fieldId: string): void {
-    if (!this._view || !this.sorting || this.sorting.fieldId !== fieldId) {
+    if (!this.sorting || this.sorting.fieldId !== fieldId) {
       return;
     }
 
@@ -127,7 +127,7 @@ export class TableSorting<T extends TableRow> {
   }
 
   public save(): void {
-    if (this._view && this._localSort.value !== undefined) {
+    if (this._localSort.value !== undefined) {
       if (this._localSort.value.type === 'active') {
         this._view.query.sort = [this._localSort.value.sort];
       } else {
@@ -145,11 +145,11 @@ export class TableSorting<T extends TableRow> {
     return computed(() => {
       this._displayToDataIndex.clear();
       const sort = this.sorting;
-      if (!sort || !this._view) {
+      if (!sort) {
         return this._rows.value;
       }
 
-      const field = this._view.fields.find((f) => f.id === sort.fieldId);
+      const field = this._projection.fields.find((f) => f.id === sort.fieldId);
       if (!field) {
         return this._rows.value;
       }