@svgrid/grid 2.2.31 → 2.2.33

package/src/facet-buckets.test.ts

@@ -62,11 +62,11 @@ describe('isBucketableColumn', () => {
   const cols = makeColumns()
 
   it('returns { isDate: false } for a number column', () => {
-    expect(isBucketableColumn(cols.num)).toEqual({ isDate: false })
+    expect(isBucketableColumn(cols.num!)).toEqual({ isDate: false })
   })
 
   it('returns { isDate: true } for a date column', () => {
-    expect(isBucketableColumn(cols.when)).toEqual({ isDate: true })
+    expect(isBucketableColumn(cols.when!)).toEqual({ isDate: true })
   })
 
   it('returns { isDate: true } for a datetime column', () => {
@@ -81,15 +81,15 @@ describe('isBucketableColumn', () => {
   })
 
   it('returns null for a text column', () => {
-    expect(isBucketableColumn(cols.id)).toBeNull()
+    expect(isBucketableColumn(cols.id!)).toBeNull()
   })
 
   it('returns null for a checkbox column', () => {
-    expect(isBucketableColumn(cols.flag)).toBeNull()
+    expect(isBucketableColumn(cols.flag!)).toBeNull()
   })
 
   it('returns null for a column with no editorType', () => {
-    expect(isBucketableColumn(cols.name)).toBeNull()
+    expect(isBucketableColumn(cols.name!)).toBeNull()
   })
 })
 
@@ -105,7 +105,7 @@ describe('buildBuckets - numeric', () => {
       name: '',
       flag: false,
     }))
-    expect(buildBuckets(cols.num, false, data, accessor)).toBeNull()
+    expect(buildBuckets(cols.num!, false, data, accessor)).toBeNull()
   })
 
   it('builds 10 buckets when distinct values exceed the threshold', () => {
@@ -117,7 +117,7 @@ describe('buildBuckets - numeric', () => {
       name: '',
       flag: false,
     }))
-    const buckets = buildBuckets(cols.num, false, data, accessor)
+    const buckets = buildBuckets(cols.num!, false, data, accessor)
     expect(buckets).not.toBeNull()
     expect(buckets!).toHaveLength(10)
   })
@@ -130,12 +130,12 @@ describe('buildBuckets - numeric', () => {
       name: '',
       flag: false,
     }))
-    const buckets = buildBuckets(cols.num, false, data, accessor)!
-    expect(buckets[0].numericMin).toBe(0)
-    expect(buckets[9].numericMax).toBe(30)
+    const buckets = buildBuckets(cols.num!, false, data, accessor)!
+    expect(buckets[0]!.numericMin).toBe(0)
+    expect(buckets[9]!.numericMax).toBe(30)
     // bucket i's max equals bucket i+1's min (contiguous, no gaps)
     for (let i = 0; i < buckets.length - 1; i += 1) {
-      expect(buckets[i].numericMax).toBeCloseTo(buckets[i + 1].numericMin, 10)
+      expect(buckets[i]!.numericMax).toBeCloseTo(buckets[i + 1]!.numericMin, 10)
     }
   })
 
@@ -147,10 +147,10 @@ describe('buildBuckets - numeric', () => {
       name: '',
       flag: false,
     }))
-    const buckets = buildBuckets(cols.num, false, data, accessor)!
+    const buckets = buildBuckets(cols.num!, false, data, accessor)!
     expect(buckets.filter((b) => b.isLast)).toHaveLength(1)
-    expect(buckets[9].isLast).toBe(true)
-    expect(buckets[0].isLast).toBe(false)
+    expect(buckets[9]!.isLast).toBe(true)
+    expect(buckets[0]!.isLast).toBe(false)
     expect(buckets.every((b) => b.isDate === false)).toBe(true)
   })
 
@@ -162,8 +162,8 @@ describe('buildBuckets - numeric', () => {
       name: '',
       flag: false,
     }))
