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

package/src/types.ts

@@ -6,33 +6,58 @@
  */
 
 import type {
- Column, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, PaginationState,
- RowSelectionState, SortingState, Table, VisibilityState
+ Column, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState,
+ ColumnVisibilityState, PaginationState, Row, RowSelectionState, SortingState, Table,
+ TableFeatures, TableState
 } from '@tanstack/table-core'
-import type { CsvDownloadOptions } from './util/csv'
+import type { DataGridFeatures } from './engine/features'
+import type { DataGridExportOptions } from './ui/toolbar'
 
 export type {
   Column,
   ColumnFiltersState,
   ColumnOrderState,
   ColumnPinningState,
+  ColumnPinningPosition,
   ColumnSizingState,
+  ColumnVisibilityState,
   PaginationState,
   RowSelectionState,
   SortingState,
   Table,
-  VisibilityState
+  TableFeatures
 } from '@tanstack/table-core'
+export type { DataGridFeatures } from './engine/features'
+export type { DataGridLiteFeatures } from './engine/features-lite'
 
 export type DataGridItem = Record<string, unknown>
 
-export interface DataGridColumnFilterContext {
-  column: Column<DataGridItem, unknown>
-  table: Table<DataGridItem>
+// The table-core instance as this grid registers it - every public surface
+// that hands out a table (slot contexts, CSV helpers, `grid.table`) carries
+// the grid's feature set as TFeatures. v9's TFeatures is invariant, so a
+// lite-set table is NOT assignable to the full-set default - the parameter is
+// what keeps a reduced grid's surface honest.
+export type DataGridTable<TFeatures extends TableFeatures = DataGridFeatures> =
+  Table<TFeatures, DataGridItem>
+
+export type DataGridTableState<TFeatures extends TableFeatures = DataGridFeatures> =
+  TableState<TFeatures>
+
+export type DataGridRow<TFeatures extends TableFeatures = DataGridFeatures> =
+  Row<TFeatures, DataGridItem>
+
+// v9 requires both sides on ColumnPinningState; the option stays partial so
+// `{ start: ['id'] }` is still a valid seed.
+export type DataGridColumnPinning = Partial<ColumnPinningState>
+
+export interface DataGridColumnFilterContext<TFeatures extends TableFeatures = DataGridFeatures> {
+  column: Column<TFeatures, DataGridItem, unknown>
+  table: DataGridTable<TFeatures>
   labels: DataGridLabels
 }
 
-export type DataGridColumnFilterFactory = (context: DataGridColumnFilterContext) => DataGridSlot
+export type DataGridColumnFilterFactory<TFeatures extends TableFeatures = DataGridFeatures> =
+  (context: DataGridColumnFilterContext<TFeatures>) => DataGridSlot
 
 export type DataGridFilterType = 'text' | 'number' | 'date' | 'select'
 
@@ -112,12 +137,12 @@ export interface DataGridEditCommitEvent {
   previousValue: unknown
 }
 
-export interface DataGridColumn {
+export interface DataGridColumn<TFeatures extends TableFeatures = DataGridFeatures> {
   key: string
   editable?: boolean | DataGridEditableOptions
   editor?: DataGridEditorFactory
   editValidate?: (value: unknown, item: DataGridItem) => true | string
-  filter?: DataGridColumnFilterFactory
+  filter?: DataGridColumnFilterFactory<TFeatures>
   filterable?: boolean
   filterFn?: (value: unknown, filterValue: unknown, item: DataGridItem) => boolean
   filterType?: DataGridFilterType
@@ -166,8 +191,8 @@ export interface DataGridLabels {
   lastPage: string
   loadError: string
   loading: string
-  moveLeft: string
-  moveRight: string
+  moveEnd: string
+  moveStart: string
   nextPage: string
   operatorBetween: string
   operatorBlank: string
@@ -184,10 +209,11 @@ export interface DataGridLabels {
   operatorStartsWith: string
   pageSizeLabel: string
   paginationLabel: string
-  pinLeft: string
-  pinRight: string
+  pinEnd: string
+  pinStart: string
   previousPage: string
   redoneAnnouncement: string
+  reorderRow: string
   resetColumns: string
   resultsAnnouncement: string
   searchValues: string
@@ -199,6 +225,7 @@ export interface DataGridLabels {
   sortDescending: string
   toolbarColumns: string
   toolbarExport: string
+  toolbarPrint: string
   toolbarRedo: string
   toolbarUndo: string
   undoneAnnouncement: string
@@ -209,8 +236,8 @@ export interface DataGridColumnSizingOptions {
   mode?: 'onChange' | 'onEnd'
 }
 
-export interface DataGridSlotContext {
-  table: Table<DataGridItem>
+export interface DataGridSlotContext<TFeatures extends TableFeatures = DataGridFeatures> {
+  table: DataGridTable<TFeatures>
   labels: DataGridLabels
 }
 
@@ -220,18 +247,20 @@ export interface DataGridSlot {
   dispose?: () => void
 }
 
-export type DataGridSlotFactory = (context: DataGridSlotContext) => DataGridSlot
+export type DataGridSlotFactory<TFeatures extends TableFeatures = DataGridFeatures> =
+  (context: DataGridSlotContext<TFeatures>) => DataGridSlot
 
-export interface DataGridSlots {
-  toolbar: DataGridSlotFactory
-  pagination: DataGridSlotFactory
-  empty: DataGridSlotFactory
+export interface DataGridSlots<TFeatures extends TableFeatures = DataGridFeatures> {
+  toolbar: DataGridSlotFactory<TFeatures>
+  pagination: DataGridSlotFactory<TFeatures>
+  empty: DataGridSlotFactory<TFeatures>
 }
 
 export interface DataGridToolbarOptions {
   columns?: boolean
-  export?: boolean | CsvDownloadOptions
+  export?: boolean | DataGridExportOptions
   history?: boolean
+  print?: boolean
   search?: boolean
 }
 
@@ -253,6 +282,13 @@ export interface DataGridPaginationInfoState {
   totalRows: number
 }
 
+export interface DataGridInfiniteScrollOptions {
+  pageSize?: number
+  // Rows left below the last rendered one when the next page is requested.
+  // Defaults to the grid's overscan.
+  threshold?: number
+}
+
 export interface DataGridPaginationOptions {
   info?: boolean | ((state: DataGridPaginationInfoState) => string)
   pageSize?: number
@@ -268,7 +304,7 @@ export interface DataGridState {
   columnOrder: ColumnOrderState
   columnPinning: ColumnPinningState
   columnSizing: ColumnSizingState
-  columnVisibility: VisibilityState
+  columnVisibility: ColumnVisibilityState
   globalFilter: string
   pagination: PaginationState
   rowSelection: RowSelectionState
@@ -287,37 +323,55 @@ export interface DataGridDataResponse {
   totalRows: number
 }
 
-export interface DataGridOptions {
+export interface DataGridOptions<TFeatures extends TableFeatures = DataGridFeatures> {
+  // Measure each rendered row instead of trusting rowHeight, so rows can grow
+  // with their content. rowHeight stays the estimate for unmeasured rows.
+  autoRowHeight: boolean
   cellNavigation: boolean
+  // Spreadsheet-style cell ranges: shift-click, drag and shift+arrows, with
+  // Ctrl/Cmd+C copying the range as TSV. Implies cellNavigation.
+  cellSelection: boolean
   columnFilters: boolean
   columnMenu: boolean | DataGridColumnMenuBuilder
   columnMenuIcon: string
   columnOrder: boolean | ColumnOrderState
-  columnPinning: boolean | ColumnPinningState
+  columnPinning: boolean | DataGridColumnPinning
   columnSizing: boolean | DataGridColumnSizingOptions
-  columnVisibility: boolean | VisibilityState
-  columns: DataGridColumn[]
+  columnVisibility: boolean | ColumnVisibilityState
+  columns: Array<DataGridColumn<TFeatures>>
   dataProvider: ((request: DataGridDataRequest) => Promise<DataGridDataResponse>) | null
   editing: boolean
   empty: string | (() => Node | string)
+  // The registered table-core feature set; null means the full built-in
+  // dataGridFeatures. Presets: dataGridFeatures, dataGridLiteFeatures.
+  features: TFeatures | null
   filterIcon: string
   globalFilter: boolean
   hideColumnIcon: string
   history: boolean
+  // Append each loaded page to the rows already in view instead of replacing
+  // them. Requires dataProvider, cannot be combined with pagination.
+  infiniteScroll: boolean | DataGridInfiniteScrollOptions
   itemKey: ((item: DataGridItem, index: number) => string) | null
   items: DataGridItem[]
   labels: Partial<DataGridLabels>
-  moveLeftIcon: string
-  moveRightIcon: string
+  moveEndIcon: string
+  moveStartIcon: string
   overscan: number
   pagination: boolean | DataGridPaginationOptions
-  pinLeftIcon: string
-  pinRightIcon: string
+  pinEndIcon: string
+  pinStartIcon: string
+  // Heading printed above the table; omitted when null.
+  printTitle: string | null
+  rowHandleIcon: string
   rowHeight: number
+  // A drag handle per row; the grid never mutates `items` — it emits
+  // rowOrderChange with the reordered array for the app to apply.
+  rowOrder: boolean
   rowSelection: boolean | DataGridRowSelectionOptions
   sanitize: boolean
   sanitizeFn: ((html: string) => string) | null
-  slots: Partial<DataGridSlots>
+  slots: Partial<DataGridSlots<TFeatures>>
   sortAscendingIcon: string
   sortDescendingIcon: string
   sortNeutralIcon: string
@@ -327,6 +381,7 @@ export interface DataGridOptions {
   toolbar: boolean | DataGridToolbarOptions
   toolbarColumnsIcon: string
   toolbarExportIcon: string
+  toolbarPrintIcon: string
   toolbarRedoIcon: string
   toolbarUndoIcon: string
   unpinIcon: string

package/src/ui/body.ts

@@ -5,19 +5,24 @@
  * --------------------------------------------------------------------------
  */
 
-import type { Row } from '@tanstack/table-core'
 import type { GridVirtualizerInstance } from '../engine/virtualizer'
-import type { DataGridColumn, DataGridItem, DataGridLabels } from '../types'
+import type { DataGridColumn, DataGridLabels, DataGridRow } from '../types'
 import { applyPinnedCell, type GridPinning } from './pinning'
 
 const CLASS_NAME_EMPTY = 'data-grid-empty'
 const FOCUSABLE_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]'
 const CLASS_NAME_ROW_ODD = 'data-grid-row-odd'
 const CLASS_NAME_ROW_SELECTED = 'table-active'
+const CLASS_NAME_CELL_SELECTED = 'data-grid-cell-selected'
+const CLASS_NAME_HANDLE_CELL = 'data-grid-row-handle-cell'
+const EDGE_CLASS_NAMES = ['top', 'right', 'bottom', 'left'] as const
 const CLASS_NAME_SELECT_CELL = 'data-grid-select-cell'
 const CLASS_NAME_SPACER = 'data-grid-spacer'
 
 export interface GridBodyContext {
+  // Hands every rendered row to the virtualizer for measurement instead of
+  // assuming a fixed rowHeight.
+  autoRowHeight: boolean
   // With cellNavigation on, rows/cells carry grid roles, every cell (and the
   // interactive content inside it) drops out of the tab order, and cells are
   // addressable by data-coreui-column - the roving tabindex pass in the grid
@@ -35,13 +40,16 @@ export interface GridBodyContext {
   // Absolute index of the page's first row (pagination mode), else 0 - keeps
   // aria-rowindex absolute like aria-rowcount.
   getRowIndexOffset: () => number
-  getRows: () => Array<Row<DataGridItem>>
+  getRows: () => DataGridRow[]
   // Visible leaf columns in table order (pinning + columnOrder + visibility).
   getVisibleColumns: () => DataGridColumn[]
   getVirtualizer: () => GridVirtualizerInstance | null
   renderEmpty: () => Node | string
   // Guards every string injected via innerHTML (render results, empty state).
   sanitizeContent: (html: string) => string
+  cellSelection: boolean
+  rowOrder: boolean
+  rowHandleIcon: string
   selection: boolean
 }
 
@@ -76,7 +84,10 @@ export const createBody = (context: GridBodyContext): GridBody => {
   // rebuilt (not recycled) when the visible column set or order changes.
   let currentColumns: DataGridColumn[] = context.getVisibleColumns()
   let layoutSignature = currentColumns.map(column => column.key).join('|')
-  let cellCount = currentColumns.length + (context.selection ? 1 : 0)
+  // The handle column and the select column both sit before the data columns;
+  // every cell index in this module is offset by however many are on.
+  const leadingCount = (context.rowOrder ? 1 : 0) + (context.selection ? 1 : 0)
+  let cellCount = currentColumns.length + leadingCount
 
   const buildRowCells = (rowElement: HTMLTableRowElement): void => {
     rowElement.replaceChildren()
@@ -85,7 +96,24 @@ export const createBody = (context: GridBodyContext): GridBody => {
       rowElement.setAttribute('role', 'row')
     }
 
-    const offset = context.selection ? 1 : 0
+    const offset = leadingCount
+
+    if (context.rowOrder) {
+      const cellElement = document.createElement('td')
+      cellElement.classList.add(CLASS_NAME_HANDLE_CELL)
+      const handle = document.createElement('span')
+      handle.classList.add('data-grid-row-handle')
+      handle.dataset.coreuiRowHandle = ''
+      handle.setAttribute('aria-hidden', 'true')
+      handle.innerHTML = context.rowHandleIcon
+      cellElement.append(handle)
+      if (context.cellNavigation) {
+        cellElement.setAttribute('role', 'gridcell')
+        cellElement.setAttribute('aria-colindex', '1')
+      }
+
+      rowElement.append(cellElement)
+    }
 
     if (context.selection) {
       const cellElement = document.createElement('td')
@@ -97,7 +125,7 @@ export const createBody = (context: GridBodyContext): GridBody => {
       input.dataset.coreuiRowSelect = ''
       if (context.cellNavigation) {
         cellElement.setAttribute('role', 'gridcell')
-        cellElement.setAttribute('aria-colindex', '1')
+        cellElement.setAttribute('aria-colindex', String(context.rowOrder ? 2 : 1))
         input.tabIndex = -1
       }
 
@@ -126,8 +154,8 @@ export const createBody = (context: GridBodyContext): GridBody => {
     return rowElement
   }
 
-  const updateRowCells = (rowElement: HTMLTableRowElement, row: Row<DataGridItem>, index: number): void => {
-    const offset = context.selection ? 1 : 0
+  const updateRowCells = (rowElement: HTMLTableRowElement, row: DataGridRow, index: number): void => {
+    const offset = leadingCount
     const editingCell = context.getEditingCell()
 
     for (const [cellIndex, column] of currentColumns.entries()) {
@@ -159,14 +187,15 @@ export const createBody = (context: GridBodyContext): GridBody => {
     }
   }
 
-  const updateRowElement = (rowElement: HTMLTableRowElement, row: Row<DataGridItem>, index: number): void => {
+  const updateRowElement = (rowElement: HTMLTableRowElement, row: DataGridRow, index: number): void => {
     if (rowElement.dataset.coreuiLayout !== layoutSignature) {
       buildRowCells(rowElement)
       delete rowElement.dataset.coreuiRow
     }
 
     if (context.selection) {
-      const input = rowElement.firstElementChild!.firstElementChild as HTMLInputElement
+      const selectCell = rowElement.children[leadingCount - 1] as HTMLTableCellElement
+      const input = selectCell.firstElementChild as HTMLInputElement
       const selected = row.getIsSelected()
       input.checked = selected
       rowElement.classList.toggle(CLASS_NAME_ROW_SELECTED, selected)
@@ -183,15 +212,33 @@ export const createBody = (context: GridBodyContext): GridBody => {
       rowElement.dataset.coreuiRow = rowKey
     }
 
+    // Selection is repainted on every pass, unlike cell content: it changes
+    // without the row's data version or id changing.
+    if (context.cellSelection) {
+      const cells = new Map(row.getAllCells().map(cell => [cell.column.id, cell]))
+      for (const [cellIndex, column] of currentColumns.entries()) {
+        const cellElement = rowElement.children[cellIndex + leadingCount] as HTMLTableCellElement
+        const cell = cells.get(column.key)
+        const selected = cell?.getIsSelected() ?? false
+        cellElement.classList.toggle(CLASS_NAME_CELL_SELECTED, selected)
+        const edges = selected && cell ? cell.getSelectionEdges() : null
+        for (const edge of EDGE_CLASS_NAMES) {
+          cellElement.classList.toggle(`${CLASS_NAME_CELL_SELECTED}-${edge}`, Boolean(edges?.[edge]))
+        }
+      }
+    }
+
     rowElement.dataset.coreuiIndex = String(index)
     rowElement.setAttribute('aria-rowindex', String(context.headerRowCount + context.getRowIndexOffset() + index + 1))
     rowElement.classList.toggle(CLASS_NAME_ROW_ODD, index % 2 === 1)
 
     if (currentPinning) {
       const pinning = currentPinning
-      const offset = context.selection ? 1 : 0
-      if (context.selection) {
-        applyPinnedCell(rowElement.children[0] as HTMLTableCellElement, pinning.select)
+      const offset = leadingCount
+      // Leading cells share the select column's pin — they travel together at
+      // the start edge.
+      for (let cellIndex = 0; cellIndex < leadingCount; cellIndex++) {
+        applyPinnedCell(rowElement.children[cellIndex] as HTMLTableCellElement, pinning.select)
       }
 
       for (const [cellIndex, column] of currentColumns.entries()) {
@@ -244,7 +291,7 @@ export const createBody = (context: GridBodyContext): GridBody => {
     element.replaceChildren(emptyElement)
   }
 
-  const renderAll = (rows: Array<Row<DataGridItem>>) => {
+  const renderAll = (rows: DataGridRow[]) => {
     if (emptyElement) {
       emptyElement.remove()
     }
@@ -266,7 +313,7 @@ export const createBody = (context: GridBodyContext): GridBody => {
     }
   }
 
-  const renderWindow = (rows: Array<Row<DataGridItem>>, virtualizer: GridVirtualizerInstance) => {
+  const renderWindow = (rows: DataGridRow[], virtualizer: GridVirtualizerInstance) => {
     if (!spacersAttached) {
       element.replaceChildren(topSpacer, bottomSpacer)
       spacersAttached = true
@@ -296,7 +343,16 @@ export const createBody = (context: GridBodyContext): GridBody => {
     }
 
     for (const [index, virtualItem] of virtualItems.entries()) {
-      updateRowElement(rowElements[index], rows[virtualItem.index], virtualItem.index)
+      const rowElement = rowElements[index]
+      updateRowElement(rowElement, rows[virtualItem.index], virtualItem.index)
+
+      if (context.autoRowHeight) {
+        // The virtualizer resolves a measurement to its row through this
+        // attribute, so it has to be current BEFORE the element is handed
+        // over - recycled elements arrive carrying the previous index.
+        rowElement.dataset.index = String(virtualItem.index)
+        virtualizer.measureElement(rowElement)
+      }
     }
   }
 
@@ -325,7 +381,7 @@ export const createBody = (context: GridBodyContext): GridBody => {
       if (signature !== layoutSignature) {
         currentColumns = columns
         layoutSignature = signature
-        cellCount = currentColumns.length + (context.selection ? 1 : 0);
+        cellCount = currentColumns.length + leadingCount;
         (topSpacer.firstElementChild as HTMLTableCellElement).colSpan = Math.max(cellCount, 1);
         (bottomSpacer.firstElementChild as HTMLTableCellElement).colSpan = Math.max(cellCount, 1)
       }

package/src/ui/header.ts

@@ -7,7 +7,7 @@
 
 import { interpolate } from '../labels'
 import type {
- DataGridColumn, DataGridItem, DataGridLabels, DataGridSlot, SortingState, Table
+ DataGridColumn, DataGridLabels, DataGridSlot, DataGridTable, SortingState
 } from '../types'
 import { applyPinnedCell, type GridPinning } from './pinning'
 
@@ -17,6 +17,7 @@ const CLASS_NAME_HEADER_LABEL = 'data-grid-header-label'
 const CLASS_NAME_FILTER_ROW = 'data-grid-filter-row'
 const CLASS_NAME_RESIZER = 'data-grid-resizer'
 const CLASS_NAME_RESIZER_ACTIVE = 'data-grid-resizer-active'
+const CLASS_NAME_HANDLE_CELL = 'data-grid-row-handle-cell'
 const CLASS_NAME_SELECT_CELL = 'data-grid-select-cell'
 const CLASS_NAME_SORTABLE = 'data-grid-sortable'
 const CLASS_NAME_SORT_BUTTON = 'data-grid-sort-button'
@@ -44,9 +45,10 @@ export interface GridHeaderContext {
   isSortable: (column: DataGridColumn) => boolean
   labels: DataGridLabels
   resizable: boolean
+  rowOrder: boolean
   selection: boolean
   selectAll: boolean
-  table: Table<DataGridItem>
+  table: DataGridTable
 }
 
 export interface GridHeaderState {
@@ -113,6 +115,15 @@ const createSelectAllCell = (context: GridHeaderContext): { cell: HTMLTableCellE
   return { cell, input }
 }
 
+// The handle column has no header of its own; the cell only reserves the
+// width so the body's grips line up under it.
+const createHandleHeaderCell = (): HTMLTableCellElement => {
+  const cell = document.createElement('th')
+  cell.classList.add(CLASS_NAME_HANDLE_CELL)
+  cell.setAttribute('scope', 'col')
+  return cell
+}
+
 const createResizer = (): HTMLElement => {
   const resizer = document.createElement('span')
   resizer.classList.add(CLASS_NAME_RESIZER)
@@ -129,20 +140,30 @@ const createLabelRow = (
 ): {
   row: HTMLTableRowElement
   selectAllInput: HTMLInputElement | null
-  selectCell: HTMLTableCellElement | null
+  leadingCells: HTMLTableCellElement[]
 } => {
   const row = document.createElement('tr')
   let selectAllInput: HTMLInputElement | null = null
-  let selectCell: HTMLTableCellElement | null = null
+  const leadingCells: HTMLTableCellElement[] = []
 
   if (context.cellNavigation) {
     row.setAttribute('role', 'row')
   }
 
+  if (context.rowOrder) {
+    const cell = createHandleHeaderCell()
+    if (context.cellNavigation) {
+      cell.setAttribute('role', 'columnheader')
+    }
+
+    leadingCells.push(cell)
+    row.append(cell)
+  }
+
   if (context.selection) {
     const { cell, input } = createSelectAllCell(context)
     selectAllInput = input
-    selectCell = cell
+    leadingCells.push(cell)
     if (context.cellNavigation) {
       cell.setAttribute('role', 'columnheader')
       if (input) {
@@ -240,25 +261,28 @@ const createLabelRow = (
     row.append(cell)
   }
 
-  return { row, selectAllInput, selectCell }
+  return { row, selectAllInput, leadingCells }
 }
 
 const createFilterRow = (
   context: GridHeaderContext,
   filterCells: Map<string, HTMLTableCellElement>,
   filterSlots: DataGridSlot[]
-): { row: HTMLTableRowElement; selectCell: HTMLTableCellElement | null } => {
+): { row: HTMLTableRowElement; leadingCells: HTMLTableCellElement[] } => {
   const row = document.createElement('tr')
   row.classList.add(CLASS_NAME_FILTER_ROW)
   if (context.cellNavigation) {
     row.setAttribute('role', 'row')
   }
 
-  let selectCell: HTMLTableCellElement | null = null
+  const leadingCells: HTMLTableCellElement[] = []
 
-  if (context.selection) {
-    selectCell = document.createElement('th')
-    row.append(selectCell)
+  for (const leading of [context.rowOrder, context.selection]) {
+    if (leading) {
+      const cell = document.createElement('th')
+      leadingCells.push(cell)
+      row.append(cell)
+    }
   }
 
   for (const column of context.columns) {
@@ -274,7 +298,7 @@ const createFilterRow = (
     row.append(cell)
   }
 
-  return { row, selectCell }
+  return { row, leadingCells }
 }
 
 export const createHeader = (context: GridHeaderContext): GridHeader => {
@@ -288,14 +312,14 @@ export const createHeader = (context: GridHeaderContext): GridHeader => {
   const filterSlots: DataGridSlot[] = []
   const movableColumns = new Map(context.columns.map(column => [column.key, column.movable !== false]))
 
-  const { row, selectAllInput, selectCell } = createLabelRow(context, cells, resizers, sortIcons)
+  const { row, selectAllInput, leadingCells } = createLabelRow(context, cells, resizers, sortIcons)
   element.append(row)
 
   let filterRowElement: HTMLTableRowElement | null = null
-  let filterSelectCell: HTMLTableCellElement | null = null
+  let filterLeadingCells: HTMLTableCellElement[] = []
   if (context.filterRow) {
     const filterRow = createFilterRow(context, filterCells, filterSlots)
-    filterSelectCell = filterRow.selectCell
+    filterLeadingCells = filterRow.leadingCells
     filterRowElement = filterRow.row
     element.append(filterRow.row)
   }
@@ -309,9 +333,9 @@ export const createHeader = (context: GridHeaderContext): GridHeader => {
     const reorderRow = (
       rowElement: HTMLTableRowElement,
       cellMap: Map<string, HTMLTableCellElement>,
-      leading: HTMLTableCellElement | null
+      leading: HTMLTableCellElement[]
     ) => {
-      const ordered: HTMLTableCellElement[] = leading ? [leading] : []
+      const ordered: HTMLTableCellElement[] = [...leading]
       for (const id of order) {
         const cell = cellMap.get(id)
         if (cell) {
@@ -333,9 +357,9 @@ export const createHeader = (context: GridHeaderContext): GridHeader => {
       }
     }
 
-    reorderRow(row, cells, selectCell)
+    reorderRow(row, cells, leadingCells)
     if (filterRowElement) {
-      reorderRow(filterRowElement, filterCells, filterSelectCell)
+      reorderRow(filterRowElement, filterCells, filterLeadingCells)
     }
   }
 
@@ -388,11 +412,14 @@ export const createHeader = (context: GridHeaderContext): GridHeader => {
 
         for (const [key, cell] of cells) {
           const draggable = Boolean(movableColumns.get(key)) && (movablePerRegion.get(regionOf(key)) ?? 0) > 1
-          cell.draggable = draggable
           if (draggable) {
             cell.dataset.coreuiDraggable = ''
+            // Without this the browser scrolls (or picks text) instead of
+            // handing the pointer stream to the drag controller on touch.
+            cell.style.touchAction = 'none'
           } else {
             delete cell.dataset.coreuiDraggable
+            cell.style.touchAction = ''
           }
         }
       }
@@ -414,12 +441,10 @@ export const createHeader = (context: GridHeaderContext): GridHeader => {
           applyPinnedCell(cell, state.pinning.columns[key] ?? null)
         }
 
-        if (selectCell) {
-          applyPinnedCell(selectCell, state.pinning.select)
-        }
-
-        if (filterSelectCell) {
-          applyPinnedCell(filterSelectCell, state.pinning.select)
+        // Every leading cell (the handle column, the select column) shares
+        // the select column's pin — they travel together at the start edge.
+        for (const cell of [...leadingCells, ...filterLeadingCells]) {
+          applyPinnedCell(cell, state.pinning.select)
         }
       }
 

package/src/ui/loading.ts

@@ -14,9 +14,9 @@ export interface GridLoading {
   setVisible: (visible: boolean) => void
 }
 
-export const createLoading = (labels: DataGridLabels): GridLoading => {
+export const createLoading = (labels: DataGridLabels, className = CLASS_NAME_LOADING): GridLoading => {
   const element = document.createElement('div')
-  element.classList.add(CLASS_NAME_LOADING)
+  element.classList.add(className)
   element.hidden = true
 
   const spinner = document.createElement('div')