@coreui/data-grid 0.1.0-rc.0 → 0.2.0-rc.0

package/src/data-grid.ts

@@ -5,26 +5,34 @@
  * --------------------------------------------------------------------------
  */
 
-import type { Table, TableState } from '@tanstack/table-core'
+import { batch } from '@tanstack/store'
 import BaseComponent from './base-component.js'
+import type { ComponentConfig } from './util/config.js'
 import EventHandler from './dom/event-handler.js'
 import {
   createActiveCellManager, resolveNavigation, type ActiveCell, type ActiveCellContext, type ActiveCellManager
 } from './engine/active-cell'
 import { createDataSource, type GridDataSource } from './engine/data-source'
+import { copyCellSelection, type ClipboardColumn } from './util/clipboard'
+import { printGrid, type PrintColumn } from './util/print'
+import {
+  createColumnDragController, createRowDragController, type DragController
+} from './util/drag'
 import { createScheduler, type Scheduler } from './engine/scheduler'
-import { createGridTable } from './engine/table'
+import { createGridTable, subscribeToTableState } from './engine/table'
 import { createGridVirtualizer, type GridVirtualizer } from './engine/virtualizer'
 import {
-  DEFAULT_COLUMN_MENU_ICON, DEFAULT_FILTER_ICON, DEFAULT_HIDE_COLUMN_ICON, DEFAULT_MOVE_LEFT_ICON, DEFAULT_MOVE_RIGHT_ICON,
-  DEFAULT_PIN_LEFT_ICON, DEFAULT_PIN_RIGHT_ICON, DEFAULT_SORT_ASCENDING_ICON, DEFAULT_SORT_DESCENDING_ICON,
+  DEFAULT_COLUMN_MENU_ICON, DEFAULT_FILTER_ICON, DEFAULT_HIDE_COLUMN_ICON, DEFAULT_MOVE_END_ICON, DEFAULT_MOVE_START_ICON,
+  DEFAULT_PIN_END_ICON, DEFAULT_PIN_START_ICON, DEFAULT_ROW_HANDLE_ICON, DEFAULT_SORT_ASCENDING_ICON,
+  DEFAULT_SORT_DESCENDING_ICON,
   DEFAULT_SORT_NEUTRAL_ICON, DEFAULT_TOOLBAR_COLUMNS_ICON, DEFAULT_TOOLBAR_EXPORT_ICON,
-  DEFAULT_TOOLBAR_REDO_ICON, DEFAULT_TOOLBAR_UNDO_ICON, DEFAULT_UNPIN_ICON
+  DEFAULT_TOOLBAR_PRINT_ICON, DEFAULT_TOOLBAR_REDO_ICON, DEFAULT_TOOLBAR_UNDO_ICON, DEFAULT_UNPIN_ICON
 } from './icons'
 import { DEFAULT_LABELS, interpolate } from './labels'
 import type {
  DataGridColumn, DataGridColumnFilterValue, DataGridEditableOptions, DataGridEditor, DataGridEditorContext,
- DataGridItem, DataGridLabels, DataGridMenuAction, DataGridOptions, DataGridSlot, DataGridSlotContext, DataGridState
+ DataGridFeatures, DataGridItem, DataGridLabels, DataGridMenuAction, DataGridOptions, DataGridSlot,
+ DataGridSlotContext, DataGridState, DataGridTable, DataGridTableState, TableFeatures
 } from './types'
 import { createBody, type GridBody } from './ui/body'
 import { createBuiltInEditor } from './ui/editor'
@@ -41,7 +49,6 @@ import {
  downloadCsv, exportCsv, type CsvDownloadOptions, type CsvOptions
 } from './util/csv'
 import { debounce } from './util/debounce'