-    const buckets = buildBuckets(cols.num, false, data, accessor)!
-    expect(buckets[0].label).toContain('–')
+    const buckets = buildBuckets(cols.num!, false, data, accessor)!
+    expect(buckets[0]!.label).toContain('–')
   })
 
   it('ignores non-finite / blank values when computing min/max and distinct', () => {
@@ -180,10 +180,10 @@ describe('buildBuckets - numeric', () => {
       { id: 'b', num: undefined as unknown as number, when: '', name: '', flag: false },
       { id: 'c', num: 'not-a-number' as unknown as number, when: '', name: '', flag: false },
     ]
-    const buckets = buildBuckets(cols.num, false, data, accessor)!
+    const buckets = buildBuckets(cols.num!, false, data, accessor)!
     // range is still 0..30 - the junk rows were skipped
-    expect(buckets[0].numericMin).toBe(0)
-    expect(buckets[9].numericMax).toBe(30)
+    expect(buckets[0]!.numericMin).toBe(0)
+    expect(buckets[9]!.numericMax).toBe(30)
   })
 
   it('returns null when all finite values are identical (min === max)', () => {
@@ -196,7 +196,7 @@ describe('buildBuckets - numeric', () => {
       name: '',
       flag: false,
     }))
-    expect(buildBuckets(cols.num, false, data, accessor)).toBeNull()
+    expect(buildBuckets(cols.num!, false, data, accessor)).toBeNull()
   })
 
   it('returns null when there is no finite data at all', () => {
@@ -207,11 +207,11 @@ describe('buildBuckets - numeric', () => {
       name: '',
       flag: false,
     }))
-    expect(buildBuckets(cols.num, false, data, accessor)).toBeNull()
+    expect(buildBuckets(cols.num!, false, data, accessor)).toBeNull()
   })
 
   it('returns null for an empty dataset', () => {
-    expect(buildBuckets(cols.num, false, [], accessor)).toBeNull()
+    expect(buildBuckets(cols.num!, false, [], accessor)).toBeNull()
   })
 
   it('handles negative ranges', () => {
@@ -222,9 +222,9 @@ describe('buildBuckets - numeric', () => {
       name: '',
       flag: false,
     }))
-    const buckets = buildBuckets(cols.num, false, data, accessor)!
-    expect(buckets[0].numericMin).toBe(-20)
-    expect(buckets[9].numericMax).toBe(20)
+    const buckets = buildBuckets(cols.num!, false, data, accessor)!
+    expect(buckets[0]!.numericMin).toBe(-20)
+    expect(buckets[9]!.numericMax).toBe(20)
   })
 })
 
@@ -241,11 +241,11 @@ describe('buildBuckets - date', () => {
       name: '',
       flag: false,
     }))
-    const buckets = buildBuckets(cols.when, true, data, accessor)!
+    const buckets = buildBuckets(cols.when!, true, data, accessor)!
     expect(buckets).toHaveLength(10)
     expect(buckets.every((b) => b.isDate === true)).toBe(true)
     // labels should look like dates (contain a 4-digit year)
-    expect(buckets[0].label).toMatch(/\d{4}/)
+    expect(buckets[0]!.label).toMatch(/\d{4}/)
   })
 
   it('accepts Date instances directly', () => {
@@ -257,9 +257,9 @@ describe('buildBuckets - date', () => {
     )
     // accessor reads row[column.id]; column id is 'when'
     const rows = data.map((d) => ({ when: d.when })) as unknown as Row[]
-    const buckets = buildBuckets(cols.when, true, rows, accessor)!
+    const buckets = buildBuckets(cols.when!, true, rows, accessor)!
     expect(buckets).toHaveLength(10)
-    expect(buckets[0].numericMin).toBe(start)
+    expect(buckets[0]!.numericMin).toBe(start)
   })
 
   it('returns null when date values are too few', () => {
@@ -270,7 +270,7 @@ describe('buildBuckets - date', () => {
       name: '',
       flag: false,
     }))
-    expect(buildBuckets(cols.when, true, data, accessor)).toBeNull()
+    expect(buildBuckets(cols.when!, true, data, accessor)).toBeNull()
   })
 
   it('skips invalid date strings', () => {
@@ -286,9 +286,9 @@ describe('buildBuckets - date', () => {
       })),
       { id: 'bad', num: 0, when: 'not-a-date', name: '', flag: false },
     ]
