@gp-grid/angular 0.10.3

package/src/lib/components/grid-body.template.ts

@@ -0,0 +1,93 @@
+export const GRID_BODY_TEMPLATE = `<div
+  #scrollContainer
+  style="height: 100%; overflow: auto; position: relative;"
+  (scroll)="onScroll()">
+    <div
+      style="position: relative; min-width: 100%"
+      [style.width.px]="innerWidth()"
+      [style.height.px]="sizerHeight()">
+      <div
+        class="gp-grid-rows-wrapper"
+        [style.width.px]="innerWidth()"
+        [style.transform]="wrapperTransform()">
+        @for (slot of slotsArray(); track slot.slotId) {
+          @if (slot.rowIndex >= 0) {
+            <div
+              [class]="rowClass(slot.rowIndex, slot.rowData)"
+              style="position: absolute; top: 0; left: 0"
+              [style.transform]="'translateY(' + slot.translateY + 'px)'"
+              [style.width.px]="innerWidth()"
+              [style.height.px]="rowHeight()"
+            >
+              @for (entry of visibleColumnWithIndices(); track entry.originalIndex; let i = $index) {
+                @let editing = isEditing(slot.rowIndex, entry.originalIndex);
+                <div
+                  [class]="cellClass(slot.rowIndex, entry.originalIndex, entry.column, slot.rowData)"
+                  style="position: absolute; top: 0;"
+                  [attr.data-row-index]="slot.rowIndex"
+                  [attr.data-col-index]="entry.originalIndex"
+                  [style.left.px]="columnPositions()[i]"
+                  [style.width.px]="columnWidths()[i]"
+                  [style.height.px]="rowHeight()"
+                  (pointerdown)="cellPointerDown.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex, event: $event })"
+                  (mouseenter)="cellPointerEnter.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })"
+                  (mouseleave)="cellPointerLeave.emit()"
+                  (dblclick)="cellDoubleClick.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })"
+                >
+                  @if (editing) {
+                    @let etpl = editTemplate(entry.column);
+                    @if (etpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="etpl"
+                        [ngTemplateOutletContext]="{ $implicit: editParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }">
+                      </ng-container>
+                    } @else {
+                      <input
+                        class="gp-grid-edit-input"
+                        type="text"
+                        [value]="editInitialValue()"
+                        autofocus
+                        (focus)="onEditFocus($event)"
+                        (input)="editValueChange.emit(asInput($event).value)"
+                        (keydown)="onEditKeyDown($event)"
+                        (blur)="editCommit.emit()" />
+                    }
+                  } @else {
+                    @let tpl = cellTemplate(entry.column);
+                    @if (tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: cellParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }">
+                      </ng-container>
+                    } @else {
+                      {{ cellDisplay(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }}
+                    }
+                  }
+                </div>
+              }
+            </div>
+          }
+        }
+        @if (fillHandlePosition(); as fhp) {
+          @if (editingCell() === null) {
+            <div
+              class="gp-grid-fill-handle"
+              [style.top.px]="fhp.top"
+              [style.left.px]="fhp.left"
+              (pointerdown)="fillHandlePointerDown.emit({ event: $event })">
+            </div>
+          }
+        }
+        @if (rowDropIndicator(); as rd) {
+          <div
+            class="gp-grid-row-drop-indicator"
+            [style.transform]="'translateY(' + rd.dropIndicatorY + 'px)'"
+            [style.width.px]="rowDropIndicatorWidth()"></div>
+        }
+      </div>
+    </div>
+    @if (totalRows() === 0) {
+      <div class="gp-grid-empty">No data to display</div>
+    }
+  </div>
+`;

package/src/lib/components/grid-header.component.ts