-import { defineJQueryPlugin } from './util/index.js'
 import { DefaultAllowlist, sanitizeHtml, SVGAllowlist } from './util/sanitizer.js'
 
 /**
@@ -62,7 +69,9 @@ const EVENT_EDIT_COMMIT = `editCommit${EVENT_KEY}`
 const EVENT_EDIT_START = `editStart${EVENT_KEY}`
 const EVENT_FILTER_CHANGE = `filterChange${EVENT_KEY}`
 const EVENT_INPUT = `input${EVENT_KEY}`
+const EVENT_CELL_COPY = `cellCopy${EVENT_KEY}`
 const EVENT_ORDER_CHANGE = `orderChange${EVENT_KEY}`
+const EVENT_ROW_ORDER_CHANGE = `rowOrderChange${EVENT_KEY}`
 const EVENT_PAGINATION_CHANGE = `paginationChange${EVENT_KEY}`
 const EVENT_PINNING_CHANGE = `pinningChange${EVENT_KEY}`
 const EVENT_SELECTION_CHANGE = `selectionChange${EVENT_KEY}`
@@ -74,27 +83,23 @@ const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
 const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`
 const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
 
-const EVENT_DRAGEND = `dragend${EVENT_KEY}`
-const EVENT_DRAGLEAVE = `dragleave${EVENT_KEY}`
-const EVENT_DRAGOVER = `dragover${EVENT_KEY}`
-const EVENT_DRAGSTART = `dragstart${EVENT_KEY}`
-const EVENT_DROP = `drop${EVENT_KEY}`
 const EVENT_MOUSEDOWN = `mousedown${EVENT_KEY}`
+const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`
 const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`
 const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`
 
+const CLASS_NAME_AUTO_ROW_HEIGHT = 'data-grid-auto-row-height'
 const CLASS_NAME_DATA_GRID = 'data-grid'
-const CLASS_NAME_DRAGGING = 'data-grid-dragging'
 const CLASS_NAME_EDITOR_POPUP = 'data-grid-editor-popup'
-const CLASS_NAME_DROP_TARGET = 'data-grid-drop-target'
+const CLASS_NAME_LOADING_MORE = 'data-grid-loading-more'
 const CLASS_NAME_PAGINATION_TOP = 'data-grid-pagination-top'
 const CLASS_NAME_PINNED = 'data-grid-pinned'
 const CLASS_NAME_RESIZABLE = 'data-grid-resizable'
 const CLASS_NAME_TABLE = 'table'
 const CLASS_NAME_VIEWPORT = 'data-grid-viewport'
 
+const SELECTOR_BODY_CELL = 'tbody td[data-coreui-column]'
 const SELECTOR_COLUMN_FILTER = 'input[data-coreui-column-filter]'
-const SELECTOR_DRAGGABLE = 'th[data-coreui-draggable]'
 const SELECTOR_MENU_BUTTON = 'button[data-coreui-menu]'
 const SELECTOR_FILTER_BUTTON = 'button[data-coreui-filter]'
 const SELECTOR_GLOBAL_FILTER = 'input[data-coreui-global-filter]'
@@ -106,6 +111,7 @@ const SELECTOR_SELECT_ALL = 'input[data-coreui-select-all]'
 const SELECTOR_SORT_BUTTON = '.data-grid-sort-button'
 const SELECTOR_TOOLBAR_COLUMNS = 'button[data-coreui-toolbar-columns]'
 const SELECTOR_TOOLBAR_EXPORT = 'button[data-coreui-toolbar-export]'
+const SELECTOR_TOOLBAR_PRINT = 'button[data-coreui-toolbar-print]'
 const SELECTOR_TOOLBAR_REDO = 'button[data-coreui-toolbar-redo]'
 const SELECTOR_TOOLBAR_UNDO = 'button[data-coreui-toolbar-undo]'
 
@@ -128,6 +134,13 @@ const STATE_STORAGE_PREFIX = 'coreui-data-grid:'
 const STATE_AUTOSAVE_DEBOUNCE_MS = 250
 const HISTORY_LIMIT = 100
 
+const CELL_SELECTION_DIRECTIONS: Record<string, 'up' | 'down' | 'left' | 'right' | undefined> = {
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+  ArrowUp: 'up'
+}
+
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]'
 
 const applyTabIndex = (cellElement: HTMLElement, isTabbable: boolean) => {
@@ -138,7 +151,9 @@ const applyTabIndex = (cellElement: HTMLElement, isTabbable: boolean) => {
 }
 
 const Default: DataGridOptions = {
+  autoRowHeight: false,
   cellNavigation: false,
+  cellSelection: false,
   columnFilters: false,
   columnMenu: false,
   columnMenuIcon: DEFAULT_COLUMN_MENU_ICON,
@@ -150,20 +165,25 @@ const Default: DataGridOptions = {
   dataProvider: null,
   editing: false,
   empty: 'No items found',
+  features: null,
   filterIcon: DEFAULT_FILTER_ICON,
   globalFilter: false,
   hideColumnIcon: DEFAULT_HIDE_COLUMN_ICON,
   history: false,
+  infiniteScroll: false,
   itemKey: null,
   items: [],
   labels: {},
-  moveLeftIcon: DEFAULT_MOVE_LEFT_ICON,
-  moveRightIcon: DEFAULT_MOVE_RIGHT_ICON,
+  moveEndIcon: DEFAULT_MOVE_END_ICON,
+  moveStartIcon: DEFAULT_MOVE_START_ICON,
   overscan: 10,
   pagination: false,
-  pinLeftIcon: DEFAULT_PIN_LEFT_ICON,
-  pinRightIcon: DEFAULT_PIN_RIGHT_ICON,
+  pinEndIcon: DEFAULT_PIN_END_ICON,
+  pinStartIcon: DEFAULT_PIN_START_ICON,
+  printTitle: null,
+  rowHandleIcon: DEFAULT_ROW_HANDLE_ICON,
   rowHeight: 44,
+  rowOrder: false,
   rowSelection: false,
   sanitize: true,
   sanitizeFn: null,
@@ -177,6 +197,7 @@ const Default: DataGridOptions = {
   toolbar: false,
   toolbarColumnsIcon: DEFAULT_TOOLBAR_COLUMNS_ICON,
   toolbarExportIcon: DEFAULT_TOOLBAR_EXPORT_ICON,
+  toolbarPrintIcon: DEFAULT_TOOLBAR_PRINT_ICON,
   toolbarRedoIcon: DEFAULT_TOOLBAR_REDO_ICON,
   toolbarUndoIcon: DEFAULT_TOOLBAR_UNDO_ICON,
   unpinIcon: DEFAULT_UNPIN_ICON,
@@ -184,7 +205,9 @@ const Default: DataGridOptions = {
 }
 
 const DefaultType = {
+  autoRowHeight: 'boolean',
   cellNavigation: 'boolean',
+  cellSelection: 'boolean',
   columnFilters: 'boolean',
   columnMenu: '(boolean|function)',
   columnMenuIcon: 'string',
@@ -196,20 +219,25 @@ const DefaultType = {
   dataProvider: '(function|null)',
   editing: 'boolean',
   empty: '(string|function)',
+  features: '(object|null)',
   filterIcon: 'string',
   globalFilter: 'boolean',
   hideColumnIcon: 'string',
   history: 'boolean',
+  infiniteScroll: '(boolean|object)',
   itemKey: '(function|null)',
   items: 'array',
   labels: 'object',
-  moveLeftIcon: 'string',
-  moveRightIcon: 'string',
+  moveEndIcon: 'string',
+  moveStartIcon: 'string',
   overscan: 'number',
   pagination: '(boolean|object)',
-  pinLeftIcon: 'string',
-  pinRightIcon: 'string',
+  pinEndIcon: 'string',
+  pinStartIcon: 'string',
+  printTitle: '(string|null)',
+  rowHandleIcon: 'string',
   rowHeight: 'number',
+  rowOrder: 'boolean',
   rowSelection: '(boolean|object)',
   sanitize: 'boolean',
   sanitizeFn: '(function|null)',
@@ -223,6 +251,7 @@ const DefaultType = {
   toolbar: '(boolean|object)',
   toolbarColumnsIcon: 'string',
   toolbarExportIcon: 'string',
+  toolbarPrintIcon: 'string',
   toolbarRedoIcon: 'string',
   toolbarUndoIcon: 'string',
   unpinIcon: 'string',
@@ -233,9 +262,13 @@ const DefaultType = {
  * Class definition
  */
 