-    const buckets = buildBuckets(cols.when, true, data, accessor)!
+    const buckets = buildBuckets(cols.when!, true, data, accessor)!
     expect(buckets).toHaveLength(10)
-    expect(buckets[0].numericMin).toBe(start)
+    expect(buckets[0]!.numericMin).toBe(start)
   })
 })
 
@@ -344,7 +344,7 @@ describe('isInBucket', () => {
       name: '',
       flag: false,
     }))
-    const buckets = buildBuckets(cols.num, false, data, accessor)!
+    const buckets = buildBuckets(cols.num!, false, data, accessor)!
     for (const v of [0, 1, 15, 50, 99, 100]) {
       const hits = buckets.filter((b) => isInBucket(v, b))
       expect(hits).toHaveLength(1)

package/src/features.ts

@@ -2,104 +2,14 @@
 // reading/writing controller state via the `ctx` handle; the reactive core
 // ($state/$derived/$effect) stays in the controller.
 import {
-    applyExcelFilter,
-    normalizeForFilter,
-    createColumnVirtualizer,
-    createCoreRowModel,
-    createExpandedRowModel,
-    createFilteredRowModel,
-    createGroupedRowModel,
-    createSvelteVirtualizer,
-    createSortedRowModel,
-    createSvGrid,
-    getGridCellDomId,
-    sortFns,
     tableFeatures,
     rowSortingFeature,
     columnFilteringFeature,
     columnGroupingFeature,
-    type CellEditorOption,
-    type Column,
-    type ColumnDef,
-    type Row,
     type RowData,
     type TableFeatures,
   } from "./index";
 import "./sv-grid-scrollbar";
-import {
-    computeColumnStat,
-    formatsNeedingStats,
-    type ColumnStat,
-  } from "./conditional-formatting";
-import SvGridDropdown from "./SvGridDropdown.svelte";
-import type {
-    Props,
-    SelectionRange,
-    CellEditState,
-    FilterOperator,
-    MenuPosition,
-  } from "./SvGrid.types";
-import {
-    rawToNumber,
-  } from "./SvGrid.helpers";
-import {
-    createScrollSync,
-  } from "./scroll-sync";
-import {
-    createKeyboard,
-  } from "./keyboard-handlers";
-import {
-    createSummaries,
-  } from "./summaries";
-import {
-    createMenus,
-  } from "./menus";
-import {
-    createCellRender,
-  } from "./cell-render";
-import {
-    createEditing,
-  } from "./editing";
-import {
-    createSelection,
-  } from "./selection";
-import {
-    createColumns,
-  } from "./columns";
-import {
-    createGridApi,
-  } from "./build-api";
-import {
-    createClipboard,
-  } from "./clipboard";
-import {
-    filterOperatorOptions,
-    fallbackOperatorOption,
-    TEXT_OPERATORS,
-    NUMBER_OPERATORS,
-    DATE_OPERATORS,
-    CHECKBOX_OPERATORS,
-    operatorOption,
-    operatorsForColumn,
-    defaultOperatorFor,
-    operatorLabelFor,
-  } from "./filter-operators";
-import {
-    type FacetBucket,
-    isBucketableColumn,
-    buildBuckets,
-    isInBucket,
-  } from "./facet-buckets";
-import {
-    getColumnBaseValue,
-    isGroupRow,
-    toolPanelHeaderLabel,
-    formatSummaryNumeric,
-    getColumnAlign,
-    getPinnedCellValue,
-    getColumnAccessorValue,
-    columnDefMatchesId,
-  } from "./cell-values";
 
 export function createFeatures<
   TFeatures extends TableFeatures = TableFeatures,

package/src/group-display.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { buildAutoGroupColumns, insertGroupFooters } from './group-display'
+import { buildAutoGroupColumns, insertGroupFooters, paginateGroupedRows } from './group-display'
 
 type R = { id: string; depth: number; group?: boolean; total?: number; footer?: boolean }
 
@@ -75,3 +75,93 @@ describe('buildAutoGroupColumns', () => {
     expect(r.autoColumns.map((c) => c.field)).toEqual(['region', 'category'])
   })
 })