@@ -0,0 +1,206 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  output,
+  computed,
+  TemplateRef,
+} from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import type {
+  HeaderData,
+  VisibleColumnInfo,
+  ColumnDefinition,
+  HeaderRendererParams,
+  SortDirection,
+} from '@gp-grid/core';
+
+export type HeaderRendererTemplate = TemplateRef<{ $implicit: HeaderRendererParams }>;
+
+export interface HeaderSortEvent {
+  colId: string;
+  direction: SortDirection | null;
+  addToExisting: boolean;
+}
+
+export interface HeaderPointerDownEvent {
+  colIndex: number;
+  colWidth: number;
+  colHeight: number;
+  event: PointerEvent;
+}
+
+export interface FilterPointerDownEvent {
+  colIndex: number;
+  anchorEl: HTMLElement;
+}
+
+export interface ResizePointerDownEvent {
+  colIndex: number;
+  colWidth: number;
+  event: PointerEvent;
+}
+
+const TEMPLATE = `
+  <div
+    class="gp-grid-header"
+    [class.gp-grid-header--loading]="isLoading()"
+    [style.height.px]="headerHeight()">
+    <div
+      style="position: absolute; top: 0; left: 0;"
+      [style.transform]="transformStyle()"
+      [style.width.px]="innerWidth()"
+      [style.height.px]="headerHeight()">
+      @for (entry of visibleColumnsWithIndices(); track entry.originalIndex; let i = $index) {
+        @let colW = columnWidths()[i] ?? 0;
+        @let headerData = headers().get(entry.originalIndex);
+        @let tpl = headerTemplate(entry.column);
+        <div
+          class="gp-grid-header-cell"
+          [attr.data-col-index]="entry.originalIndex"
+          [style.left.px]="columnPositions()[i]"
+          [style.width.px]="colW"
+          [style.height.px]="headerHeight()"
+          (pointerdown)="onHeaderPointerDown($event, entry.originalIndex, colW)">
+          @if (tpl) {
+            <ng-container
+              [ngTemplateOutlet]="tpl"
+              [ngTemplateOutletContext]="{ $implicit: headerParams(entry.column, entry.originalIndex, headerData) }">
+            </ng-container>
+          } @else {
+            <span class="gp-grid-header-text">{{ entry.column.headerName ?? entry.column.field }}</span>
+            <span class="gp-grid-header-icons">
+              @if (sortingEnabled() && entry.column.sortable !== false) {
+                <span class="gp-grid-sort-arrows">
+                  <span class="gp-grid-sort-arrows-stack">
+                    <svg
+                      [class]="'gp-grid-sort-arrow-up' + (headerData?.sortDirection === 'asc' ? ' active' : '')"
+                      width="8" height="6" viewBox="0 0 8 6">
+                      <path d="M4 0L8 6H0L4 0Z" fill="currentColor"/>
+                    </svg>
+                    <svg
+                      [class]="'gp-grid-sort-arrow-down' + (headerData?.sortDirection === 'desc' ? ' active' : '')"
+                      width="8" height="6" viewBox="0 0 8 6">
+                      <path d="M4 6L0 0H8L4 6Z" fill="currentColor"/>
+                    </svg>
+                  </span>
+                  @if ((headerData?.sortIndex ?? 0) > 0) {
+                    <span class="gp-grid-sort-index">{{ headerData?.sortIndex }}</span>
+                  }
+                </span>
+              }
+              @if (entry.column.filterable) {
+                <span
+                  [class]="'gp-grid-filter-icon' + (headerData?.hasFilter ? ' active' : '')"
+                  (pointerdown)="onFilterPointerDown($event, entry.originalIndex)">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M4 4h16l-6 8v5l-4 2v-7L4 4z"/>
+                  </svg>
+                </span>
+              }
+            </span>
+          }
+          @if (entry.column.resizable !== false) {
+            <div
+              class="gp-grid-header-resize-handle"
+              (pointerdown)="onResizePointerDown($event, entry.originalIndex, colW)">
+            </div>
+          }
+        </div>
+      }
+    </div>
+  </div>
+`;
+
+@Component({
+  selector: 'gp-grid-header',
+  standalone: true,
+  imports: [NgTemplateOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: TEMPLATE,
+})
+export class GridHeaderComponent {
+  headerHeight = input.required<number>();
+  scrollLeft = input.required<number>();
+  contentWidth = input.required<number>();
+  totalWidth = input.required<number>();
+  isLoading = input.required<boolean>();
+  visibleColumnsWithIndices = input.required<VisibleColumnInfo[]>();
+  columnPositions = input.required<number[]>();
+  columnWidths = input.required<number[]>();
+  headers = input.required<Map<number, HeaderData>>();
+  sortingEnabled = input<boolean>(true);
+  headerRenderers = input<Record<string, HeaderRendererTemplate>>({});
+  globalHeaderRenderer = input<HeaderRendererTemplate | null>(null);
+
+  headerPointerDown = output<HeaderPointerDownEvent>();
+  filterPointerDown = output<FilterPointerDownEvent>();
+  resizePointerDown = output<ResizePointerDownEvent>();
+  headerSort = output<HeaderSortEvent>();
+  headerFilterOpen = output<{ colIndex: number; anchorEl: HTMLElement }>();
+
+  protected innerWidth = computed(() =>
+    Math.max(this.contentWidth(), this.totalWidth())
+  );
+
+  protected transformStyle = computed(() =>
+    `translateX(${-this.scrollLeft()}px)`
+  );
+
+  protected onHeaderPointerDown(event: PointerEvent, colIndex: number, colWidth: number): void {
+    this.headerPointerDown.emit({ colIndex, colWidth, colHeight: this.headerHeight(), event });
+  }
+
+  protected onFilterPointerDown(event: PointerEvent, colIndex: number): void {
+    event.stopPropagation();
+    const cell = (event.currentTarget as HTMLElement).closest('.gp-grid-header-cell') as HTMLElement | null;
+    if (cell) {
+      this.filterPointerDown.emit({ colIndex, anchorEl: cell });
+    }
+  }
+
+  protected onResizePointerDown(event: PointerEvent, colIndex: number, colWidth: number): void {
+    event.stopPropagation();
+    this.resizePointerDown.emit({ colIndex, colWidth, event });
+  }
+
+  protected headerTemplate(column: ColumnDefinition): HeaderRendererTemplate | null {
+    const renderer: unknown = column.headerRenderer;
+    if (renderer instanceof TemplateRef) {
+      return renderer as HeaderRendererTemplate;
+    }
+    if (typeof renderer === 'string') {
+      const registered = this.headerRenderers()[renderer];
+      if (registered) return registered;
+    }
+    return this.globalHeaderRenderer();
+  }
+
+  protected headerParams(
+    column: ColumnDefinition,
+    colIndex: number,
+    headerData: HeaderData | undefined,
+  ): HeaderRendererParams {
+    const sortable = this.sortingEnabled() && column.sortable !== false;
+    const filterable = column.filterable === true;
+    return {
+      column,
+      colIndex,
+      sortDirection: headerData?.sortDirection,
+      sortIndex: headerData?.sortIndex,
+      sortable,
+      filterable,
+      hasFilter: headerData?.hasFilter ?? false,
+      onSort: (direction, addToExisting) => {
+        if (sortable) {
+          const colId = column.colId ?? column.field;
+          this.headerSort.emit({ colId, direction, addToExisting });
+        }
+      },
+      onFilterClick: () => {
+        // The anchor is looked up via data-col-index — same pattern as the default filter icon.
+        // No-op here; consumers using a custom header template should use the exposed callback.
+      },
+    };
+  }
+}

package/src/lib/components/grid-overlays.component.ts

@@ -0,0 +1,140 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import type {
+  CellValue,
+  ColumnDefinition,
+  ColumnFilterModel,
+  DragState,
+  VisibleColumnInfo,
+} from '@gp-grid/core';
+import { FilterPopupComponent } from './filter-popup.component';
+
+export interface ActiveFilterPopup {
+  colIndex: number;
+  column: ColumnDefinition;
+  distinctValues: CellValue[];
+  currentFilter?: ColumnFilterModel;
+  anchorEl: HTMLElement | null;
+}
+
+const TEMPLATE = `
+  @if (filterPopup(); as fp) {
+    <gp-grid-filter-popup
+      [column]="fp.column"
+      [colIndex]="fp.colIndex"
+      [anchorEl]="fp.anchorEl!"
+      [distinctValues]="fp.distinctValues"
+      [currentFilter]="fp.currentFilter"
+      (apply)="filterApply.emit($event)"
+      (close)="filterClose.emit()"
+    />
+  }
+  @if (isResizing()) {
+    <div class="gp-grid-column-resize-line" [style.left.px]="resizeLineLeft()"></div>
+  }
+  @if (isLoading()) {
+    <div
+      style="position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none;"
+      [style.top.px]="headerHeight()">
+      <div class="gp-grid-loading-overlay"></div>
+      <div class="gp-grid-loading">
+        <div class="gp-grid-loading-spinner"></div>
+      </div>
+    </div>
+  }
+  @if (errorMessage(); as msg) {
+    <div class="gp-grid-error">Error: {{ msg }}</div>
+  }
+  @if (columnMove(); as cm) {
+    <div
+      class="gp-grid-column-move-ghost"
+      [style.left.px]="cm.currentX - cm.ghostWidth / 2"
+      [style.top.px]="cm.currentY - cm.ghostHeight / 2"
+      [style.width.px]="cm.ghostWidth"
+      [style.height.px]="cm.ghostHeight">
+      {{ columnMoveGhostText() }}
+    </div>
+    @if (columnMoveDropLeft() !== null) {
+      <div
+        class="gp-grid-column-drop-indicator"
+        [style.left.px]="columnMoveDropLeft()"
+        [style.height.px]="headerHeight()"></div>
+    }
+  }
+  @if (rowDragGhost(); as rd) {
+    <div
+      class="gp-grid-row-drag-ghost"
+      [style.left.px]="rd.currentX + 12"
+      [style.top.px]="rd.currentY - rowHeight() / 2"
+      [style.width.px]="rowDragGhostWidth()"
+      [style.height.px]="rowHeight()"></div>
+  }
+`;
+
+@Component({
+  selector: 'gp-grid-overlays',
+  standalone: true,
+  imports: [FilterPopupComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: TEMPLATE,
+})
+export class GridOverlaysComponent {
+  filterPopup = input<ActiveFilterPopup | null>(null);
+  isLoading = input<boolean>(false);
+  errorMessage = input<string | null>(null);
+  headerHeight = input.required<number>();
+  rowHeight = input.required<number>();
+  dragState = input.required<DragState>();
+  visibleColumnWithIndices = input.required<VisibleColumnInfo[]>();
+  columnPositions = input.required<number[]>();
+  scrollLeft = input.required<number>();
+  effectiveColumns = input.required<ColumnDefinition[]>();
+  totalWidth = input.required<number>();
+
+  filterApply = output<{ colId: string; filter: ColumnFilterModel | null }>();
+  filterClose = output<void>();
+
+  protected isResizing = computed(() => this.dragState().dragType === 'column-resize');
+
+  protected resizeLineLeft = computed<number>(() => {
+    const cr = this.dragState().columnResize;
+    if (cr === null) return 0;
+    const visibleIndex = this.visibleColumnWithIndices().findIndex(
+      v => v.originalIndex === cr.colIndex
+    );
+    if (visibleIndex === -1) return 0;
+    const positions = this.columnPositions();
+    return (positions[visibleIndex] ?? 0) + cr.currentWidth - this.scrollLeft();
+  });
+
+  protected columnMove = computed(() => {
+    if (this.dragState().dragType !== 'column-move') return null;
+    return this.dragState().columnMove;
+  });
+
+  protected rowDragGhost = computed(() => {
+    if (this.dragState().dragType !== 'row-drag') return null;
+    return this.dragState().rowDrag;
+  });
+
+  protected columnMoveGhostText = computed<string>(() => {
+    const cm = this.columnMove();
+    if (cm === null) return '';
+    const column = this.effectiveColumns()[cm.sourceColIndex];
+    return column?.headerName ?? column?.field ?? '';
+  });
+
+  protected columnMoveDropLeft = computed<number | null>(() => {
+    const cm = this.columnMove();
+    if (cm === null || cm.dropTargetIndex === null) return null;
+    const positions = this.columnPositions();
+    return (positions[cm.dropTargetIndex] ?? 0) - this.scrollLeft();
+  });
+
+  protected rowDragGhostWidth = computed<number>(() => Math.min(300, this.totalWidth()));
+}

package/src/lib/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./grid-header.component";
+export * from "./grid-body.component";
+export * from "./filter-popup.component";
+export * from "./grid-overlays.component";

package/src/lib/createGridData.ts

@@ -0,0 +1,82 @@
+import { createMutableClientDataSource } from "@gp-grid/core";
+import type {
+  RowId,
+  CellValue,
+  MutableDataSource,
+  ParallelSortOptions,
+} from "@gp-grid/core";
+
+export interface CreateGridDataOptions<TData> {
+  /** Function to extract a unique ID from each row. Required. */
+  getRowId: (row: TData) => RowId;
+  /** Debounce time for batching transactions in ms. Default 50. */
+  debounceMs?: number;
+  /** Use Web Worker for sorting large datasets (default: true) */
+  useWorker?: boolean;
+  /** Options for parallel sorting (only used when useWorker is true) */
+  parallelSort?: ParallelSortOptions | false;
+}
+
+export interface GridDataApi<TData> {
+  /** The data source to pass to <gp-grid [dataSource]="dataSource" />. */
+  dataSource: MutableDataSource<TData>;
+  /** Update a single row by ID with partial data. */
+  updateRow: (id: RowId, data: Partial<TData>) => void;
+  /** Add rows to the data source. */
+  addRows: (rows: TData[]) => void;
+  /** Remove rows by ID. */
+  removeRows: (ids: RowId[]) => void;
+  /** Update a single cell value. */
+  updateCell: (id: RowId, field: string, value: CellValue) => void;
+  /** Clear all data from the data source. */
+  clear: () => void;
+  /** Get a row by its ID. */
+  getRowById: (id: RowId) => TData | undefined;
+  /** Get the current total row count. */
+  getTotalRowCount: () => number;
+  /** Force immediate processing of queued transactions. */
+  flushTransactions: () => Promise<void>;
+}
+
+/**
+ * Angular helper for efficient grid data mutations.
+ *
+ * Wraps `createMutableClientDataSource` to provide a simple API for
+ * updating grid data without triggering full pipeline rebuilds.
+ *
+ * @example
+ * ```ts
+ * private readonly grid = createGridData(initialRows, {
+ *   getRowId: (row) => row.id,
+ * });
+ *
+ * // Template:
+ * // <gp-grid [dataSource]="grid.dataSource" [columns]="columns" />
+ *
+ * // Update a row imperatively:
+ * this.grid.updateRow(42, { name: 'New name' });
+ * ```
+ */
+export const createGridData = <TData = unknown>(
+  initialData: TData[],
+  options: CreateGridDataOptions<TData>,
+): GridDataApi<TData> => {
+  const ds = createMutableClientDataSource<TData>(initialData, {
+    getRowId: options.getRowId,
+    debounceMs: options.debounceMs,
+    useWorker: options.useWorker,
+    parallelSort: options.parallelSort,
+  });
+
+  return {
+    dataSource: ds,
+    updateRow: ds.updateRow,
+    addRows: ds.addRows,
+    removeRows: ds.removeRows,
+    updateCell: ds.updateCell,
+    clear: ds.clear,
+    getRowById: ds.getRowById,
+    getTotalRowCount: ds.getTotalRowCount,
+    flushTransactions: ds.flushTransactions,
+  };
+};

package/src/lib/gp-grid-bindings.ts

@@ -0,0 +1,150 @@
+import {
+  AutoScrollDriver,
+  DataSourceOwner,
+  GridCore,
+  InputEventAdapter,
+  PendingRowDragController,
+  applyBatchInstructions,
+  scrollCellIntoView,
+} from '@gp-grid/core';
+import type {
+  ColumnDefinition,
+  DataSource,
+  HighlightingOptions,
+} from '@gp-grid/core';
+import type { GpGridViewModel } from './gp-grid-view-model';
+
+export interface GpGridBindingsDeps {
+  vm: GpGridViewModel;
+  isBrowser: boolean;
+  getContainer: () => HTMLElement | null;
+  getBody: () => HTMLElement | null;
+  getRowHeight: () => number;
+  getHeaderHeight: () => number;
+}
+
+/**
+ * Owns the core grid instance plus every framework-agnostic adapter the
+ * Angular component drives (auto-scroll, pending row-drag, input events,
+ * data source ownership). The component becomes a thin shell that holds
+ * lifecycle + Angular template bindings and delegates state work here.
+ */
+export class GpGridBindings<TData = unknown> {
+  readonly dataSourceOwner = new DataSourceOwner<TData>();
+  readonly autoScroll: AutoScrollDriver;
+  readonly pendingRowDrag: PendingRowDragController;
+  readonly input: InputEventAdapter<TData>;
+
+  coreRef: GridCore<TData> | null = null;
+  private unsubscribe: (() => void) | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+
+  constructor(private readonly deps: GpGridBindingsDeps) {
+    this.autoScroll = new AutoScrollDriver(
+      () => this.deps.getBody(),
+      (event) => this.input.dragMove(event),
+    );
+    this.pendingRowDrag = new PendingRowDragController({
+      getCore: () => this.coreRef,
+      getContainer: this.deps.getContainer,
+      isBrowser: this.deps.isBrowser,
+      onDragConfirmed: (state) => this.deps.vm.dragState.set(state),
+    });
+    this.input = new InputEventAdapter<TData>({
+      getCore: () => this.coreRef,
+      getBodyEl: this.deps.getBody,
+      autoScroll: this.autoScroll,
+      pendingRowDrag: this.pendingRowDrag,
+      onDragStateChange: (state) => this.deps.vm.dragState.set(state),
+    });
+  }
+
+  attach(core: GridCore<TData>): void {
+    this.coreRef = core;
+    this.unsubscribe = core.onBatchInstruction((instructions) => {
+      const vm = this.deps.vm;
+      const maps = applyBatchInstructions(
+        instructions,
+        vm.slots(),
+        vm.headerState(),
+        vm.batchSetters,
+      );
+      vm.slots.set(new Map(maps.slots));
+      vm.headerState.set(new Map(maps.headers));
+    });
+
+    core.initialize();
+    core.input.updateDeps({
+      getHeaderHeight: this.deps.getHeaderHeight,
+      getRowHeight: this.deps.getRowHeight,
+      getColumnPositions: () => this.deps.vm.columnPositions(),
+      getColumnCount: () => this.deps.vm.visibleColumnWithIndices().length,
+      getOriginalColumnIndex: (visibleIndex) =>
+        this.deps.vm.visibleColumnWithIndices()[visibleIndex]?.originalIndex ?? visibleIndex,
+    });
+  }
+
+  observeViewport(container: HTMLElement, bodyEl: HTMLElement): void {
+    this.deps.vm.viewportWidth.set(container.clientWidth);
+    this.resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) this.deps.vm.viewportWidth.set(entry.contentRect.width);
+    });
+    this.resizeObserver.observe(container);
+    this.coreRef?.setViewport(0, 0, container.clientWidth, bodyEl.clientHeight);
+  }
+
+  destroy(): void {
+    this.autoScroll.stop();
+    this.pendingRowDrag.cancel();
+    this.pendingRowDrag.releaseLocks();
+    this.unsubscribe?.();
+    this.resizeObserver?.disconnect();
+    this.coreRef?.destroy();
+    this.dataSourceOwner.destroy();
+    this.coreRef = null;
+  }
+
+  syncHighlighting(opts: HighlightingOptions | null): void {
+    const core = this.coreRef;
+    if (core?.highlight && opts) {
+      core.highlight.updateOptions(opts as HighlightingOptions<TData>);
+    }
+  }
+
+  syncColumns(cols: ColumnDefinition[]): void {
+    const core = this.coreRef;
+    if (core === null) return;
+    if (this.dataSourceOwner.syncColumns(cols)) core.setColumns(cols);
+  }
+
+  syncRows(rows: TData[], dataSource: DataSource<TData> | null): void {
+    const core = this.coreRef;
+    if (core === null) return;
+    const newDs = this.dataSourceOwner.syncRows(rows, dataSource);
+    if (newDs !== null) core.setDataSource(newDs);
+  }
+
+  applyPendingScroll(): void {
+    const top = this.deps.vm.pendingScrollTop();
+    const body = this.deps.getBody();
+    if (top !== null && body) {
+      body.scrollTop = top;
+      this.deps.vm.pendingScrollTop.set(null);
+    }
+  }
+
+  scrollToRow(row: number): void {
+    const core = this.coreRef;
+    const body = this.deps.getBody();
+    if (core === null || body === null) return;
+    scrollCellIntoView(
+      core,
+      body,
+      row,
+      this.deps.getRowHeight(),
+      this.deps.vm.slots(),
+      this.deps.vm.rowsWrapperOffset(),
+    );
+  }
+}