-class DataGrid extends BaseComponent {
+class DataGrid<TFeatures extends TableFeatures = DataGridFeatures> extends BaseComponent {
   declare _config: DataGridOptions
-  private _table!: Table<DataGridItem>
+  // Typed on the full set even when the runtime set is smaller - internals
+  // capability-guard every optional-feature call, and the public `table`
+  // getter narrows back to the instance's TFeatures.
+  private _table!: DataGridTable
+  private _unsubscribeState: (() => void) | null = null
   private _scheduler!: Scheduler
   private _virtualizer: GridVirtualizer | null = null
   private _header!: GridHeader
@@ -245,7 +278,13 @@ class DataGrid extends BaseComponent {
   private _emptySlot: DataGridSlot | null = null
   private _dataSource: GridDataSource | null = null
   private _loading: GridLoading | null = null
+  private _loadingMore: GridLoading | null = null
   private _loadFailed = false
+  // Infinite scroll accumulates every loaded page here; the table's data is
+  // this buffer, not the last response.
+  private _loadedItems: DataGridItem[] = []
+  private _loadMorePending = false
+  private _pageResetPending = false
   private _dataVersion = 0
   private _viewportElement!: HTMLDivElement
   private _tableElement!: HTMLTableElement
@@ -272,14 +311,15 @@ private _undoStack: DataGridEditCommitEntry[] = []
   private _editorErrorElement: HTMLElement | null = null
   private _editorFocusPending = false
   private _columnsByKey = new Map<string, DataGridColumn>()
-  private _dragColumn: string | null = null
+  private _columnDrag: DragController | null = null
+  private _rowDrag: DragController | null = null
   private _menu: GridMenu | null = null
   private _tooltip: GridTooltip | null = null
   private _filterMenu: GridFilterMenu | null = null
   private _columnChooser: GridColumnChooser | null = null
   private _toolbarConfig: ResolvedToolbar | null = null
 
-  constructor(element: Element | string, config?: Partial<DataGridOptions>) {
+  constructor(element: Element | string, config?: Partial<DataGridOptions<TFeatures>>) {
     super(element, config)
 
     if (!this._element) {
@@ -305,8 +345,10 @@ private _undoStack: DataGridEditCommitEntry[] = []
   }
 
   // Getters
-  get table(): Table<DataGridItem> {
-    return this._table
+  get table(): DataGridTable<TFeatures> {
+    // TFeatures is invariant, so the internal full-set alias needs the double
+    // cast back to the instance's actual set.
+    return this._table as unknown as DataGridTable<TFeatures>
   }
 
   static get Default(): DataGridOptions {
@@ -321,19 +363,22 @@ private _undoStack: DataGridEditCommitEntry[] = []
     return NAME
   }
 
-  static getInstance(element: Element | string | null): DataGrid | null {
-    return super.getInstance(element) as DataGrid | null
-  }
-
-  static getOrCreateInstance(element: Element | string, config?: Partial<DataGridOptions>): DataGrid {
-    return super.getOrCreateInstance(element, config) as DataGrid
-  }
-
   // Public
   getSelectedItems(): DataGridItem[] {
+    if (typeof this._table.getSelectedRowModel !== 'function') {
+      return []
+    }
+
     return this._table.getSelectedRowModel().rows.map(row => row.original)
   }
 
+  // Prints every sorted and filtered row, not the virtual window or the
+  // current page: the grid renders a plain complete table, prints it, and
+  // throws it away.
+  print(): void {
+    printGrid(this._table, this._printColumns(), { title: this._config.printTitle ?? undefined })
+  }
+
   getCsv(options?: CsvOptions): string {
     return exportCsv(this._table, options)
   }
@@ -345,22 +390,66 @@ private _undoStack: DataGridEditCommitEntry[] = []
   // A serializable snapshot of every user-adjustable state slice. Feed it
   // back through restoreState() - scroll position and edit drafts excluded.
   getState(): DataGridState {
-    const state = this._table.getState()
+    // A reduced feature set has no atom for its absent slices - the snapshot
+    // keeps its full shape with neutral values so persisted state stays
+    // portable between feature sets.
+    const { state } = this._table.store
     return {
-      columnFilters: state.columnFilters,
-      columnOrder: state.columnOrder,
-      columnPinning: state.columnPinning,
-      columnSizing: state.columnSizing,
-      columnVisibility: state.columnVisibility,
+      columnFilters: state.columnFilters ?? [],
+      columnOrder: state.columnOrder ?? [],
+      columnPinning: state.columnPinning ?? { start: [], end: [] },
+      columnSizing: state.columnSizing ?? {},
+      columnVisibility: state.columnVisibility ?? {},
       globalFilter: (state.globalFilter as string | undefined) ?? '',
-      pagination: state.pagination,
-      rowSelection: state.rowSelection,
-      sorting: state.sorting
+      pagination: state.pagination ?? { pageIndex: 0, pageSize: Number.MAX_SAFE_INTEGER },
+      rowSelection: state.rowSelection ?? {},
+      sorting: state.sorting ?? []
     }
   }
 
   restoreState(state: Partial<DataGridState>): void {
-    this._table.setState(previous => ({ ...previous, ...state }))
+    // v9 owns one atom per slice and has no bulk state setter; batching keeps
+    // the writes to a single store emission, so the change events still fire
+    // once for the whole restore.
+    // The setter-presence checks let a snapshot taken on one feature set
+    // restore into a grid running a smaller one - absent slices are skipped.
+    batch(() => {
+      if (state.columnFilters !== undefined && typeof this._table.setColumnFilters === 'function') {
+        this._table.setColumnFilters(state.columnFilters)
+      }
+
+      if (state.columnOrder !== undefined && typeof this._table.setColumnOrder === 'function') {
+        this._table.setColumnOrder(state.columnOrder)
+      }
+
+      if (state.columnPinning !== undefined && typeof this._table.setColumnPinning === 'function') {
+        this._table.setColumnPinning(state.columnPinning)
+      }
+
+      if (state.columnSizing !== undefined && typeof this._table.setColumnSizing === 'function') {
+        this._table.setColumnSizing(state.columnSizing)
+      }
+
+      if (state.columnVisibility !== undefined && typeof this._table.setColumnVisibility === 'function') {
+        this._table.setColumnVisibility(state.columnVisibility)
+      }
+
+      if (state.globalFilter !== undefined && typeof this._table.setGlobalFilter === 'function') {
+        this._table.setGlobalFilter(state.globalFilter)
+      }
+
+      if (state.pagination !== undefined && typeof this._table.setPagination === 'function') {
+        this._table.setPagination(state.pagination)
+      }
+
+      if (state.rowSelection !== undefined && typeof this._table.setRowSelection === 'function') {
+        this._table.setRowSelection(state.rowSelection)
+      }
+
+      if (state.sorting !== undefined && typeof this._table.setSorting === 'function') {
+        this._table.setSorting(state.sorting)
+      }
+    })
 
     // The built-in search input is uncontrolled - sync it to the restored
     // filter so the UI matches the state.
@@ -424,19 +513,23 @@ private _undoStack: DataGridEditCommitEntry[] = []
     this._stopEditing({ commit: false })
     this._config.items = items
     this._dataVersion++
+    this._virtualizer?.remeasure()
     this._table.setOptions(previous => ({ ...previous, data: items }))
     this._scheduler.schedule()
   }
 
   // Full rebuild: recreates the table, wiping sorting/filters/selection/scroll.
   // Use setItems() to swap data while keeping user state.
-  update(config: Partial<DataGridOptions>): void {
-    this._config = this._getConfig({ ...this._config, ...config })
+  update(config: Partial<DataGridOptions<TFeatures>>): void {
+    this._config = this._getConfig({ ...this._config, ...config }) as DataGridOptions
     this._labels = { ...DEFAULT_LABELS, ...this._config.labels }
 
     this._teardownUi()
     this._selectionAnchorIndex = null
     this._loadFailed = false
+    this._pageResetPending = false
+    this._loadedItems = []
+    this._loadMorePending = false
     this._dataVersion++
     this._table = this._createTable()
     this._render()
@@ -445,6 +538,8 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
   dispose(): void {
     this._teardownUi()
+    this._unsubscribeState?.()
+    this._unsubscribeState = null
     this._scheduler.dispose()
     this._tooltip?.dispose()
     this._tooltip = null
@@ -460,19 +555,25 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
   // Private
   // Editing needs the active-cell substrate (Enter/F2 target the active cell).
-  _configAfterMerge(config: DataGridOptions): DataGridOptions {
-    if (config.editing) {
+  _configAfterMerge(config: ComponentConfig): ComponentConfig {
+    // Both need the active-cell substrate: editing targets it with Enter/F2,
+    // cell selection anchors ranges on it.
+    if (config.editing || config.cellSelection) {
       config.cellNavigation = true
     }
 
     return config
   }
 
-  private _createTable(): Table<DataGridItem> {
-    return createGridTable(this._config, (previous, next) => {
+  private _createTable(): DataGridTable {
+    this._unsubscribeState?.()
+    const table = createGridTable(this._config)
+    this._unsubscribeState = subscribeToTableState(table, (previous, next) => {
       this._notifyStateChange(previous, next)
       this._scheduler.schedule()
     })
+
+    return table
   }
 
   private _teardownUi(): void {
@@ -505,6 +606,21 @@ private _undoStack: DataGridEditCommitEntry[] = []
       this._loading = null
     }
 
+    if (this._loadingMore) {
+      this._loadingMore.element.remove()
+      this._loadingMore = null
+    }
+
+    if (this._columnDrag) {
+      this._columnDrag.dispose()
+      this._columnDrag = null
+    }
+
+    if (this._rowDrag) {
+      this._rowDrag.dispose()
+      this._rowDrag = null
+    }
+
     if (this._virtualizer) {
       this._virtualizer.destroy()
       this._virtualizer = null
@@ -581,7 +697,10 @@ private _undoStack: DataGridEditCommitEntry[] = []
       return
     }
 
-    if (!toolbarConfig.columns && !toolbarConfig.export && !toolbarConfig.search && !toolbarConfig.history) {
+    if (
+      !toolbarConfig.columns && !toolbarConfig.export && !toolbarConfig.print &&
+      !toolbarConfig.search && !toolbarConfig.history
+    ) {
       return
     }
 
@@ -591,11 +710,13 @@ private _undoStack: DataGridEditCommitEntry[] = []
       icons: {
         columns: this._sanitizeIcon(this._config.toolbarColumnsIcon),
         export: this._sanitizeIcon(this._config.toolbarExportIcon),
+        print: this._sanitizeIcon(this._config.toolbarPrintIcon),
         redo: this._sanitizeIcon(this._config.toolbarRedoIcon),
         undo: this._sanitizeIcon(this._config.toolbarUndoIcon)
       },
       history: toolbarConfig.history,
       labels: this._labels,
+      print: toolbarConfig.print,
       search: toolbarConfig.search
     })
     this._element.append(this._toolbar.element)
@@ -620,6 +741,7 @@ private _undoStack: DataGridEditCommitEntry[] = []
       createActiveCellManager(() => this._scheduler.schedule()) :
       null
     this._element.classList.add(CLASS_NAME_DATA_GRID)
+    this._element.classList.toggle(CLASS_NAME_AUTO_ROW_HEIGHT, Boolean(this._config.autoRowHeight))
     this._element.classList.toggle(CLASS_NAME_RESIZABLE, Boolean(this._config.columnSizing))
     this._element.classList.toggle(CLASS_NAME_PINNED, Boolean(this._config.columnPinning))
     if (this._config.sorterVisibility) {
@@ -637,9 +759,11 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
     const selectionEnabled = Boolean(this._config.rowSelection)
     const selectionOptions = typeof this._config.rowSelection === 'object' ? this._config.rowSelection : {}
-    // Server-side mode implies pagination — virtualized infinite scroll over a
-    // dataProvider is out of scope until 0.3.0.
-    const paginationEnabled = Boolean(this._config.pagination) || Boolean(this._config.dataProvider)
+    // Server-side mode implies pagination unless it scrolls infinitely, where
+    // the pages accumulate behind the virtualizer instead of replacing.
+    const paginationEnabled =
+      Boolean(this._config.pagination) ||
+      (Boolean(this._config.dataProvider) && !this._config.infiniteScroll)
     const paginationOptions = typeof this._config.pagination === 'object' ? this._config.pagination : {}
 
     if (this._config.columnMenu) {
@@ -654,8 +778,15 @@ private _undoStack: DataGridEditCommitEntry[] = []
         root: this._element as HTMLElement,
         labels: this._labels,
         getColumn: columnKey => this._columnsByKey.get(columnKey) ?? null,
-        getFacetedValues: columnKey =>
-          [...(this._table.getColumn(columnKey)?.getFacetedUniqueValues().keys() ?? [])],
+        getFacetedValues: columnKey => {
+          const column = this._table.getColumn(columnKey)
+          // Only filterType 'select' menus ask for values, and the coverage
+          // assertion ties that filter type to the faceting features - this
+          // guard covers select columns added later through update().
+          return typeof column?.getFacetedUniqueValues === 'function' ?
+            [...column.getFacetedUniqueValues().keys()] :
+            []
+        },
         getFilterValue: columnKey =>
           this._table.getColumn(columnKey)?.getFilterValue() as DataGridColumnFilterValue | undefined,
         applyFilter: (columnKey, value) => {
@@ -686,26 +817,22 @@ private _undoStack: DataGridEditCommitEntry[] = []
       isSortable: column => this._isColumnSortable(column),
       labels: this._labels,
       resizable: Boolean(this._config.columnSizing),
+      rowOrder: this._config.rowOrder,
       selection: selectionEnabled,
       selectAll: selectionEnabled && selectionOptions.selectAll !== false,
       table: this._table
     })
     this._body = createBody({
+      autoRowHeight: this._config.autoRowHeight && this._config.virtualization,
       cellNavigation: this._config.cellNavigation,
+      cellSelection: this._config.cellSelection,
       getDataVersion: () => this._dataVersion,
       getEditingCell: () =>
         (this._editingCell ? { rowId: this._editingCell.rowId, columnId: this._editingCell.columnId } : null),
       // Popup editors overlay the cell; its content stays in place.
       getEditorElement: () => (this._editor && !this._editor.popup ? this._editor.element : null),
       getPinning: () => (this._config.columnPinning ? this._getPinning() : null),
-      getRowIndexOffset: () => {
-        if (!this._config.pagination && !this._config.dataProvider) {
-          return 0
-        }
-
-        const { pageIndex, pageSize } = this._table.getState().pagination
-        return pageIndex * pageSize
-      },
+      getRowIndexOffset: () => this._rowIndexOffset(),
       getRows: () => this._table.getRowModel().rows,
       getVisibleColumns: () => this._visibleColumns(),
       getVirtualizer: () => this._virtualizer?.instance ?? null,
@@ -722,6 +849,8 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
         return typeof this._config.empty === 'function' ? this._config.empty() : this._config.empty
       },
+      rowHandleIcon: this._sanitizeIcon(this._config.rowHandleIcon),
+      rowOrder: this._config.rowOrder,
       sanitizeContent: html =>
         (this._config.sanitize ? sanitizeHtml(html, DefaultAllowlist, this._config.sanitizeFn) : html),
       selection: selectionEnabled
@@ -750,6 +879,13 @@ private _undoStack: DataGridEditCommitEntry[] = []
       this._viewportElement.append(this._loading.element)
     }
 
+    if (this._config.infiniteScroll) {
+      // A second indicator: the overlay covers the grid, which is wrong once
+      // rows are already on screen and only the next page is arriving.
+      this._loadingMore = createLoading(this._labels, CLASS_NAME_LOADING_MORE)
+      this._viewportElement.append(this._loadingMore.element)
+    }
+
     this._element.append(this._viewportElement)
 
     if (paginationEnabled) {
@@ -788,6 +924,7 @@ private _undoStack: DataGridEditCommitEntry[] = []
       }
     } else if (this._config.virtualization) {
       this._virtualizer = createGridVirtualizer({
+        autoRowHeight: this._config.autoRowHeight,
         count: this._table.getRowModel().rows.length,
         getScrollElement: () => this._viewportElement,
         onChange: () => this._scheduler.schedule(),
@@ -796,6 +933,8 @@ private _undoStack: DataGridEditCommitEntry[] = []
       })
     }
 
+    this._initColumnDrag()
+    this._initRowDrag()
     this._update()
   }
 
@@ -818,6 +957,18 @@ private _undoStack: DataGridEditCommitEntry[] = []
       }
     })
 
+    // Drag-select: table-core owns the session (it attaches its own document
+    // mouseup), so the grid only routes the two events at the right cell.
+    EventHandler.on(this._element, EVENT_MOUSEDOWN, SELECTOR_BODY_CELL, event => {
+      const cell = this._tableCellFromTarget(event)
+      cell?.getSelectionStartHandler()(event)
+    })
+
+    EventHandler.on(this._element, EVENT_MOUSEENTER, SELECTOR_BODY_CELL, event => {
+      const cell = this._tableCellFromTarget(event)
+      cell?.getSelectionExtendHandler()(event)
+    })
+
     EventHandler.on(this._element, EVENT_DBLCLICK, event => {
       if (!this._config.editing) {
         return
@@ -872,7 +1023,12 @@ private _undoStack: DataGridEditCommitEntry[] = []
     })
 
     EventHandler.on(this._element, EVENT_CLICK, SELECTOR_TOOLBAR_EXPORT, () => {
-      this.downloadCsv({ scope: 'filtered', ...this._toolbarConfig?.exportOptions })
+      const { exporter, ...exportOptions } = this._toolbarConfig?.exportOptions ?? {};
+      (exporter ?? downloadCsv)(this._table, { scope: 'filtered', ...exportOptions })
+    })
+
+    EventHandler.on(this._element, EVENT_CLICK, SELECTOR_TOOLBAR_PRINT, () => {
+      this.print()
     })
 
     EventHandler.on(this._element, EVENT_CLICK, SELECTOR_TOOLBAR_UNDO, () => {
@@ -883,42 +1039,6 @@ private _undoStack: DataGridEditCommitEntry[] = []
       this.redo()
     })
 
-    EventHandler.on(this._element, EVENT_DRAGSTART, SELECTOR_DRAGGABLE, event => {
-      this._onColumnDragStart(event)
-    })
-
-    EventHandler.on(this._element, EVENT_DRAGOVER, SELECTOR_DRAGGABLE, event => {
-      if (!this._dragColumn) {
-        return
-      }
-
-      const target = (event.delegateTarget ?? event.target) as HTMLElement
-      const targetKey = target.dataset.coreuiColumn
-      // A drop is only valid within the drag source's pinned region; leaving
-      // other targets un-prevented shows the browser's no-drop cursor there.
-      const source = this._table.getColumn(this._dragColumn)
-      const targetColumn = targetKey ? this._table.getColumn(targetKey) : undefined
-      if (!source || !targetColumn || targetKey === this._dragColumn || source.getIsPinned() !== targetColumn.getIsPinned()) {
-        return
-      }
-
-      event.preventDefault()
-      target.classList.add(CLASS_NAME_DROP_TARGET)
-    })
-
-    EventHandler.on(this._element, EVENT_DRAGLEAVE, SELECTOR_DRAGGABLE, event => {
-      const target = (event.delegateTarget ?? event.target) as HTMLElement
-      target.classList.remove(CLASS_NAME_DROP_TARGET)
-    })
-
-    EventHandler.on(this._element, EVENT_DROP, SELECTOR_DRAGGABLE, event => {
-      this._onColumnDrop(event)
-    })
-
-    EventHandler.on(this._element, EVENT_DRAGEND, SELECTOR_DRAGGABLE, () => {
-      this._endColumnDrag()
-    })
-
     EventHandler.on(this._element, EVENT_MOUSEDOWN, SELECTOR_RESIZER, event => {
       this._startColumnResize(event)
     })
@@ -1147,6 +1267,22 @@ private _undoStack: DataGridEditCommitEntry[] = []
       return
     }
 
+    if (this._config.cellSelection && (event.ctrlKey || event.metaKey) && found.cell.rowIndex >= 0) {
+      const key = event.key.toLowerCase()
+      if (key === 'a') {
+        event.preventDefault()
+        this._table.selectAllCells()
+        this._scheduler.schedule()
+        return
+      }
+
+      if (key === 'c') {
+        event.preventDefault()
+        this._copyCellSelection()
+        return
+      }
+    }
+
     const result = resolveNavigation(event.key, event.ctrlKey || event.metaKey, found.cell, this._activeCellContext())
     if (!result) {
       return
@@ -1154,6 +1290,17 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
     event.preventDefault()
 
+    // Shift+arrow grows the range from its anchor and leaves focus put; a
+    // plain arrow moves focus and collapses the range to the new cell.
+    if (this._config.cellSelection && found.cell.rowIndex >= 0 && result.cell.rowIndex >= 0) {
+      const direction = CELL_SELECTION_DIRECTIONS[event.key]
+      if (event.shiftKey && direction) {
+        this._table.extendCellSelection(direction)
+        this._scheduler.schedule()
+        return
+      }
+    }
+
     if (result.pageDelta === 1 && this._table.getCanNextPage()) {
       this._table.nextPage()
     } else if (result.pageDelta === -1 && this._table.getCanPreviousPage()) {
@@ -1163,6 +1310,24 @@ private _undoStack: DataGridEditCommitEntry[] = []
     this._setActiveCell(result.cell)
   }
 
+  // The table-core Cell behind a DOM cell, or null when cell selection is off
+  // or the target is not a data cell.
+  private _tableCellFromTarget(event: Event & Record<string, unknown>) {
+    if (!this._config.cellSelection) {
+      return null
+    }
+
+    const element = (event.delegateTarget ?? event.target) as HTMLElement
+    const columnId = element.dataset.coreuiColumn
+    const rowIndex = Number(element.closest<HTMLElement>('tr')?.dataset.coreuiIndex ?? -1)
+    if (!columnId || rowIndex < 0) {
+      return null
+    }
+
+    const row = this._table.getRowModel().rows[rowIndex]
+    return row?.getAllCells().find(cell => cell.column.id === columnId) ?? null
+  }
+
   private _descendIntoCell(cellElement: HTMLElement): void {
     cellElement.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)?.focus({ preventScroll: true })
   }
@@ -1429,6 +1594,15 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
   private _setActiveCell(cell: ActiveCell): void {
     this._activeCell?.set(cell, { focus: true })
+    // The active cell is the grid's single focus owner; cell selection follows
+    // it rather than keeping a second anchor of its own.
+    if (this._config.cellSelection && cell.rowIndex >= 0) {
+      const row = this._table.getRowModel().rows[cell.rowIndex]
+      if (row) {
+        this._table.setFocusedCell(row.id, cell.columnId)
+      }
+    }
+
     if (this._virtualizer && cell.rowIndex >= 0) {
       // No-op when the row is already in view (align: auto); otherwise the
       // focus request stays pending until the row renders on the next flush.
@@ -1436,6 +1610,28 @@ private _undoStack: DataGridEditCommitEntry[] = []
     }
   }
 
+  // The columns the selection's column indexes address, with the formatter
+  // each cell displays through — a copied date pastes as the date on screen.
+  private _printColumns(): PrintColumn[] {
+    return this._visibleColumns().map(column => ({
+      id: column.key,
+      label: column.label ?? column.key,
+      formatter: column.formatter
+    }))
+  }
+
+  private _clipboardColumns(): ClipboardColumn[] {
+    return this._visibleColumns().map(column => ({ id: column.key, formatter: column.formatter }))
+  }
+
+  private _copyCellSelection(): void {
+    copyCellSelection(this._table, this._clipboardColumns()).then(text => {
+      if (text !== '') {
+        EventHandler.trigger(this._element, EVENT_CELL_COPY, { text })
+      }
+    }, () => {})
+  }
+
   private _activeCellContext(): ActiveCellContext {
     const rowCount = this._table.getRowModel().rows.length
     const paginated = Boolean(this._config.pagination) || Boolean(this._config.dataProvider)
@@ -1445,7 +1641,7 @@ private _undoStack: DataGridEditCommitEntry[] = []
       columnIds: this._visibleLeafColumns().map(column => column.id),
       rowCount,
       pageStep: paginated ?
-        this._table.getState().pagination.pageSize :
+        this._table.store.state.pagination.pageSize :
         Math.max(1, viewportRows || rowCount),
       paginated
     }
@@ -1563,23 +1759,23 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
     if (this._config.columnPinning) {
       const pinned = column.getIsPinned()
-      if (pinned !== 'left') {
+      if (pinned !== 'start') {
         actions.push({
-          key: 'pin-left',
-          label: this._labels.pinLeft,
+          key: 'pin-start',
+          label: this._labels.pinStart,
           group: 'pinning',
-          icon: this._sanitizeIcon(this._config.pinLeftIcon),
-          run: () => column.pin('left')
+          icon: this._sanitizeIcon(this._config.pinStartIcon),
+          run: () => column.pin('start')
         })
       }
 
-      if (pinned !== 'right') {
+      if (pinned !== 'end') {
         actions.push({
-          key: 'pin-right',
-          label: this._labels.pinRight,
+          key: 'pin-end',
+          label: this._labels.pinEnd,
           group: 'pinning',
-          icon: this._sanitizeIcon(this._config.pinRightIcon),
-          run: () => column.pin('right')
+          icon: this._sanitizeIcon(this._config.pinEndIcon),
+          run: () => column.pin('end')
         })
       }
 
@@ -1595,23 +1791,23 @@ private _undoStack: DataGridEditCommitEntry[] = []
     }
 
     if (this._config.columnOrder && config.movable !== false) {
-      const region = this._visibleLeafColumns().filter(item => item.getIsPinned() === column.getIsPinned())
+      const region = this._visibleLeafColumns().filter(item => this._pinnedRegion(item) === this._pinnedRegion(column))
       const index = region.findIndex(item => item.id === columnKey)
       actions.push(
         {
-          key: 'move-left',
-          label: this._labels.moveLeft,
+          key: 'move-start',
+          label: this._labels.moveStart,
           disabled: index <= 0,
           group: 'ordering',
-          icon: this._sanitizeIcon(this._config.moveLeftIcon),
+          icon: this._sanitizeIcon(this._config.moveStartIcon),
           run: () => this._moveColumn(columnKey, -1)
         },
         {
-          key: 'move-right',
-          label: this._labels.moveRight,
+          key: 'move-end',
+          label: this._labels.moveEnd,
           disabled: index === region.length - 1,
           group: 'ordering',
-          icon: this._sanitizeIcon(this._config.moveRightIcon),
+          icon: this._sanitizeIcon(this._config.moveEndIcon),
           run: () => this._moveColumn(columnKey, 1)
         }
       )
@@ -1644,7 +1840,7 @@ private _undoStack: DataGridEditCommitEntry[] = []
   // missing ids at the end when they are shown again.
   private _orderedLeafIds(): string[] {
     const allIds = this._table.getAllLeafColumns().map(column => column.id)
-    const order = this._table.getState().columnOrder
+    const order = this._table.store.state.columnOrder ?? []
     if (order.length === 0) {
       return allIds
     }
@@ -1661,10 +1857,10 @@ private _undoStack: DataGridEditCommitEntry[] = []
       return
     }
 
-    const region = column.getIsPinned()
+    const region = this._pinnedRegion(column)
     const ids = this._orderedLeafIds()
     const regionIds = this._visibleLeafColumns()
-      .filter(item => item.getIsPinned() === region)
+      .filter(item => this._pinnedRegion(item) === region)
       .map(item => item.id)
     const neighbor = regionIds[regionIds.indexOf(columnKey) + direction]
     if (!neighbor) {
@@ -1678,64 +1874,92 @@ private _undoStack: DataGridEditCommitEntry[] = []
     this._table.setColumnOrder(ids)
   }
 
-  private _onColumnDragStart(event: Event & Record<string, unknown>): void {
-    // A drag started from the resize handle is a resize, not a reorder. The
-    // handle's mousedown is preventDefault'd so the browser never starts a drag
-    // there; this ancestry check is a secondary guard.
-    if ((event.target as HTMLElement).closest?.(SELECTOR_RESIZER)) {
-      event.preventDefault()
+  // Pointer-based, not HTML5 drag events: the controller owns the ghost, the
+  // drop indicator and the edge auto-scroll, and behaves the same on touch.
+  private _initColumnDrag(): void {
+    if (!this._config.columnOrder) {
       return
     }
 
-    const target = (event.delegateTarget ?? event.target) as HTMLElement
-    this._dragColumn = target.dataset.coreuiColumn ?? null
-    target.classList.add(CLASS_NAME_DRAGGING)
+    this._columnDrag = createColumnDragController({
+      root: this._element as HTMLElement,
+      getScrollElement: () => this._viewportElement,
+      canDrop: (sourceKey, targetKey) => {
+        const source = this._table.getColumn(sourceKey)
+        const target = this._table.getColumn(targetKey)
+        return Boolean(source && target) &&
+          sourceKey !== targetKey &&
+          this._pinnedRegion(source!) === this._pinnedRegion(target!)
+      },
+      onReorder: (sourceKey, targetKey, after) => this._moveColumnTo(sourceKey, targetKey, after)
+    })
+  }
 
-    const { dataTransfer } = event as unknown as DragEvent
-    if (dataTransfer) {
-      dataTransfer.effectAllowed = 'move'
-      dataTransfer.setData('text/plain', this._dragColumn ?? '')
+  // Rows are indexed within the current row model; the offset turns that into
+  // a position in `items`.
+  private _rowIndexOffset(): number {
+    // The infinite buffer always starts at the first row, so its indices are
+    // already absolute.
+    if (this._config.infiniteScroll || (!this._config.pagination && !this._config.dataProvider)) {
+      return 0
     }
-  }
 
-  private _onColumnDrop(event: Event & Record<string, unknown>): void {
-    event.preventDefault()
-    const target = (event.delegateTarget ?? event.target) as HTMLElement
-    const targetKey = target.dataset.coreuiColumn
-    const sourceKey = this._dragColumn
-    this._endColumnDrag()
+    const { pageIndex, pageSize } = this._table.store.state.pagination
+    return pageIndex * pageSize
+  }
 
-    if (!sourceKey || !targetKey || sourceKey === targetKey) {
+  private _initRowDrag(): void {
+    if (!this._config.rowOrder) {
       return
     }
 
-    const source = this._table.getColumn(sourceKey)
-    const targetColumn = this._table.getColumn(targetKey)
-    // Reordering never crosses a pinning boundary — pin membership is state,
-    // not position.
-    if (!source || !targetColumn || source.getIsPinned() !== targetColumn.getIsPinned()) {
+    this._rowDrag = createRowDragController({
+      root: this._element as HTMLElement,
+      getScrollElement: () => this._viewportElement,
+      onReorder: (sourceIndex, targetIndex, after) => this._moveRowTo(sourceIndex, targetIndex, after)
+    })
+  }
+
+  // The grid never mutates `items` — it hands the reordered array to the app
+  // through rowOrderChange, the same contract inline editing uses.
+  private _moveRowTo(sourceIndex: number, targetIndex: number, after: boolean): void {
+    const offset = this._rowIndexOffset()
+    const items = [...this._config.items]
+    const from = offset + sourceIndex
+    const [item] = items.splice(from, 1)
+    if (item === undefined) {
       return
     }
 
+    // Resolved AFTER the removal, so the index still points at the target
+    // whichever direction the row travelled.
+    const target = offset + targetIndex
+    const to = target > from ? target - 1 : target
+    const newIndex = after ? to + 1 : to
+    items.splice(newIndex, 0, item)
+
+    EventHandler.trigger(this._element, EVENT_ROW_ORDER_CHANGE, {
+      items, item, oldIndex: from, newIndex
+    })
+  }
+
+  private _moveColumnTo(sourceKey: string, targetKey: string, after: boolean): void {
     const ids = this._orderedLeafIds()
     const from = ids.indexOf(sourceKey)
-    const to = ids.indexOf(targetKey)
-    if (from === -1 || to === -1) {
+    if (from === -1) {
       return
     }
 
-    // Removing the source first makes inserting at the target's original index
-    // land after it when dragging right and before it when dragging left.
     ids.splice(from, 1)
-    ids.splice(to, 0, sourceKey)
-    this._table.setColumnOrder(ids)
-  }
-
-  private _endColumnDrag(): void {
-    this._dragColumn = null
-    for (const cell of this._element.querySelectorAll(`.${CLASS_NAME_DRAGGING}, .${CLASS_NAME_DROP_TARGET}`)) {
-      cell.classList.remove(CLASS_NAME_DRAGGING, CLASS_NAME_DROP_TARGET)
+    // Resolved AFTER the removal, so the index still points at the target
+    // whichever direction the column travelled.
+    const to = ids.indexOf(targetKey)
+    if (to === -1) {
+      return
     }
+
+    ids.splice(after ? to + 1 : to, 0, sourceKey)
+    this._table.setColumnOrder(ids)
   }
 
   private _startColumnResize(event: Event & Record<string, unknown>): void {
@@ -1797,7 +2021,7 @@ private _undoStack: DataGridEditCommitEntry[] = []
     this._dataSource = createDataSource({
       provider: request => dataProvider(request),
       getRequest: () => {
-        const state = this._table.getState()
+        const { state } = this._table.store
         return {
           columnFilters: state.columnFilters,
           globalFilter: (state.globalFilter as string | undefined) ?? '',
@@ -1805,13 +2029,29 @@ private _undoStack: DataGridEditCommitEntry[] = []
           sorting: state.sorting
         }
       },
-      onLoad: response => {
+      onLoad: (response, request) => {
         this._stopEditing({ commit: false })
         this._loadFailed = false
+        this._loadMorePending = false
         this._dataVersion++
+
+        let { items } = response
+        if (this._config.infiniteScroll) {
+          const firstPage = request.pagination.pageIndex === 0
+          items = firstPage ? response.items : [...this._loadedItems, ...response.items]
+          this._loadedItems = items
+          // Appended rows land at fresh indices; a first page puts different
+          // data at indices the virtualizer has already measured — and shrinks
+          // the buffer back under a viewport that may be scrolled far past it.
+          if (firstPage) {
+            this._viewportElement.scrollTop = 0
+            this._virtualizer?.remeasure()
+          }
+        }
+
         this._table.setOptions(previous => ({
           ...previous,
-          data: response.items,
+          data: items,
           rowCount: response.totalRows
         }))
         EventHandler.trigger(this._element, EVENT_DATA_LOAD, {
@@ -1824,16 +2064,17 @@ private _undoStack: DataGridEditCommitEntry[] = []
       onError: error => {
         this._stopEditing({ commit: false })
         this._loadFailed = true
+        this._loadMorePending = false
+        this._loadedItems = []
         this._dataVersion++
         this._table.setOptions(previous => ({ ...previous, data: [], rowCount: 0 }))
         EventHandler.trigger(this._element, EVENT_DATA_ERROR, { error })
         this._scheduler.schedule()
       },
       onLoadingChange: loading => {
-        if (this._loading) {
-          this._loading.setVisible(loading)
-        }
-
+        const appending = Boolean(this._config.infiniteScroll) && this._loadedItems.length > 0
+        this._loading?.setVisible(loading && !appending)
+        this._loadingMore?.setVisible(loading && appending)
         this._viewportElement.setAttribute('aria-busy', String(loading))
       }
     })
@@ -1841,14 +2082,55 @@ private _undoStack: DataGridEditCommitEntry[] = []
     this._dataSource.load()
   }
 
+  // The trigger is the last RENDERED row index, not a scroll ratio: measured
+  // row heights make the ratio meaningless (the total size keeps moving as
+  // rows are measured, so a ratio either fires early or never).
+  private _maybeLoadMore(): void {
+    if (!this._config.infiniteScroll || !this._dataSource || !this._virtualizer || this._loadMorePending) {
+      return
+    }
+
+    const loaded = this._table.getRowModel().rows.length
+    if (loaded === 0 || loaded >= this._getTotalRows()) {
+      return
+    }
+
+    const options = typeof this._config.infiniteScroll === 'object' ? this._config.infiniteScroll : {}
+    const threshold = options.threshold ?? this._config.overscan
+    const rendered = this._virtualizer.instance.getVirtualItems()
+    const last = rendered[rendered.length - 1]
+    if (!last || last.index < loaded - 1 - threshold) {
+      return
+    }
+
+    this._loadMorePending = true
+    this._table.setPageIndex(this._table.store.state.pagination.pageIndex + 1)
+  }
+
   // Visible leaf columns in VISUAL order: left-pinned, center (columnOrder),
   // right-pinned — getVisibleLeafColumns() alone does not regroup pinning.
+  // Without the pinning feature there are no regions to regroup, and without
+  // visibility every leaf column is visible.
   private _visibleLeafColumns() {
-    return [
-      ...this._table.getLeftVisibleLeafColumns(),
-      ...this._table.getCenterVisibleLeafColumns(),
-      ...this._table.getRightVisibleLeafColumns()
-    ]
+    if (typeof this._table.getCenterVisibleLeafColumns === 'function') {
+      return [
+        ...this._table.getStartVisibleLeafColumns(),
+        ...this._table.getCenterVisibleLeafColumns(),
+        ...this._table.getEndVisibleLeafColumns()
+      ]
+    }
+
+    if (typeof this._table.getVisibleLeafColumns === 'function') {
+      return this._table.getVisibleLeafColumns()
+    }
+
+    return this._table.getAllLeafColumns()
+  }
+
+  // Ordering paths compare pinned regions even on grids that never enabled
+  // pinning - without the feature every column sits in the unpinned region.
+  private _pinnedRegion(column: { getIsPinned?: () => 'start' | 'end' | false }): 'start' | 'end' | false {
+    return typeof column.getIsPinned === 'function' ? column.getIsPinned() : false
   }
 
   private _chooserColumns(): ColumnChooserColumn[] {
@@ -1893,14 +2175,14 @@ private _undoStack: DataGridEditCommitEntry[] = []
   }
 
   private _getFilteredColumns(): string[] {
-    return this._table.getState().columnFilters.map(filter => filter.id)
+    return this._table.store.state.columnFilters.map(filter => filter.id)
   }
 
   private _getPinning(): GridPinning {
-    // Visible columns only - getLeftLeafColumns/getPinnedIndex include hidden
+    // Visible columns only - getStartLeafColumns/getPinnedIndex include hidden
     // columns, which would leave the edge class on a column nobody sees.
-    const leftColumns = this._table.getLeftLeafColumns().filter(column => column.getIsVisible())
-    const rightColumns = this._table.getRightLeafColumns().filter(column => column.getIsVisible())
+    const leftColumns = this._table.getStartLeafColumns().filter(column => column.getIsVisible())
+    const rightColumns = this._table.getEndLeafColumns().filter(column => column.getIsVisible())
     // The selection cell is not a TanStack column; anchor it to the left as
     // soon as any data column is pinned there so the checkbox travels with them.
     const selectPinned = Boolean(this._config.rowSelection) && leftColumns.length > 0
@@ -1908,8 +2190,8 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
     for (const [index, column] of leftColumns.entries()) {
       columns[column.id] = {
-        side: 'left',
-        offset: column.getStart('left'),
+        side: 'start',
+        offset: column.getStart('start'),
         edge: index === leftColumns.length - 1,
         afterSelect: selectPinned
       }
@@ -1917,8 +2199,8 @@ private _undoStack: DataGridEditCommitEntry[] = []
 
     for (const [index, column] of rightColumns.entries()) {
       columns[column.id] = {
-        side: 'right',
-        offset: column.getAfter('right'),
+        side: 'end',
+        offset: column.getAfter('end'),
         edge: index === 0,
         afterSelect: false
       }
@@ -1928,7 +2210,7 @@ private _undoStack: DataGridEditCommitEntry[] = []
       columns,
       select: selectPinned ?
 {
- side: 'left', offset: 0, edge: false, afterSelect: false
+ side: 'start', offset: 0, edge: false, afterSelect: false
 } :
 null
     }
@@ -1986,10 +2268,14 @@ null
       return this._table.options.rowCount ?? 0
     }
 
+    if (typeof this._table.getFilteredRowModel !== 'function') {
+      return this._table.getCoreRowModel().rows.length
+    }
+
     return this._table.getFilteredRowModel().rows.length
   }
 
-  private _notifyStateChange(previous: TableState, next: TableState): void {
+  private _notifyStateChange(previous: DataGridTableState, next: DataGridTableState): void {
     // TanStack's resize handler keeps document-level listeners until mouseup;
     // a dispose mid-drag would re-enter here against a torn-down instance.
     if (!this._element) {
@@ -2025,16 +2311,22 @@ null
     // auto-reset the page index, which replaces the state object without
     // changing it - identity alone would kill an edit right after its
     // editCommit handler applied the change.
+    // Infinite scroll is the exception: its page bumps only append, so every
+    // row already on screen keeps its index, its measurement and its focus.
     if (
       previous.sorting !== next.sorting ||
       previous.columnFilters !== next.columnFilters ||
       previous.globalFilter !== next.globalFilter ||
-      previous.pagination.pageIndex !== next.pagination.pageIndex ||
-      previous.pagination.pageSize !== next.pagination.pageSize
+      (!this._config.infiniteScroll &&
+        (previous.pagination?.pageIndex !== next.pagination?.pageIndex ||
+          previous.pagination?.pageSize !== next.pagination?.pageSize))
     ) {
       this._stopEditing({ commit: true, force: true })
       this._selectionAnchorIndex = null
       this._activeCell?.reset()
+      // Row measurements are cached by index, so the same index now holding a
+      // different row makes them stale.
+      this._virtualizer?.remeasure()
     }
 
     if (previous.sorting !== next.sorting) {
@@ -2064,7 +2356,9 @@ null
       })
     }
 
-    if (previous.pagination !== next.pagination) {
+    // No paginationChange under infinite scroll — pagination is internal
+    // there (no widget, not user-adjustable); dataLoad is the page signal.
+    if (previous.pagination !== next.pagination && !this._config.infiniteScroll) {
       EventHandler.trigger(this._element, EVENT_PAGINATION_CHANGE, {
         pagination: next.pagination
       })
@@ -2097,15 +2391,26 @@ null
     if (this._dataSource) {
       const refetchNeeded = filtersChanged || previous.sorting !== next.sorting
 
-      if (refetchNeeded && next.pagination.pageIndex !== 0) {
-        // Back to page one first; the resulting pagination change re-enters
-        // this handler and triggers the (debounced) fetch exactly once.
-        this._table.setPageIndex(0)
+      if (refetchNeeded) {
+        if (next.pagination.pageIndex !== 0) {
+          // Back to page one. The write lands synchronously, so the request the
+          // debounced fetch reads already carries index 0 - but it also echoes
+          // back here as a pagination change, which must not fetch again.
+          this._pageResetPending = true
+          this._table.setPageIndex(0)
+        }
+
+        this._dataSource.load()
         return
       }
 
-      if (refetchNeeded || previous.pagination !== next.pagination) {
-        this._dataSource.load()
+      if (previous.pagination !== next.pagination) {
+        const echoedPageReset = this._pageResetPending && next.pagination.pageIndex === 0
+        this._pageResetPending = false
+
+        if (!echoedPageReset) {
+          this._dataSource.load()
+        }
       }
     }
   }
@@ -2136,14 +2441,16 @@ null
       order: this._visibleLeafColumns().map(column => column.id),
       pinning: this._config.columnPinning ? this._getPinning() : null,
       resizingColumn: this._config.columnSizing ?
-        this._table.getState().columnSizingInfo.isResizingColumn :
+        this._table.store.state.columnResizing.isResizingColumn :
         false,
       sizes: (this._config.columnSizing || this._config.columnPinning) ? this._getColumnSizes() : null,
-      sorting: this._table.getState().sorting,
+      sorting: this._table.store.state.sorting ?? [],
       selectAll: this._config.rowSelection ?
         {
           checked: this._table.getIsAllRowsSelected(),
-          indeterminate: this._table.getIsSomeRowsSelected()
+          // getIsSomeRowsSelected() means "at least one" - the all-selected
+          // case has to be excluded for the tri-state checkbox.
+          indeterminate: this._table.getIsSomeRowsSelected() && !this._table.getIsAllRowsSelected()
         } :
         null
     })
@@ -2169,10 +2476,12 @@ null
     for (const instance of this._paginations) {
       instance.refresh()
     }
+
+    this._maybeLoadMore()
   }
 
   private _paginationState() {
-    const { pagination } = this._table.getState()
+    const { pagination } = this._table.store.state
     return {
       pageCount: this._table.getPageCount(),
       pageIndex: pagination.pageIndex,
@@ -2203,6 +2512,4 @@ null
   }
 }
 
-defineJQueryPlugin(DataGrid)
-
 export default DataGrid