+
+describe('paginateGroupedRows (#73)', () => {
+  // Ten groups of two rows each - the shape from the issue report, where
+  // slicing the flat list by pageSize leaves almost no data on a page.
+  const many: R[] = []
+  for (let g = 0; g < 10; g += 1) {
+    many.push({ id: `g${g}`, depth: 0, group: true })
+    many.push({ id: `g${g}r0`, depth: 1 })
+    many.push({ id: `g${g}r1`, depth: 1 })
+  }
+  const base = { getDepth: (r: R) => r.depth, isGroup: (r: R) => !!r.group }
+
+  it('counts only data rows against pageSize', () => {
+    const { rows, dataRowCount } = paginateGroupedRows(many, { ...base, pageIndex: 0, pageSize: 10 })
+    expect(dataRowCount).toBe(20)
+    // A naive slice would have yielded 10 rows TOTAL, only ~3 of them data.
+    expect(rows.filter((r) => !r.group)).toHaveLength(10)
+  })
+
+  it('reprints the banner each page a group appears on', () => {
+    const page0 = paginateGroupedRows(many, { ...base, pageIndex: 0, pageSize: 3 }).rows
+    expect(page0.map((r) => r.id)).toEqual(['g0', 'g0r0', 'g0r1', 'g1', 'g1r0'])
+    // g1 is reprinted because its second row leads the next page.
+    const page1 = paginateGroupedRows(many, { ...base, pageIndex: 1, pageSize: 3 }).rows
+    expect(page1.map((r) => r.id)).toEqual(['g1', 'g1r1', 'g2', 'g2r0', 'g2r1'])
+  })
+
+  it('emits a banner once for a group spanning many rows on one page', () => {
+    const wide: R[] = [{ id: 'g', depth: 0, group: true }]
+    for (let i = 0; i < 5; i += 1) wide.push({ id: `r${i}`, depth: 1 })
+    const { rows } = paginateGroupedRows(wide, { ...base, pageIndex: 0, pageSize: 5 })
+    expect(rows.filter((r) => r.group)).toHaveLength(1)
+    expect(rows).toHaveLength(6)
+  })
+
+  it('reprints the whole ancestor chain for nested groups', () => {
+    const nested: R[] = [
+      { id: 'A', depth: 0, group: true },
+      { id: 'A1', depth: 1, group: true },
+      { id: 'x', depth: 2 },
+      { id: 'y', depth: 2 },
+    ]
+    const page1 = paginateGroupedRows(nested, { ...base, pageIndex: 1, pageSize: 1 }).rows
+    expect(page1.map((r) => r.id)).toEqual(['A', 'A1', 'y'])
+  })
+
+  it('gives a COLLAPSED group its own page slot', () => {
+    // All groups collapsed: the flat model is banners only. Treating those as
+    // zero-cost headers left every page empty - a real bug caught by the DOM test.
+    const collapsed: R[] = []
+    for (let g = 0; g < 10; g += 1) collapsed.push({ id: `c${g}`, depth: 0, group: true })
+    const { rows, dataRowCount } = paginateGroupedRows(collapsed, {
+      ...base,
+      isExpanded: () => false,
+      pageIndex: 0,
+      pageSize: 4,
+    })
+    expect(dataRowCount).toBe(10)
+    expect(rows.map((r) => r.id)).toEqual(['c0', 'c1', 'c2', 'c3'])
+  })
+
+  it('mixes an expanded group with a collapsed sibling', () => {
+    const mixed: R[] = [
+      { id: 'open', depth: 0, group: true },
+      { id: 'o1', depth: 1 },
+      { id: 'o2', depth: 1 },
+      { id: 'shut', depth: 0, group: true },
+    ]
+    const { rows, dataRowCount } = paginateGroupedRows(mixed, {
+      ...base,
+      isExpanded: (r: R) => r.id === 'open',
+      pageIndex: 0,
+      pageSize: 5,
+    })
+    // 2 data rows + 1 collapsed group = 3 units; the open banner is free.
+    expect(dataRowCount).toBe(3)
+    expect(rows.map((r) => r.id)).toEqual(['open', 'o1', 'o2', 'shut'])
+  })
+
+  it('handles an out-of-range page', () => {
+    expect(paginateGroupedRows(many, { ...base, pageIndex: 99, pageSize: 10 }).rows).toEqual([])
+  })
+
+  it('leaves ungrouped data untouched', () => {
+    const flat: R[] = [{ id: 'a', depth: 0 }, { id: 'b', depth: 0 }, { id: 'c', depth: 0 }]
+    const { rows, dataRowCount } = paginateGroupedRows(flat, { ...base, pageIndex: 1, pageSize: 2 })
+    expect(dataRowCount).toBe(3)
+    expect(rows.map((r) => r.id)).toEqual(['c'])
+  })
+})

package/src/group-display.ts

@@ -70,6 +70,89 @@ export function insertGroupFooters<R>(rows: ReadonlyArray<R>, opts: GroupFooterO
   return out
 }
 
+export type GroupPaginationOptions<R> = {
+  /** Depth of a row (group rows and their descendants). */
+  getDepth: (row: R) => number
+  /** True when a row is a group (banner) row. */
+  isGroup: (row: R) => boolean
+  /**
+   * True when a group row is expanded. Defaults to treating every group as
+   * expanded. This matters: an EXPANDED group is a header, reprinted above its
+   * children and costing no page budget, while a COLLAPSED group is the visible
+   * unit itself and must consume a slot - otherwise a fully collapsed grid has
+   * no budget-consuming rows at all and every page comes back empty.
+   */
+  isExpanded?: (row: R) => boolean
+  pageIndex: number
+  pageSize: number
+}
+
+export type GroupPaginationResult<R> = {
+  /** The rows to render for this page: the page's budget-consuming rows, each
+   *  preceded by whichever ancestor banners have not been printed yet. */
+  rows: R[]
+  /** Budget-consuming rows across every page - what the pager divides by.
+   *  Data rows plus collapsed group rows; expanded banners do not count. */
+  dataRowCount: number
+}
+
+/**
+ * Paginate a grouped row list by DATA rows, repeating each page's ancestor
+ * group headers.
+ *
+ * Slicing the flat grouped list directly counts group banners against
+ * `pageSize`, so `pageSize: 10` over ten groups of two shows almost no data
+ * (#73). Here only non-group rows consume the page budget, and a page reprints
+ * the group chain its first rows sit under - the same thing a spreadsheet does
+ * when a grouped table breaks across pages.
+ *
+ * Ancestors are tracked with a depth stack rather than parent pointers, so this
+ * works on the already-flattened expanded model and needs nothing from the row
+ * objects but depth and group-ness.
+ */
+export function paginateGroupedRows<R>(
+  rows: ReadonlyArray<R>,
+  opts: GroupPaginationOptions<R>,
+): GroupPaginationResult<R> {
+  const { getDepth, isGroup, isExpanded, pageIndex, pageSize } = opts
+  const expanded = isExpanded ?? (() => true)
+  const start = pageIndex * pageSize
+  const end = start + pageSize
+
+  const out: R[] = []
+  // Expanded banners currently open, outermost first. `printed` marks the ones
+  // this page has already emitted, so a group spanning rows 3-8 prints its
+  // banner once, not once per row.
+  const openGroups: Array<{ row: R; printed: boolean }> = []
+  let unitsSeen = 0
+
+  for (const row of rows) {
+    const depth = getDepth(row)
+    // A row at depth <= an open banner's depth closes it.
+    while (openGroups.length > 0 && getDepth(openGroups[openGroups.length - 1]!.row) >= depth) {
+      openGroups.pop()
+    }
+    if (isGroup(row) && expanded(row)) {
+      // A header for rows that follow: reprinted per page, costs no budget.
+      openGroups.push({ row, printed: false })
+      continue
+    }
+    // Everything else is a visible unit: a data row, or a collapsed group
+    // standing in for its whole subtree.
+    const index = unitsSeen
+    unitsSeen += 1
+    if (index < start || index >= end) continue
+    for (const g of openGroups) {
+      if (g.printed) continue
+      g.printed = true
+      out.push(g.row)
+    }
+    out.push(row)
+  }
+
+  return { rows: out, dataRowCount: unitsSeen }
+}
+
 export type AutoGroupColumnSpec = {
   /** Synthetic column id (e.g. `__autoGroup` or `__group_<field>`). */
   id: string

package/src/index.ts

@@ -32,6 +32,8 @@ export {
   createGroupedRowModel,
   createPaginatedRowModel,
   createSortedRowModel,
+  createTreeRowModel,
+  flattenTreeData,
   applyGroupAggregate,
   filterFns,
   rowExpandingFeature,
@@ -52,6 +54,8 @@ export {
   type Column,
   type ColumnDef,
   type ColumnDefTemplate,
+  type GridColumnDef,
+  type GridColumns,
   type GroupAggregator,
   type Header,
   type HeaderContext,
@@ -62,6 +66,8 @@ export {
   type SvGrid as SvGridInstance,
   type SvGridOptions,
   type TableFeatures,
+  type TreeRowModelOptions,
+  type FlattenTreeOptions,
   type Updater,
 } from './core'
 
@@ -671,10 +677,13 @@ export {
 export {
   insertGroupFooters,
   buildAutoGroupColumns,
+  paginateGroupedRows,
   type GroupDisplayType,
   type GroupFooterOptions,
   type AutoGroupColumnSpec,
   type AutoGroupResult,
+  type GroupPaginationOptions,
+  type GroupPaginationResult,
 } from './group-display'
 export { getKeyboardIntent, getNextActiveCell, type GridKeyboardIntent } from './keyboard'
 export { createVirtualizer } from './virtualization/virtualizer'

package/src/keyboard-handlers.coverage.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createKeyboard } from './keyboard-handlers'
 
 // createKeyboard returns imperative handlers that read/write a controller

package/src/keyboard-handlers.ts

@@ -2,130 +2,10 @@
 // reading/writing controller state via the `ctx` handle; the reactive core
 // ($state/$derived/$effect) stays in the controller.
 import {
-  applyExcelFilter,
-  normalizeForFilter,
-  createColumnVirtualizer,
-  createCoreRowModel,
-  createExpandedRowModel,
-  createFilteredRowModel,
-  createGroupedRowModel,
-  createPaginatedRowModel,
-  createSvelteVirtualizer,
-  createSortedRowModel,
-  createSvGrid,
-  filterFns,
-  getGridCellA11yProps,
-  getGridCellDomId,
-  getGridHeaderA11yProps,
-  getGridRootA11yProps,
-  getGridRowA11yProps,
-  parseEditorValue,
-  normalizeEditorOptions,
-  sortFns,
-  tableFeatures,
-  rowSortingFeature,
-  columnFilteringFeature,
-  columnGroupingFeature,
-  type CellContext,
-  type EditorContext,
-  type CellEditorOption,
-  type CellEditorType,
-  type CellFormatter,
-  type CellFormatConfig,
-  type Column,
-  type ColumnDef,
-  type Row,
   type RowData,
-  type SvGridApi,
   type TableFeatures,
 } from "./index";
 import "./sv-grid-scrollbar";
-import type { Snippet } from "svelte";
-import {
-  formatNumericWithConfig,
-  getDateFormatter,
-  resolveDatePattern,
-} from "./cell-formatting";
-import {
-  RenderSnippetConfig,
-  RenderComponentConfig,
-} from "./render-component";
-import { buildFillPattern } from "./fill-patterns";
-import { buildSparkline, toSparklineValues } from "./sparkline";
-import {
-  resolveCellFormat,
-  computeColumnStat,
-  formatsNeedingStats,
-  type ColumnStat,
-  type ResolvedCellFormat,
-} from "./conditional-formatting";
-import SvGridDropdown from "./SvGridDropdown.svelte";
-import type {
-  Props,
-  SelectionPoint,
-  SelectionRange,
-  CellEditState,
-  FilterOperator,
-  FilterOption,
-  MenuPosition,
-} from "./SvGrid.types";
-import {
-  cfTextStyle,
-  fmtStat,
-  getCellKey,
-  resolveClassList,
-  toDateInputValue,
-  toDateTimeLocalInputValue,
-  getEditableInputValue,
-  getEditorInputType,
-  toValueArray,
-  getOptionLabel,
-  getOptionColor,
-  colorfulChipStyle,
-  getEditorClass,
-  asDate,
-  clampMenuX,
-  cssEscape,
-  rawToNumber,
-  formatFacetNumber,
-  formatFacetDate,
-} from "./SvGrid.helpers";
-import { createSummaries } from "./summaries";
-import { createMenus } from "./menus";
-import { createCellRender } from "./cell-render";
-import { createEditing } from "./editing";
-import { createSelection } from "./selection";
-import { createColumns } from "./columns";
-import { createGridApi } from "./build-api";
-import { createClipboard } from "./clipboard";
-import {
-  filterOperatorOptions,
-  fallbackOperatorOption,
-  TEXT_OPERATORS,
-  NUMBER_OPERATORS,
-  DATE_OPERATORS,
-  CHECKBOX_OPERATORS,
-  operatorOption,
-  operatorsForColumn,
-  defaultOperatorFor,
-  operatorLabelFor,
-} from "./filter-operators";
-import {
-  type FacetBucket,
-  isBucketableColumn,
-  buildBuckets,
-  isInBucket,
-} from "./facet-buckets";
-import {
-  getColumnBaseValue,
-  isGroupRow,
-  toolPanelHeaderLabel,
-  formatSummaryNumeric,
-  getColumnAlign,
-  getPinnedCellValue,
-  getColumnAccessorValue,
-  columnDefMatchesId,
-} from "./cell-values";
 
 import { getKeyboardIntent, getNextActiveCell } from "./keyboard";
 
@@ -249,6 +129,23 @@ export function createKeyboard<
     // expands a collapsed group row, ArrowLeft collapses an expanded one,
     // instead of moving the active cell (treegrid-style). Leaves fall through
     // to normal navigation.
+    // Client tree data gets the same ArrowRight/ArrowLeft contract, driven off
+    // the row model rather than consumer callbacks.
+    if (ctx.props.treeData && (intent === "moveRight" || intent === "moveLeft")) {
+      const row = ctx.allRows[current.rowIndex];
+      if (row?.getCanExpand?.()) {
+        const expanded = row.getIsExpanded?.() ?? false;
+        if (intent === "moveRight" && !expanded) {
+          row.toggleExpanded?.();
+          return;
+        }
+        if (intent === "moveLeft" && expanded) {
+          row.toggleExpanded?.();
+          return;
+        }
+      }
+    }
+
     const serverGroup = ctx.props.serverGroup;
     if (serverGroup && (intent === "moveRight" || intent === "moveLeft")) {
       const data = ctx.allRows[current.rowIndex]?.original;