@cube-dev/ui-kit 0.163.0 → 0.165.0

package/dist/components/data/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":["import { SelectionManager } from '@react-stately/selection';\nimport { useControlledState } from '@react-stately/utils';\nimport { CONTAINER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\nimport { useMultipleSelectionState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { clampPage, getPageInfo } from '../../navigation/Pagination';\nimport { DraggableCollection } from '../../shared/DraggableCollection';\nimport { ItemTableFooter } from '../ItemTable/ItemTableFooter';\nimport { RowCollection } from '../TableBase/RowCollection';\nimport { TableView } from '../TableBase/TableView';\nimport { selectionRowKey } from '../TableBase/types';\nimport { useCellSelection } from '../TableBase/use-cell-selection';\nimport {\n  getDraggableColumnKeys,\n  isColumnDraggable,\n  useColumnOrder,\n} from '../TableBase/use-column-order';\nimport { useContainerWidth } from '../TableBase/use-container-width';\nimport {\n  freezeColumnWidths,\n  useTableColumns,\n} from '../TableBase/use-table-columns';\nimport { ROW_NUMBER_COLUMN_KEY } from '../TableBase/use-table-selection';\nimport { useTableSorts } from '../TableBase/use-table-sorts';\nimport { useTableStorage } from '../TableBase/use-table-storage';\n\nimport type { Key } from '@react-types/shared';\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type {\n  CubeTableColumnLayout,\n  CubeTableRowSection,\n} from '../TableBase/types';\nimport type { CubeDataTableColumn, CubeDataTableProps } from './types';\n\n/** Wide enough for five digits at the dense default. */\nconst ROW_NUMBER_WIDTH = 56;\n\nconst EMPTY_WIDTHS: Record<string, number> = {};\n\nfunction defaultGetRowKey<T>(rowKey: string) {\n  return (row: T, index: number): Key => {\n    const value = (row as any)?.[rowKey];\n\n    return value == null ? index : (value as Key);\n  };\n}\n\n/**\n * A grid for query results.\n *\n * The same engine as `ItemTable` — one `TableView`, one column layout, one\n * value pipeline — with the defaults an analytical grid wants rather than a\n * list's: denser type, banded rows, resizable columns, multi-column sort, and\n * rows pinned for totals.\n *\n * It knows nothing about Cube. Measures, dimensions, pivots and drill-downs\n * reach it as ordinary columns, `render` output and `column.header.menu`\n * content, which is what keeps the ~34 kB of Cloud's column-header menu in\n * Cloud.\n */\nfunction DataTable<T = any>(\n  props: CubeDataTableProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    data,\n    columns,\n    rowKey = 'id',\n    getRowKey,\n    pinnedTopRows,\n    pinnedBottomRows,\n    isLoading = false,\n    loadingIndicator = 'overlay',\n    skeletonRowCount,\n    error,\n    emptyLabel,\n    noResultsLabel,\n    isFiltered,\n    shape = 'plain',\n    // Denser than `ItemTable`'s `medium`: a result grid is read as a block, and\n    // more rows on screen is the point of it.\n    size = 'small',\n    rowSize,\n    rowHeight,\n    headerHeight,\n    isStriped = true,\n    isHeaderHidden,\n    isHeaderSticky,\n    showRowNumbers = false,\n    sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n    paginationMode = 'client',\n    page: pageProp,\n    defaultPage,\n    onPageChange,\n    pageSize: pageSizeProp,\n    defaultPageSize = 100,\n    onPageSizeChange,\n    pageSizeOptions,\n    total: totalProp,\n    totalPages,\n    hasNextPage,\n    summary = true,\n    autoHidePagination = true,\n    footerStart,\n    footerCenter,\n    footerEnd,\n    cellSelectionMode = 'range',\n    isCellSelectable,\n    selectedCellRange,\n    defaultSelectedCellRange,\n    onCellRangeChange,\n    isRowMoveAnimated,\n    isResizable = true,\n    columnWidths: columnWidthsProp,\n    defaultColumnWidths,\n    onColumnResize,\n    isColumnReorderable = false,\n    columnOrder,\n    defaultColumnOrder,\n    onColumnOrderChange,\n    columnContextMenu,\n    onColumnMenuAction,\n    columnMenuTriggerProps,\n    columnMenuProps,\n    isVirtualized,\n    virtualizeThreshold,\n    overscan,\n    getRowProps,\n    storageKey,\n    styles,\n    headerStyles,\n    headerCellStyles,\n    bodyStyles,\n    rowStyles,\n    cellStyles,\n    footerStyles,\n    ariaLabel,\n    qa,\n    mods,\n    ...rest\n  } = props;\n\n  const localRef = useRef<HTMLDivElement>(null);\n  const rootRef = useCombinedRefs(ref, localRef);\n  const [scrollerEl, setScrollerEl] = useState<HTMLElement | null>(null);\n  const containerWidth = useContainerWidth(scrollerEl);\n\n  const storage = useTableStorage(storageKey);\n\n  /**\n   * `dataType` is presentational, so it is folded into the column here rather\n   * than reaching the renderer: `number` right-aligns and takes tabular figures\n   * so digits line up down the column.\n   */\n  const resolvedColumns = useMemo(\n    () =>\n      columns.map((column) => {\n        const isNumeric = column.dataType === 'number';\n\n        return {\n          ...column,\n          align: column.align ?? (isNumeric ? 'end' : 'start'),\n          cellStyles: isNumeric\n            ? {\n                fontVariantNumeric: 'tabular-nums',\n                ...(typeof column.cellStyles === 'object'\n                  ? column.cellStyles\n                  : null),\n              }\n            : column.cellStyles,\n        } as CubeDataTableColumn<T>;\n      }),\n    [columns],\n  );\n\n  // Applied to the SOURCE columns, before `useTableColumns`, so hidden-column\n  // filtering, structural injection and pinned hoisting all still happen\n  // downstream and `columnOrder` can never fight `pin`.\n  const columnOrderState = useColumnOrder<T>({\n    columns: resolvedColumns,\n    columnOrder,\n    defaultColumnOrder,\n    onColumnOrderChange,\n    storage,\n  });\n  const orderedColumns = columnOrderState.columns;\n\n  const {\n    sorts,\n    sortedRows,\n    toggleSort,\n    setColumnSort,\n    mode: resolvedSortMode,\n  } = useTableSorts<T>({\n    columns: orderedColumns,\n    rows: data,\n    mode: sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n  });\n\n  const [pageSize, setPageSizeState] = useControlledState<number>(\n    pageSizeProp as number,\n    (pageSizeProp === undefined && storage.has('pageSize')\n      ? storage.initial.pageSize ?? defaultPageSize\n      : defaultPageSize) as number,\n    onPageSizeChange as (value: number) => void,\n  );\n  const [page, setPageState] = useControlledState<number>(\n    pageProp as number,\n    defaultPage ?? 1,\n    onPageChange as (value: number) => void,\n  );\n\n  const isPaginated = paginationMode !== 'off';\n  const isServerPaginated = paginationMode === 'server';\n  const total = isServerPaginated ? totalProp ?? 0 : sortedRows.length;\n\n  const pageInfo = getPageInfo({\n    page,\n    pageSize,\n    total,\n    totalPages: isServerPaginated ? totalPages : undefined,\n  });\n\n  const setPage = useEvent((next: number) =>\n    setPageState(clampPage(next, pageInfo.totalPages)),\n  );\n  const setPageSize = useEvent((next: number) => {\n    setPageSizeState(next);\n    setPageState(1);\n\n    if (pageSizeProp === undefined) storage.write({ pageSize: next });\n  });\n\n  const visibleRows =\n    paginationMode === 'client'\n      ? sortedRows.slice(\n          (pageInfo.page - 1) * pageSize,\n          pageInfo.page * pageSize,\n        )\n      : sortedRows;\n\n  const [ownColumnWidths, setOwnColumnWidths] = useState<\n    Record<string, number>\n  >(\n    () =>\n      (columnWidthsProp === undefined && storage.has('columnWidths')\n        ? storage.initial.columnWidths ?? defaultColumnWidths\n        : defaultColumnWidths) ?? EMPTY_WIDTHS,\n  );\n  const [draftColumnWidths, setDraftColumnWidths] = useState<Record<\n    string,\n    number\n  > | null>(null);\n  const draftRef = useRef<Record<string, number> | null>(null);\n\n  const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;\n  const columnWidths = draftColumnWidths ?? baseColumnWidths;\n\n  /**\n   * The resolved widths, for the freeze below. A ref because `layout` is\n   * computed *after* this handler is defined, and `useEvent` only reads it when\n   * the drag actually runs.\n   */\n  const layoutRef = useRef<CubeTableColumnLayout<T> | null>(null);\n\n  const handleColumnResize = useEvent((key: string, width: number) => {\n    // First move of a drag freezes every column, so this changes exactly one\n    // width instead of re-splitting the flex pool. See `freezeColumnWidths`.\n    const base =\n      draftRef.current ??\n      freezeColumnWidths(layoutRef.current, baseColumnWidths);\n\n    draftRef.current = { ...base, [key]: Math.round(width) };\n    setDraftColumnWidths(draftRef.current);\n  });\n\n  const handleColumnResizeEnd = useEvent((key: string) => {\n    const next = draftRef.current ?? baseColumnWidths;\n\n    if (columnWidthsProp === undefined) {\n      setOwnColumnWidths(next);\n      storage.write({ columnWidths: next });\n    }\n\n    onColumnResize?.(key, next[key], next);\n    draftRef.current = null;\n    setDraftColumnWidths(null);\n  });\n\n  const leadingColumns = useMemo(\n    () =>\n      showRowNumbers\n        ? [{ key: ROW_NUMBER_COLUMN_KEY, width: ROW_NUMBER_WIDTH }]\n        : undefined,\n    [showRowNumbers],\n  );\n\n  const layout = useTableColumns<T>({\n    columns: orderedColumns,\n    containerWidth,\n    columnWidths,\n    leadingColumns,\n  });\n\n  layoutRef.current = layout;\n\n  const { t } = useI18n();\n\n  const resolvedGetRowKey = useMemo(\n    () => getRowKey ?? defaultGetRowKey<T>(rowKey),\n    [getRowKey, rowKey],\n  );\n\n  // Every row a range can reach, in the order they appear on screen. Pinned rows\n  // are in it: a total is a figure like any other, and having to copy it\n  // separately from the column it sums is the wrong trade.\n  //\n  // The keys are built here rather than inside the hook so they cannot disagree\n  // with the ones the renderer stamps — a pinned row is keyed by its own index\n  // within its group, exactly as `renderPinnedRow` keys it.\n  const selectionRows = useMemo(\n    () => [\n      ...(pinnedTopRows ?? []),\n      ...visibleRows,\n      ...(pinnedBottomRows ?? []),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows],\n  );\n  const selectionRowKeys = useMemo(\n    () => [\n      // Section-qualified, matching what the renderer stamps: the same record\n      // is routinely pinned at both edges, and one flat key space collapsed the\n      // two into whichever came first.\n      ...(pinnedTopRows ?? []).map((row, index) =>\n        selectionRowKey('pinnedTop', resolvedGetRowKey(row, index)),\n      ),\n      ...visibleRows.map(resolvedGetRowKey),\n      ...(pinnedBottomRows ?? []).map((row, index) =>\n        selectionRowKey('pinnedBottom', resolvedGetRowKey(row, index)),\n      ),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows, resolvedGetRowKey],\n  );\n\n  // The hook works in one flat row order; the section a row belongs to is a\n  // property of where it sits in that order, so it is resolved here rather than\n  // asking the consumer to track it.\n  const resolveCellSelectable = useEvent(\n    (row: T, rowKey: Key, columnKey: string) => {\n      if (!isCellSelectable) return true;\n\n      const index = selectionRowKeys.indexOf(rowKey);\n      const topCount = pinnedTopRows?.length ?? 0;\n      const section: CubeTableRowSection =\n        index < topCount\n          ? 'pinnedTop'\n          : index < topCount + visibleRows.length\n            ? 'body'\n            : 'pinnedBottom';\n\n      return isCellSelectable({ row, rowKey, columnKey, section });\n    },\n  );\n\n  const cellSelection = useCellSelection<T>({\n    mode: cellSelectionMode,\n    columns: layout.columns,\n    rows: selectionRows,\n    rowKeys: selectionRowKeys,\n    isCellSelectable: isCellSelectable ? resolveCellSelectable : undefined,\n    range: selectedCellRange,\n    defaultRange: defaultSelectedCellRange,\n    onRangeChange: onCellRangeChange,\n  });\n\n  // Same as `ItemTable`: style props (`height`, `maxHeight`, `margin`, …) land\n  // on the root frame. `height` is the one that matters — there is no\n  // page-scroll mode, so bounding the grid is what turns the body into a\n  // scroller, pins the header, and lets virtualization engage at all.\n  const rootStyles = { ...extractStyles(props, CONTAINER_STYLES), ...styles };\n\n  const smallestPageSize = pageSizeOptions?.length\n    ? Math.min(...pageSizeOptions)\n    : pageSize;\n\n  const showPagination =\n    isPaginated &&\n    !(\n      autoHidePagination &&\n      !hasNextPage &&\n      pageInfo.totalPages <= 1 &&\n      total <= smallestPageSize\n    );\n\n  const hasFooter =\n    showPagination ||\n    footerStart != null ||\n    footerCenter != null ||\n    footerEnd != null;\n\n  /* ── column reordering ────────────────────────────────────────────────── */\n\n  const headRowRef = useRef<HTMLTableRowElement>(null);\n  const draggableColumnKeys = useMemo(\n    () => getDraggableColumnKeys(layout.columns, isColumnReorderable),\n    [layout.columns, isColumnReorderable],\n  );\n  const columnCollection = useMemo(\n    () =>\n      new RowCollection(\n        layout.columns.filter((column) =>\n          isColumnDraggable(column, isColumnReorderable),\n        ),\n        (column) => column.key,\n        new Set(),\n        // The drag announcements read this — otherwise a screen reader hears\n        // \"Insert between  and \".\n        (column) =>\n          typeof column.title === 'string' ? column.title : column.key,\n      ),\n    [layout.columns, isColumnReorderable],\n  );\n  /**\n   * `'single'`, not `'none'`.\n   *\n   * `useDraggableItem` only deletes its own `onClick` — the one that would\n   * hijack a screen-reader click away from the sort — when the selection mode is\n   * not `'none'`, and only then does it attach the keyboard drag description.\n   * Nothing is ever actually selected here.\n   */\n  const columnSelectionState = useMultipleSelectionState({\n    selectionMode: 'single',\n    disabledBehavior: 'all',\n  });\n  const columnSelectionManager = useMemo(\n    () => new SelectionManager(columnCollection, columnSelectionState),\n    [columnCollection, columnSelectionState],\n  );\n  const handleColumnFocus = useEvent((columnKey: string | null) => {\n    columnSelectionManager.setFocusedKey(columnKey);\n  });\n\n  // One draggable column cannot be reordered, so the machinery stays unmounted\n  // and the header keeps its exact DOM.\n  const isColumnDragEnabled =\n    isColumnReorderable && draggableColumnKeys.length > 1;\n\n  const renderTable = (\n    columnDragState?: any,\n    columnDropState?: any,\n    headCollectionProps?: Record<string, any>,\n  ) => (\n    <TableView<T>\n      {...rest}\n      rootRef={rootRef}\n      qa={qa || 'DataTable'}\n      rows={visibleRows}\n      pinnedTopRows={pinnedTopRows}\n      pinnedBottomRows={pinnedBottomRows}\n      // Continuous across pages: row 101 is row 101, not row 1 of page two.\n      //\n      // Server mode counts too — the page and its size are known there just the\n      // same, and `rows` is that page. Only `'off'` starts at 1, because then\n      // there is no page to be on.\n      rowNumberOffset={\n        paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize\n      }\n      // The same offset drives `aria-rowindex`, which is document-absolute by\n      // contract — a screen reader on page 3 should hear \"row 51 of 240\", not\n      // \"row 1 of 25\".\n      rowIndexOffset={\n        paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize\n      }\n      totalRowCount={total}\n      layout={layout}\n      // Always on, unlike `ItemTable`. A result grid is read down a column, and\n      // once the values are wide and right-aligned the rule is what keeps a\n      // figure attached to its column — which is why Cloud's ag-grid theme sets\n      // `columnBorder` for `DataTable` and not for the list grids.\n      hasColumnDividers\n      cellSelection={cellSelection}\n      getRowKey={resolvedGetRowKey}\n      onScrollerRef={setScrollerEl}\n      isLoading={isLoading}\n      loadingIndicator={loadingIndicator}\n      skeletonRowCount={skeletonRowCount}\n      error={error}\n      // Same localized fallbacks as `ItemTable`: a grid that has finished\n      // loading and shows an unexplained blank rectangle reads as broken.\n      emptyLabel={emptyLabel ?? t('itemTable.noItems', 'No items')}\n      noResultsLabel={\n        noResultsLabel ?? t('itemTable.noResults', 'No results found')\n      }\n      isFiltered={isFiltered}\n      shape={shape}\n      size={size}\n      rowSize={rowSize}\n      rowHeight={rowHeight}\n      headerHeight={headerHeight}\n      isStriped={isStriped}\n      isRowMoveAnimated={isRowMoveAnimated}\n      isHeaderHidden={isHeaderHidden}\n      isHeaderSticky={isHeaderSticky}\n      // The header shows the column name at body size — a result grid has no\n      // room for the uppercase caption a list header uses.\n      // `t4` throughout: a result grid is read as a block, and one step down\n      // from the list preset fits noticeably more on screen without losing\n      // legibility. The header takes the medium weight of the same step.\n      contentPreset=\"t4\"\n      headerPreset=\"t4m\"\n      sortMode={resolvedSortMode}\n      sorts={sorts}\n      onColumnSort={toggleSort}\n      onColumnSortChange={setColumnSort}\n      columnContextMenu={columnContextMenu}\n      onColumnMenuAction={onColumnMenuAction}\n      columnMenuTriggerProps={columnMenuTriggerProps}\n      columnMenuProps={columnMenuProps}\n      isVirtualized={isVirtualized}\n      virtualizeThreshold={virtualizeThreshold}\n      overscan={overscan}\n      isResizable={isResizable}\n      onColumnResize={handleColumnResize}\n      onColumnResizeEnd={handleColumnResizeEnd}\n      getRowProps={getRowProps}\n      ariaLabel={ariaLabel}\n      styles={rootStyles}\n      headerStyles={headerStyles}\n      headerCellStyles={headerCellStyles}\n      bodyStyles={bodyStyles}\n      rowStyles={rowStyles}\n      cellStyles={cellStyles}\n      mods={mods}\n      isColumnReorderable={isColumnDragEnabled}\n      columnDragState={columnDragState}\n      columnDropState={columnDropState}\n      headCollectionProps={headCollectionProps}\n      headRowRef={headRowRef}\n      onColumnFocus={handleColumnFocus}\n      footer={\n        hasFooter ? (\n          <ItemTableFooter\n            start={footerStart}\n            center={footerCenter}\n            end={footerEnd}\n            styles={footerStyles}\n            pagination={\n              showPagination\n                ? {\n                    page: pageInfo.page,\n                    pageSize,\n                    total,\n                    totalPages: pageInfo.totalPages,\n                    pageSizeOptions,\n                    summary,\n                    hasNextPage,\n                    onPageChange: setPage,\n                    onPageSizeChange: setPageSize,\n                  }\n                : undefined\n            }\n          />\n        ) : null\n      }\n    />\n  );\n\n  return isColumnDragEnabled ? (\n    <DraggableCollection\n      state={{\n        collection: columnCollection as any,\n        selectionManager: columnSelectionManager as any,\n        disabledKeys: new Set(),\n      }}\n      // The element that DIRECTLY contains the header cells. React Aria's\n      // `ListDropTargetDelegate` resolves a drop by measuring `[data-key]`\n      // descendants of this element, so pointing it anywhere else leaves every\n      // drop unresolvable — the column lifts but never lands.\n      listRef={headRowRef}\n      orderedKeys={draggableColumnKeys}\n      orientation=\"horizontal\"\n      onReorder={columnOrderState.reorder}\n    >\n      {(dragState, dropState, collectionProps) =>\n        renderTable(dragState, dropState, collectionProps)\n      }\n    </DraggableCollection>\n  ) : (\n    renderTable()\n  );\n}\n\nconst _DataTable = forwardRef(DataTable) as unknown as (<T = any>(\n  props: CubeDataTableProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { displayName?: string };\n\n_DataTable.displayName = 'DataTable';\n\nexport { _DataTable as DataTable };\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":["import { useCollator } from '@react-aria/i18n';\nimport { SelectionManager } from '@react-stately/selection';\nimport { useControlledState } from '@react-stately/utils';\nimport { CONTAINER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\nimport { useMultipleSelectionState } from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { clampPage, getPageInfo } from '../../navigation/Pagination';\nimport { DraggableCollection } from '../../shared/DraggableCollection';\nimport { ItemTableFooter } from '../ItemTable/ItemTableFooter';\nimport { RowCollection } from '../TableBase/RowCollection';\nimport {\n  buildTableTree,\n  flattenTableTree,\n  reindexTableTree,\n  sortTableTree,\n} from '../TableBase/table-tree';\nimport { TableView } from '../TableBase/TableView';\nimport { selectionRowKey } from '../TableBase/types';\nimport { useCellSelection } from '../TableBase/use-cell-selection';\nimport {\n  getDraggableColumnKeys,\n  isColumnDraggable,\n  useColumnOrder,\n} from '../TableBase/use-column-order';\nimport { useContainerWidth } from '../TableBase/use-container-width';\nimport {\n  freezeColumnWidths,\n  getColumnText,\n  useTableColumns,\n} from '../TableBase/use-table-columns';\nimport { ROW_NUMBER_COLUMN_KEY } from '../TableBase/use-table-selection';\nimport { compareByColumn } from '../TableBase/use-table-sort';\nimport { useTableSorts } from '../TableBase/use-table-sorts';\nimport { useTableStorage } from '../TableBase/use-table-storage';\nimport { useTableTreeState } from '../TableBase/use-table-tree-state';\n\nimport type { Key } from '@react-types/shared';\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type {\n  CubeTableColumnGroupHeader,\n  CubeTableColumnLayout,\n  CubeTableRowSection,\n} from '../TableBase/types';\nimport type {\n  CubeDataTableColumn,\n  CubeDataTableColumnDefinition,\n  CubeDataTableColumnGroup,\n  CubeDataTableProps,\n} from './types';\n\n/** Wide enough for five digits at the dense default. */\nconst ROW_NUMBER_WIDTH = 56;\n\nconst EMPTY_WIDTHS: Record<string, number> = {};\n\ninterface DataTableColumnModel<T> {\n  columns: CubeDataTableColumn<T>[];\n  headerPaths: Map<string, readonly CubeTableColumnGroupHeader[]>;\n}\n\nfunction isColumnGroup<T>(\n  column: CubeDataTableColumnDefinition<T>,\n): column is CubeDataTableColumnGroup<T> {\n  return 'children' in column;\n}\n\n/** Flattens the public column tree while retaining each leaf's header path. */\nfunction buildColumnModel<T>(\n  definitions: readonly CubeDataTableColumnDefinition<T>[],\n): DataTableColumnModel<T> {\n  const columns: CubeDataTableColumn<T>[] = [];\n  const headerPaths = new Map<string, readonly CubeTableColumnGroupHeader[]>();\n\n  function visit(\n    entries: readonly CubeDataTableColumnDefinition<T>[],\n    path: readonly CubeTableColumnGroupHeader[],\n  ) {\n    for (const entry of entries) {\n      if (isColumnGroup(entry)) {\n        visit(entry.children, [\n          ...path,\n          { key: entry.key, title: entry.title },\n        ]);\n      } else {\n        columns.push(entry);\n        if (path.length) headerPaths.set(entry.key, path);\n      }\n    }\n  }\n\n  visit(definitions, []);\n\n  return { columns, headerPaths };\n}\n\nfunction defaultGetRowKey<T>(rowKey: string) {\n  return (row: T, index: number): Key => {\n    const value = (row as any)?.[rowKey];\n\n    return value == null ? index : (value as Key);\n  };\n}\n\n/**\n * A grid for query results.\n *\n * The same engine as `ItemTable` — one `TableView`, one column layout, one\n * value pipeline — with the defaults an analytical grid wants rather than a\n * list's: denser type, banded rows, resizable columns, multi-column sort, and\n * rows pinned for totals.\n *\n * It knows nothing about Cube. Measures, dimensions, pivots and drill-downs\n * reach it as leaf columns, presentational column groups, `render` output and\n * `column.header.menu` content, which is what keeps the ~34 kB of Cloud's\n * column-header menu in Cloud.\n */\nfunction DataTable<T = any>(\n  props: CubeDataTableProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    data,\n    columns,\n    rowKey = 'id',\n    getRowKey,\n    getRowChildren,\n    treeColumnKey,\n    expandedKeys,\n    defaultExpandedKeys,\n    onExpand,\n    pinnedTopRows,\n    pinnedBottomRows,\n    isLoading = false,\n    loadingIndicator = 'overlay',\n    skeletonRowCount,\n    error,\n    emptyLabel,\n    noResultsLabel,\n    isFiltered,\n    shape = 'plain',\n    // Denser than `ItemTable`'s `medium`: a result grid is read as a block, and\n    // more rows on screen is the point of it.\n    size = 'small',\n    rowSize,\n    rowHeight,\n    headerHeight,\n    isStriped = true,\n    isHeaderHidden,\n    isHeaderSticky,\n    isAutoHeight = false,\n    showRowNumbers = false,\n    sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n    paginationMode = 'client',\n    page: pageProp,\n    defaultPage,\n    onPageChange,\n    pageSize: pageSizeProp,\n    defaultPageSize = 100,\n    onPageSizeChange,\n    pageSizeOptions,\n    total: totalProp,\n    totalPages,\n    hasNextPage,\n    summary = true,\n    autoHidePagination = true,\n    footerStart,\n    footerCenter,\n    footerEnd,\n    cellSelectionMode = 'range',\n    isCellSelectable,\n    selectedCellRange,\n    defaultSelectedCellRange,\n    onCellRangeChange,\n    isRowMoveAnimated,\n    isResizable = true,\n    columnWidths: columnWidthsProp,\n    defaultColumnWidths,\n    onColumnResize,\n    isColumnReorderable = false,\n    columnOrder,\n    defaultColumnOrder,\n    onColumnOrderChange,\n    columnContextMenu,\n    onColumnMenuAction,\n    columnMenuTriggerProps,\n    columnMenuProps,\n    isVirtualized,\n    virtualizeThreshold,\n    overscan,\n    getRowProps,\n    storageKey,\n    styles,\n    headerStyles,\n    headerCellStyles,\n    bodyStyles,\n    rowStyles,\n    cellStyles,\n    footerStyles,\n    ariaLabel,\n    qa,\n    mods,\n    ...rest\n  } = props;\n\n  const localRef = useRef<HTMLDivElement>(null);\n  const rootRef = useCombinedRefs(ref, localRef);\n  const [scrollerEl, setScrollerEl] = useState<HTMLElement | null>(null);\n  const containerWidth = useContainerWidth(scrollerEl);\n\n  const resolvedGetRowKey = useMemo(\n    () => getRowKey ?? defaultGetRowKey<T>(rowKey),\n    [getRowKey, rowKey],\n  );\n\n  const treeModel = useMemo(\n    () =>\n      getRowChildren\n        ? buildTableTree(data, getRowChildren, resolvedGetRowKey)\n        : null,\n    [data, getRowChildren, resolvedGetRowKey],\n  );\n\n  useWarn(treeModel != null && treeModel.duplicateKeys.length > 0, {\n    key: ['data-table-tree-duplicate-keys'],\n    args: [\n      'DataTable:',\n      'Tree row keys must be unique across the complete hierarchy. Duplicate rows were ignored.',\n    ],\n  });\n  useWarn(treeModel != null && treeModel.cyclicKeys.length > 0, {\n    key: ['data-table-tree-cyclic-keys'],\n    args: [\n      'DataTable:',\n      'Tree data contains a cycle. Cyclic descendants were ignored.',\n    ],\n  });\n\n  const storage = useTableStorage(storageKey);\n\n  const columnModel = useMemo(() => buildColumnModel(columns), [columns]);\n  const hasColumnGroups = columnModel.headerPaths.size > 0;\n\n  /**\n   * `dataType` is presentational, so it is folded into the column here rather\n   * than reaching the renderer: `number` right-aligns and takes tabular figures\n   * so digits line up down the column.\n   */\n  const resolvedColumns = useMemo(\n    () =>\n      columnModel.columns.map((column) => {\n        const isNumeric = column.dataType === 'number';\n\n        return {\n          ...column,\n          align: column.align ?? (isNumeric ? 'end' : 'start'),\n          cellStyles: isNumeric\n            ? {\n                fontVariantNumeric: 'tabular-nums',\n                ...(typeof column.cellStyles === 'object'\n                  ? column.cellStyles\n                  : null),\n              }\n            : column.cellStyles,\n        } as CubeDataTableColumn<T>;\n      }),\n    [columnModel.columns],\n  );\n\n  // Applied to the SOURCE columns, before `useTableColumns`, so hidden-column\n  // filtering, structural injection and pinned hoisting all still happen\n  // downstream and `columnOrder` can never fight `pin`.\n  const columnOrderState = useColumnOrder<T>({\n    columns: resolvedColumns,\n    columnOrder,\n    defaultColumnOrder,\n    onColumnOrderChange,\n    storage,\n  });\n  const orderedColumns = columnOrderState.columns;\n\n  const resolvedTreeColumnKey = useMemo(() => {\n    if (!treeModel) return undefined;\n    const visibleColumns = orderedColumns.filter((column) => !column.isHidden);\n    return visibleColumns.some((column) => column.key === treeColumnKey)\n      ? treeColumnKey\n      : visibleColumns[0]?.key;\n  }, [treeModel, orderedColumns, treeColumnKey]);\n\n  useWarn(\n    treeModel != null &&\n      treeColumnKey != null &&\n      resolvedTreeColumnKey !== treeColumnKey,\n    {\n      key: ['data-table-tree-column-invalid', treeColumnKey],\n      args: [\n        'DataTable:',\n        '`treeColumnKey` must identify a visible data column. Falling back to the first visible column.',\n      ],\n    },\n  );\n\n  const {\n    sorts,\n    sortedRows,\n    toggleSort,\n    setColumnSort,\n    mode: resolvedSortMode,\n  } = useTableSorts<T>({\n    columns: orderedColumns,\n    rows: treeModel ? treeModel.roots.map((node) => node.row) : data,\n    mode: treeModel ? 'server' : sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n  });\n\n  const collator = useCollator({ numeric: true, sensitivity: 'base' });\n  const treeSortMode = treeModel\n    ? sortMode ??\n      (orderedColumns.some((column) => column.isSortable) ? 'client' : 'off')\n    : resolvedSortMode;\n  const processedTreeRoots = useMemo(() => {\n    const roots = treeModel?.roots ?? [];\n    if (treeSortMode !== 'client' || !sorts.length) return roots;\n\n    const active = sorts\n      .map((sort) => ({\n        sort,\n        column: orderedColumns.find((column) => column.key === sort.columnKey),\n      }))\n      .filter((entry) => entry.column != null);\n\n    return sortTableTree(roots, (a, b) => {\n      for (const { sort, column } of active) {\n        const result = compareByColumn(\n          column!,\n          collator,\n          a.row,\n          a.sourceIndex,\n          b.row,\n          b.sourceIndex,\n        );\n        if (result !== 0) {\n          return result * (sort.direction === 'asc' ? 1 : -1);\n        }\n      }\n      return a.siblingIndex - b.siblingIndex;\n    });\n  }, [treeModel, treeSortMode, sorts, orderedColumns, collator]);\n\n  const [pageSize, setPageSizeState] = useControlledState<number>(\n    pageSizeProp as number,\n    (pageSizeProp === undefined && storage.has('pageSize')\n      ? storage.initial.pageSize ?? defaultPageSize\n      : defaultPageSize) as number,\n    onPageSizeChange as (value: number) => void,\n  );\n  const [page, setPageState] = useControlledState<number>(\n    pageProp as number,\n    defaultPage ?? 1,\n    onPageChange as (value: number) => void,\n  );\n\n  const isPaginated = paginationMode !== 'off';\n  const isServerPaginated = paginationMode === 'server';\n  const total = isServerPaginated\n    ? totalProp ?? 0\n    : treeModel\n      ? processedTreeRoots.length\n      : sortedRows.length;\n\n  const pageInfo = getPageInfo({\n    page,\n    pageSize,\n    total,\n    totalPages: isServerPaginated ? totalPages : undefined,\n  });\n\n  const setPage = useEvent((next: number) =>\n    setPageState(clampPage(next, pageInfo.totalPages)),\n  );\n  const setPageSize = useEvent((next: number) => {\n    setPageSizeState(next);\n    setPageState(1);\n\n    if (pageSizeProp === undefined) storage.write({ pageSize: next });\n  });\n\n  const flatVisibleRows =\n    paginationMode === 'client'\n      ? sortedRows.slice(\n          (pageInfo.page - 1) * pageSize,\n          pageInfo.page * pageSize,\n        )\n      : sortedRows;\n\n  const pageTreeRoots = useMemo(\n    () =>\n      reindexTableTree(\n        paginationMode === 'client'\n          ? processedTreeRoots.slice(\n              (pageInfo.page - 1) * pageSize,\n              pageInfo.page * pageSize,\n            )\n          : processedTreeRoots,\n      ),\n    [processedTreeRoots, paginationMode, pageInfo.page, pageSize],\n  );\n\n  const treeState = useTableTreeState<T>({\n    roots: pageTreeRoots,\n    allNodesByKey: treeModel?.byKey ?? new Map(),\n    expandedKeys,\n    defaultExpandedKeys,\n    getTextValue: (node) => {\n      const column = orderedColumns.find(\n        (entry) => entry.key === resolvedTreeColumnKey,\n      );\n      return column\n        ? getColumnText(column, node.row, node.sourceIndex) ?? String(node.key)\n        : String(node.key);\n    },\n    onExpand,\n    ariaLabel,\n  });\n\n  const visibleTreeEntries = treeModel ? treeState.visibleEntries : [];\n  const visibleRows = treeModel\n    ? visibleTreeEntries.map((entry) => entry.row)\n    : flatVisibleRows;\n  const visibleRowKeys = treeModel\n    ? visibleTreeEntries.map((entry) => entry.key)\n    : undefined;\n\n  const [ownColumnWidths, setOwnColumnWidths] = useState<\n    Record<string, number>\n  >(\n    () =>\n      (columnWidthsProp === undefined && storage.has('columnWidths')\n        ? storage.initial.columnWidths ?? defaultColumnWidths\n        : defaultColumnWidths) ?? EMPTY_WIDTHS,\n  );\n  const [draftColumnWidths, setDraftColumnWidths] = useState<Record<\n    string,\n    number\n  > | null>(null);\n  const draftRef = useRef<Record<string, number> | null>(null);\n\n  const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;\n  const columnWidths = draftColumnWidths ?? baseColumnWidths;\n\n  /**\n   * The resolved widths, for the freeze below. A ref because `layout` is\n   * computed *after* this handler is defined, and `useEvent` only reads it when\n   * the drag actually runs.\n   */\n  const layoutRef = useRef<CubeTableColumnLayout<T> | null>(null);\n\n  const handleColumnResize = useEvent((key: string, width: number) => {\n    // First move of a drag freezes every column, so this changes exactly one\n    // width instead of re-splitting the flex pool. See `freezeColumnWidths`.\n    const base =\n      draftRef.current ??\n      freezeColumnWidths(layoutRef.current, baseColumnWidths);\n\n    draftRef.current = { ...base, [key]: Math.round(width) };\n    setDraftColumnWidths(draftRef.current);\n  });\n\n  const handleColumnResizeEnd = useEvent((key: string) => {\n    const next = draftRef.current ?? baseColumnWidths;\n\n    if (columnWidthsProp === undefined) {\n      setOwnColumnWidths(next);\n      storage.write({ columnWidths: next });\n    }\n\n    onColumnResize?.(key, next[key], next);\n    draftRef.current = null;\n    setDraftColumnWidths(null);\n  });\n\n  const leadingColumns = useMemo(\n    () =>\n      showRowNumbers\n        ? [{ key: ROW_NUMBER_COLUMN_KEY, width: ROW_NUMBER_WIDTH }]\n        : undefined,\n    [showRowNumbers],\n  );\n\n  const layout = useTableColumns<T>({\n    columns: orderedColumns,\n    containerWidth,\n    columnWidths,\n    leadingColumns,\n  });\n\n  layoutRef.current = layout;\n\n  const { t } = useI18n();\n\n  // Every row a range can reach, in the order they appear on screen. Pinned rows\n  // are in it: a total is a figure like any other, and having to copy it\n  // separately from the column it sums is the wrong trade.\n  //\n  // The keys are built here rather than inside the hook so they cannot disagree\n  // with the ones the renderer stamps — a pinned row is keyed by its own index\n  // within its group, exactly as `renderPinnedRow` keys it.\n  const selectionRows = useMemo(\n    () => [\n      ...(pinnedTopRows ?? []),\n      ...visibleRows,\n      ...(pinnedBottomRows ?? []),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows],\n  );\n  const selectionRowKeys = useMemo(\n    () => [\n      // Section-qualified, matching what the renderer stamps: the same record\n      // is routinely pinned at both edges, and one flat key space collapsed the\n      // two into whichever came first.\n      ...(pinnedTopRows ?? []).map((row, index) =>\n        selectionRowKey('pinnedTop', resolvedGetRowKey(row, index)),\n      ),\n      ...visibleRows.map(\n        (row, index) =>\n          visibleRowKeys?.[index] ?? resolvedGetRowKey(row, index),\n      ),\n      ...(pinnedBottomRows ?? []).map((row, index) =>\n        selectionRowKey('pinnedBottom', resolvedGetRowKey(row, index)),\n      ),\n    ],\n    [\n      pinnedTopRows,\n      visibleRows,\n      visibleRowKeys,\n      pinnedBottomRows,\n      resolvedGetRowKey,\n    ],\n  );\n\n  // The hook works in one flat row order; the section a row belongs to is a\n  // property of where it sits in that order, so it is resolved here rather than\n  // asking the consumer to track it.\n  const resolveCellSelectable = useEvent(\n    (row: T, rowKey: Key, columnKey: string) => {\n      if (!isCellSelectable) return true;\n\n      const index = selectionRowKeys.indexOf(rowKey);\n      const topCount = pinnedTopRows?.length ?? 0;\n      const section: CubeTableRowSection =\n        index < topCount\n          ? 'pinnedTop'\n          : index < topCount + visibleRows.length\n            ? 'body'\n            : 'pinnedBottom';\n\n      return isCellSelectable({ row, rowKey, columnKey, section });\n    },\n  );\n\n  const cellSelection = useCellSelection<T>({\n    mode: cellSelectionMode,\n    columns: layout.columns,\n    rows: selectionRows,\n    rowKeys: selectionRowKeys,\n    isCellSelectable: isCellSelectable ? resolveCellSelectable : undefined,\n    range: selectedCellRange,\n    defaultRange: defaultSelectedCellRange,\n    onRangeChange: onCellRangeChange,\n  });\n\n  const rootStyles = { ...extractStyles(props, CONTAINER_STYLES), ...styles };\n\n  const smallestPageSize = pageSizeOptions?.length\n    ? Math.min(...pageSizeOptions)\n    : pageSize;\n\n  const showPagination =\n    isPaginated &&\n    !(\n      autoHidePagination &&\n      !hasNextPage &&\n      pageInfo.totalPages <= 1 &&\n      total <= smallestPageSize\n    );\n\n  const hasFooter =\n    showPagination ||\n    footerStart != null ||\n    footerCenter != null ||\n    footerEnd != null;\n\n  /* ── column reordering ────────────────────────────────────────────────── */\n\n  useWarn(isColumnReorderable && hasColumnGroups, {\n    key: ['data-table-grouped-column-reorder'],\n    args: [\n      'DataTable:',\n      '`isColumnReorderable` is ignored when columns contain header groups.',\n    ],\n  });\n\n  const canReorderColumns = isColumnReorderable && !hasColumnGroups;\n\n  const headRowRef = useRef<HTMLTableRowElement>(null);\n  const draggableColumnKeys = useMemo(\n    () => getDraggableColumnKeys(layout.columns, canReorderColumns),\n    [layout.columns, canReorderColumns],\n  );\n  const columnCollection = useMemo(\n    () =>\n      new RowCollection(\n        layout.columns.filter((column) =>\n          isColumnDraggable(column, canReorderColumns),\n        ),\n        (column) => column.key,\n        new Set(),\n        // The drag announcements read this — otherwise a screen reader hears\n        // \"Insert between  and \".\n        (column) =>\n          typeof column.title === 'string' ? column.title : column.key,\n      ),\n    [layout.columns, canReorderColumns],\n  );\n  /**\n   * `'single'`, not `'none'`.\n   *\n   * `useDraggableItem` only deletes its own `onClick` — the one that would\n   * hijack a screen-reader click away from the sort — when the selection mode is\n   * not `'none'`, and only then does it attach the keyboard drag description.\n   * Nothing is ever actually selected here.\n   */\n  const columnSelectionState = useMultipleSelectionState({\n    selectionMode: 'single',\n    disabledBehavior: 'all',\n  });\n  const columnSelectionManager = useMemo(\n    () => new SelectionManager(columnCollection, columnSelectionState),\n    [columnCollection, columnSelectionState],\n  );\n  const handleColumnFocus = useEvent((columnKey: string | null) => {\n    columnSelectionManager.setFocusedKey(columnKey);\n  });\n\n  // One draggable column cannot be reordered, so the machinery stays unmounted\n  // and the header keeps its exact DOM.\n  const isColumnDragEnabled =\n    canReorderColumns && draggableColumnKeys.length > 1;\n\n  const treeRowNumberOffset = treeModel\n    ? paginationMode === 'client'\n      ? flattenTableTree(\n          processedTreeRoots.slice(0, (pageInfo.page - 1) * pageSize),\n          treeState.expandedKeys,\n        ).length\n      : 0\n    : null;\n\n  const renderTable = (\n    columnDragState?: any,\n    columnDropState?: any,\n    headCollectionProps?: Record<string, any>,\n  ) => (\n    <TableView<T>\n      {...rest}\n      rootRef={rootRef}\n      qa={qa || 'DataTable'}\n      rows={visibleRows}\n      rowKeys={visibleRowKeys}\n      pinnedTopRows={pinnedTopRows}\n      pinnedBottomRows={pinnedBottomRows}\n      // Continuous across pages: row 101 is row 101, not row 1 of page two.\n      //\n      // Server mode counts too — the page and its size are known there just the\n      // same, and `rows` is that page. Only `'off'` starts at 1, because then\n      // there is no page to be on.\n      rowNumberOffset={\n        treeRowNumberOffset ??\n        (paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize)\n      }\n      // The same offset drives `aria-rowindex`, which is document-absolute by\n      // contract — a screen reader on page 3 should hear \"row 51 of 240\", not\n      // \"row 1 of 25\".\n      rowIndexOffset={\n        treeModel\n          ? 0\n          : paginationMode === 'off'\n            ? 0\n            : (pageInfo.page - 1) * pageSize\n      }\n      totalRowCount={treeModel ? visibleRows.length : total}\n      layout={layout}\n      columnHeaderPaths={columnModel.headerPaths}\n      // Always on, unlike `ItemTable`. A result grid is read down a column, and\n      // once the values are wide and right-aligned the rule is what keeps a\n      // figure attached to its column — which is why Cloud's ag-grid theme sets\n      // `columnBorder` for `DataTable` and not for the list grids.\n      hasColumnDividers\n      cellSelection={cellSelection}\n      getRowKey={resolvedGetRowKey}\n      onScrollerRef={setScrollerEl}\n      isLoading={isLoading}\n      loadingIndicator={loadingIndicator}\n      skeletonRowCount={skeletonRowCount}\n      error={error}\n      // Same localized fallbacks as `ItemTable`: a grid that has finished\n      // loading and shows an unexplained blank rectangle reads as broken.\n      emptyLabel={emptyLabel ?? t('itemTable.noItems', 'No items')}\n      noResultsLabel={\n        noResultsLabel ?? t('itemTable.noResults', 'No results found')\n      }\n      isFiltered={isFiltered}\n      shape={shape}\n      size={size}\n      rowSize={rowSize}\n      rowHeight={rowHeight}\n      headerHeight={headerHeight}\n      isStriped={isStriped}\n      isRowMoveAnimated={isRowMoveAnimated}\n      isHeaderHidden={isHeaderHidden}\n      isHeaderSticky={isHeaderSticky}\n      isAutoHeight={isAutoHeight}\n      // The header shows the column name at body size — a result grid has no\n      // room for the uppercase caption a list header uses.\n      // `t4` throughout: a result grid is read as a block, and one step down\n      // from the list preset fits noticeably more on screen without losing\n      // legibility. The header takes the medium weight of the same step.\n      contentPreset=\"t4\"\n      headerPreset=\"t4m\"\n      sortMode={treeSortMode}\n      sorts={sorts}\n      onColumnSort={toggleSort}\n      onColumnSortChange={setColumnSort}\n      columnContextMenu={columnContextMenu}\n      onColumnMenuAction={onColumnMenuAction}\n      columnMenuTriggerProps={columnMenuTriggerProps}\n      columnMenuProps={columnMenuProps}\n      isVirtualized={isVirtualized}\n      virtualizeThreshold={virtualizeThreshold}\n      overscan={overscan}\n      isResizable={isResizable}\n      onColumnResize={handleColumnResize}\n      onColumnResizeEnd={handleColumnResizeEnd}\n      getRowProps={getRowProps}\n      ariaLabel={ariaLabel}\n      styles={rootStyles}\n      headerStyles={headerStyles}\n      headerCellStyles={headerCellStyles}\n      bodyStyles={bodyStyles}\n      rowStyles={rowStyles}\n      cellStyles={cellStyles}\n      mods={mods}\n      isColumnReorderable={isColumnDragEnabled}\n      columnDragState={columnDragState}\n      columnDropState={columnDropState}\n      headCollectionProps={headCollectionProps}\n      headRowRef={headRowRef}\n      onColumnFocus={handleColumnFocus}\n      tree={\n        treeModel\n          ? {\n              state: treeState.state,\n              ariaProps: treeState.ariaProps,\n              nodes: treeState.visibleNodes,\n              entries: visibleTreeEntries,\n              columnKey: resolvedTreeColumnKey!,\n            }\n          : undefined\n      }\n      footer={\n        hasFooter ? (\n          <ItemTableFooter\n            start={footerStart}\n            center={footerCenter}\n            end={footerEnd}\n            styles={footerStyles}\n            pagination={\n              showPagination\n                ? {\n                    page: pageInfo.page,\n                    pageSize,\n                    total,\n                    totalPages: pageInfo.totalPages,\n                    pageSizeOptions,\n                    summary,\n                    hasNextPage,\n                    onPageChange: setPage,\n                    onPageSizeChange: setPageSize,\n                  }\n                : undefined\n            }\n          />\n        ) : null\n      }\n    />\n  );\n\n  return isColumnDragEnabled ? (\n    <DraggableCollection\n      state={{\n        collection: columnCollection as any,\n        selectionManager: columnSelectionManager as any,\n        disabledKeys: new Set(),\n      }}\n      // The element that DIRECTLY contains the header cells. React Aria's\n      // `ListDropTargetDelegate` resolves a drop by measuring `[data-key]`\n      // descendants of this element, so pointing it anywhere else leaves every\n      // drop unresolvable — the column lifts but never lands.\n      listRef={headRowRef}\n      orderedKeys={draggableColumnKeys}\n      orientation=\"horizontal\"\n      onReorder={columnOrderState.reorder}\n    >\n      {(dragState, dropState, collectionProps) =>\n        renderTable(dragState, dropState, collectionProps)\n      }\n    </DraggableCollection>\n  ) : (\n    renderTable()\n  );\n}\n\nconst _DataTable = forwardRef(DataTable) as unknown as (<T = any>(\n  props: CubeDataTableProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { displayName?: string };\n\n_DataTable.displayName = 'DataTable';\n\nexport { _DataTable as DataTable };\n"],"mappings":"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B;EAEpD;EACL;EACD;EACG;EACE;EACG;EACH;EACQ;EACH;EACA;EACF;EAMd,eAAc;EACd,cAAa;EACb,UAAU;EACH;EACP,cAAc;EACd,oBAAoB;EACD;EACC;EACI;EACP;EACF;EACM;EACX;EACG;EACb,gBAAgB;EAChB,mBAAmB;EACN;EACF;EACX,QAAQ;EACM;EACI;EACN;EACD;EACC;EACN;EACN,qBAAqB;EACJ;EACA;EACI;EACT;EACZ,eAAe;EACf,MACE,YACI;GACE,OAAO,UAAU;GACjB,WAAW,UAAU;GACrB,OAAO,UAAU;GACjB,SAAS;GACT,WAAW;GACZ,GACD;EAEN,QACE,YACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,KAAK;GACL,QAAQ;GACR,YACE,iBACI;IACE,MAAM,SAAS;IACf;IACA;IACA,YAAY,SAAS;IACrB;IACA;IACA;IACA,cAAc;IACd,kBAAkB;IACnB,GACD;IAEN,GACA;GAEN;AAGJ,QAAO,sBACL,oBAAC;EACC,OAAO;GACL,YAAY;GACZ,kBAAkB;GAClB,8BAAc,IAAI,KAAK;GACxB;EAKD,SAAS;EACT,aAAa;EACb,aAAY;EACZ,WAAW,iBAAiB;aAE1B,WAAW,WAAW,oBACtB,YAAY,WAAW,WAAW,gBAAgB;GAEhC,GAEtB,aAAa;;AAIjB,MAAM,aAAa,WAAW,UAAU;AAIxC,WAAW,cAAc"}

package/dist/components/data/DataTable/index.d.ts

@@ -1,3 +1,3 @@
 
-import { CubeDataTableColumn, CubeDataTableProps } from "./types.js";
+import { CubeDataTableColumn, CubeDataTableColumnDefinition, CubeDataTableColumnGroup, CubeDataTableProps } from "./types.js";
 import { _DataTable } from "./DataTable.js";

package/dist/components/data/DataTable/types.d.ts

@@ -3,7 +3,7 @@ import { SizeName } from "../../../tokens/sizes.js";
 import { CubeTablePageInfo } from "../../navigation/Pagination/types.js";
 import "../../navigation/Pagination/index.js";
 import "../../../tokens/index.js";
-import { CubeTableCellRange, CubeTableColumn, CubeTableLoadingIndicator, CubeTableRowContext, CubeTableRowSection, CubeTableRowSize, CubeTableSort } from "../TableBase/types.js";
+import { CubeTableCellRange, CubeTableColumn, CubeTableLayoutProps, CubeTableLoadingIndicator, CubeTableRowContext, CubeTableRowSection, CubeTableRowSize, CubeTableSort, CubeTableTreeProps } from "../TableBase/types.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import { ReactNode } from "react";
 import { Key as Key$1 } from "@react-types/shared";
@@ -23,9 +23,23 @@ interface CubeDataTableColumn<T = any> extends CubeTableColumn<T> {
    */
   dataType?: 'string' | 'number' | 'boolean' | 'date' | 'unknown';
 }
-interface CubeDataTableProps<T = any> extends BaseProps, ContainerStyleProps {
+/**
+ * A header band spanning one or more DataTable columns.
+ *
+ * Groups are presentational: sorting, resizing, selection and the value
+ * pipeline continue to operate on the leaf columns in `children`.
+ */
+interface CubeDataTableColumnGroup<T = any> {
+  /** Stable identity within the column tree. */
+  key: string;
+  title?: ReactNode;
+  children: CubeDataTableColumnDefinition<T>[];
+}
+/** A leaf column or a nested header group. */
+type CubeDataTableColumnDefinition<T = any> = CubeDataTableColumn<T> | CubeDataTableColumnGroup<T>;
+interface CubeDataTableProps<T = any> extends BaseProps, ContainerStyleProps, CubeTableLayoutProps, CubeTableTreeProps<T> {
   data: readonly T[];
-  columns: CubeDataTableColumn<T>[];
+  columns: CubeDataTableColumnDefinition<T>[];
   rowKey?: string;
   getRowKey?: (row: T, index: number) => Key$1;
   /**
@@ -59,6 +73,7 @@ interface CubeDataTableProps<T = any> extends BaseProps, ContainerStyleProps {
   rowSize?: CubeTableRowSize;
   /** An exact height in px, when none of the named steps is the answer. */
   rowHeight?: number;
+  /** Exact height of each header row in px. */
   headerHeight?: number;
   /** @default true — banding is what makes a wide row readable across. */
   isStriped?: boolean;
@@ -196,5 +211,5 @@ interface CubeDataTableProps<T = any> extends BaseProps, ContainerStyleProps {
   mods?: Record<string, boolean>;
 }
 //#endregion
-export { CubeDataTableColumn, CubeDataTableProps };
+export { CubeDataTableColumn, CubeDataTableColumnDefinition, CubeDataTableColumnGroup, CubeDataTableProps };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/data/ItemTable/ItemTable.js

@@ -1,19 +1,22 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { clampPage, getPageInfo } from "../../navigation/Pagination/use-pagination.js";
 import { ItemTableFooter } from "./ItemTableFooter.js";
+import { buildTableTree, filterTableTree, flattenTableTree, isTableTreeDescendant, reindexTableTree, sortTableTree } from "../TableBase/table-tree.js";
 import { ROW_MENU_COLUMN_KEY, ROW_MENU_COLUMN_WIDTH } from "../TableBase/row-menu.js";
-import { freezeColumnWidths, useTableColumns } from "../TableBase/use-table-columns.js";
+import { freezeColumnWidths, getColumnText, useTableColumns } from "../TableBase/use-table-columns.js";
 import { SELECTION_COLUMN_KEY, SELECTION_COLUMN_WIDTH, useTableSelection } from "../TableBase/use-table-selection.js";
 import { TableView } from "../TableBase/TableView.js";
 import { useContainerWidth } from "../TableBase/use-container-width.js";
-import { useTableSort } from "../TableBase/use-table-sort.js";
+import { compareByColumn, useTableSort } from "../TableBase/use-table-sort.js";
 import { useTableStorage } from "../TableBase/use-table-storage.js";
-import { useTableSearch } from "../TableBase/use-table-search.js";
+import { useTableTreeState } from "../TableBase/use-table-tree-state.js";
+import { matchesTableSearch, useTableSearch } from "../TableBase/use-table-search.js";
 import { ItemTableChromeProvider, ItemTableSearch, ItemTableToolbar } from "./ItemTableToolbar.js";
 import { ItemTableBulkBar } from "./ItemTableBulkBar.js";
 import { ItemTableDragPreview } from "./ItemTableDragPreview.js";
@@ -21,6 +24,7 @@ import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useControlledState } from "@react-stately/utils";
+import { useCollator } from "@react-aria/i18n";
 
 //#region src/components/data/ItemTable/ItemTable.tsx
 /** Stable identity, so the uncontrolled default does not change every render. */
@@ -32,13 +36,13 @@ function defaultGetRowKey(rowKey) {
 	};
 }
 function ItemTable(props, ref) {
-	const { data, columns, rowKey = "id", getRowKey, isLoading = false, loadingIndicator = "overlay", selectionMode, bulkActions, rowLink, onRowAction, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, bulkBarPlacement = "floating", bulkBarStyles, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, selectAllMode = "page", isRowSelectable, selectionTooltip, disabledKeys, skeletonRowCount = 6, emptyLabel, noResultsLabel, error, isFiltered, toolbar, isSearchable = false, searchMode = "client", searchPlaceholder, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchDelay = 500, searchFilter, filters, actions, onRefresh, paginationMode = "client", pageSize: pageSizeProp, defaultPageSize = 50, autoHidePagination = true, onLoadMore, hasMore, isLoadingMore, loadMoreMargin, storageKey, persist, isReorderable = false, onReorder, dropOnRow, getItemDragInfo, isResizable = false, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, onPageSizeChange, pageSizeOptions = [
+	const { data, columns, rowKey = "id", getRowKey, getRowChildren, treeColumnKey, expandedKeys, defaultExpandedKeys, onExpand, isLoading = false, loadingIndicator = "overlay", selectionMode, bulkActions, rowLink, onRowAction, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, bulkBarPlacement = "floating", bulkBarStyles, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, selectAllMode = "page", isRowSelectable, selectionTooltip, disabledKeys, treeSelectionBehavior = "cascade", skeletonRowCount = 6, emptyLabel, noResultsLabel, error, isFiltered, toolbar, isSearchable = false, searchMode = "client", searchPlaceholder, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchDelay = 500, searchFilter, filters, actions, onRefresh, paginationMode = "client", pageSize: pageSizeProp, defaultPageSize = 50, autoHidePagination = true, onLoadMore, hasMore, isLoadingMore, loadMoreMargin, storageKey, persist, isReorderable = false, onReorder, dropOnRow, getItemDragInfo, isResizable = false, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, onPageSizeChange, pageSizeOptions = [
 		10,
 		20,
 		50,
 		100,
 		500
-	], page: pageProp, defaultPage, onPageChange, total: totalProp, totalPages, hasNextPage, summary = true, footer, footerStart, footerCenter, footerEnd, sortMode, sort: sortProp, defaultSort, onSortChange, shape = "plain", size = "medium", rowHeight, headerHeight, isStriped = false, isHeaderHidden = false, isHeaderSticky = true, isVirtualized = "auto", virtualizeThreshold = 50, overscan = 20, getRowProps, ariaLabel, qa, mods, styles, headerStyles, headerCellStyles, headerPreset = "c3", toolbarStyles, searchStyles, footerStyles, bodyStyles, rowStyles, cellStyles, isRowMoveAnimated } = props;
+	], page: pageProp, defaultPage, onPageChange, total: totalProp, totalPages, hasNextPage, summary = true, footer, footerStart, footerCenter, footerEnd, sortMode, sort: sortProp, defaultSort, onSortChange, shape = "plain", size = "medium", rowHeight, headerHeight, isStriped = false, isHeaderHidden = false, isHeaderSticky = true, isAutoHeight = false, isVirtualized = "auto", virtualizeThreshold = 50, overscan = 20, getRowProps, ariaLabel, qa, mods, styles, headerStyles, headerCellStyles, headerPreset = "c3", toolbarStyles, searchStyles, footerStyles, bodyStyles, rowStyles, cellStyles, isRowMoveAnimated } = props;
 	const { t } = useI18n();
 	const rootRef = useCombinedRefs(ref, useRef(null));
 	const [scrollerEl, setScrollerEl] = useState(null);
@@ -47,21 +51,66 @@ function ItemTable(props, ref) {
 		...extractStyles(props, CONTAINER_STYLES),
 		...styles
 	};
-	const { searchValue, setSearchValue, searchedRows, isFiltered: isSearching } = useTableSearch({
+	const resolvedGetRowKey = useMemo(() => getRowKey ?? defaultGetRowKey(rowKey), [getRowKey, rowKey]);
+	const treeModel = useMemo(() => getRowChildren ? buildTableTree(data, getRowChildren, resolvedGetRowKey) : null, [
+		data,
+		getRowChildren,
+		resolvedGetRowKey
+	]);
+	useWarn(treeModel != null && treeModel.duplicateKeys.length > 0, {
+		key: ["item-table-tree-duplicate-keys"],
+		args: ["ItemTable:", "Tree row keys must be unique across the complete hierarchy. Duplicate rows were ignored."]
+	});
+	useWarn(treeModel != null && treeModel.cyclicKeys.length > 0, {
+		key: ["item-table-tree-cyclic-keys"],
+		args: ["ItemTable:", "Tree data contains a cycle. Cyclic descendants were ignored."]
+	});
+	useWarn(treeModel != null && isReorderable, {
+		key: ["item-table-tree-reorder-unsupported"],
+		args: ["ItemTable:", "`isReorderable` is ignored in tree mode. Use `dropOnRow` for folder-style moves."]
+	});
+	const resolvedTreeColumnKey = useMemo(() => {
+		if (!treeModel) return void 0;
+		const visibleColumns = columns.filter((column) => !column.isHidden);
+		return visibleColumns.some((column) => column.key === treeColumnKey) ? treeColumnKey : visibleColumns[0]?.key;
+	}, [
+		treeModel,
+		columns,
+		treeColumnKey
+	]);
+	useWarn(treeModel != null && treeColumnKey != null && resolvedTreeColumnKey !== treeColumnKey, {
+		key: ["item-table-tree-column-invalid", treeColumnKey],
+		args: ["ItemTable:", "`treeColumnKey` must identify a visible data column. Falling back to the first visible column."]
+	});
+	const { searchValue, setSearchValue, searchedRows, query, isFiltered: isSearching } = useTableSearch({
 		columns,
 		rows: data,
-		mode: searchMode,
+		mode: treeModel ? "server" : searchMode,
 		value: searchValueProp,
 		defaultValue: defaultSearchValue,
 		onChange: onSearchChange,
 		delay: searchDelay,
 		filter: searchFilter
 	});
+	const searchedTree = useMemo(() => {
+		if (!treeModel) return null;
+		if (searchMode !== "client" || !query) return {
+			roots: treeModel.roots,
+			forcedExpandedKeys: /* @__PURE__ */ new Set()
+		};
+		return filterTableTree(treeModel.roots, (node) => searchFilter ? searchFilter(node.row, query) : matchesTableSearch(columns, node.row, node.sourceIndex, query));
+	}, [
+		treeModel,
+		searchMode,
+		query,
+		searchFilter,
+		columns
+	]);
 	const storage = useTableStorage(storageKey, persist);
 	const { sort, sortedRows, toggleSort, setColumnSort, mode: resolvedSortMode } = useTableSort({
 		columns,
-		rows: searchedRows,
-		mode: sortMode,
+		rows: treeModel ? searchedTree?.roots.map((node) => node.row) ?? [] : searchedRows,
+		mode: treeModel ? "server" : sortMode,
 		sort: sortProp,
 		defaultSort: sortProp === void 0 && storage.has("sort") ? storage.initial.sort ?? defaultSort : defaultSort,
 		onSortChange: useEvent((next) => {
@@ -69,12 +118,32 @@ function ItemTable(props, ref) {
 			onSortChange?.(next);
 		})
 	});
+	const collator = useCollator({
+		numeric: true,
+		sensitivity: "base"
+	});
+	const treeSortMode = treeModel ? sortMode ?? (columns.some((column) => column.isSortable) ? "client" : "off") : resolvedSortMode;
+	const processedTreeRoots = useMemo(() => {
+		const roots = searchedTree?.roots ?? [];
+		if (treeSortMode !== "client" || !sort) return roots;
+		const column = columns.find((entry) => entry.key === sort.columnKey);
+		if (!column) return roots;
+		return sortTableTree(roots, (a, b) => {
+			return compareByColumn(column, collator, a.row, a.sourceIndex, b.row, b.sourceIndex) * (sort.direction === "asc" ? 1 : -1);
+		});
+	}, [
+		searchedTree,
+		treeSortMode,
+		sort,
+		columns,
+		collator
+	]);
 	const [pageSize, setPageSizeState] = useControlledState(pageSizeProp, pageSizeProp === void 0 && storage.has("pageSize") ? storage.initial.pageSize ?? defaultPageSize : defaultPageSize, onPageSizeChange);
 	const [page, setPageState] = useControlledState(pageProp, defaultPage ?? 1, onPageChange);
 	const isInfinite = paginationMode === "infinite";
 	const isPaginated = paginationMode !== "off" && !isInfinite;
 	const isServerPaginated = paginationMode === "server";
-	const total = isServerPaginated ? totalProp ?? 0 : sortedRows.length;
+	const total = isServerPaginated ? totalProp ?? 0 : treeModel ? processedTreeRoots.length : sortedRows.length;
 	const pageInfo = getPageInfo({
 		page,
 		pageSize,
@@ -87,12 +156,59 @@ function ItemTable(props, ref) {
 		if (pageSizeProp === void 0) storage.write({ pageSize: next });
 		setPageState(1);
 	});
-	const visibleRows = paginationMode === "client" ? sortedRows.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : sortedRows;
-	const resolvedGetRowKey = useMemo(() => getRowKey ?? defaultGetRowKey(rowKey), [getRowKey, rowKey]);
+	const flatVisibleRows = paginationMode === "client" ? sortedRows.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : sortedRows;
+	const pageTreeRoots = useMemo(() => reindexTableTree(paginationMode === "client" ? processedTreeRoots.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : processedTreeRoots), [
+		processedTreeRoots,
+		paginationMode,
+		pageInfo.page,
+		pageSize
+	]);
+	const treeState = useTableTreeState({
+		roots: pageTreeRoots,
+		allNodesByKey: treeModel?.byKey ?? /* @__PURE__ */ new Map(),
+		expandedKeys,
+		defaultExpandedKeys,
+		forcedExpandedKeys: searchedTree?.forcedExpandedKeys,
+		disabledKeys,
+		getTextValue: (node) => {
+			const column = columns.find((entry) => entry.key === resolvedTreeColumnKey);
+			return column ? getColumnText(column, node.row, node.sourceIndex) ?? String(node.key) : String(node.key);
+		},
+		onExpand,
+		ariaLabel
+	});
+	const visibleTreeEntries = treeModel ? treeState.visibleEntries : [];
+	const visibleRows = treeModel ? visibleTreeEntries.map((entry) => entry.row) : flatVisibleRows;
+	const visibleRowKeys = treeModel ? visibleTreeEntries.map((entry) => entry.key) : void 0;
+	const pageTreeEntries = treeModel ? flattenTableTree(pageTreeRoots) : [];
+	const filteredTreeEntries = treeModel ? flattenTableTree(processedTreeRoots) : [];
+	const selectionTree = useMemo(() => {
+		if (!treeModel) return void 0;
+		const childrenOf = /* @__PURE__ */ new Map();
+		const parentOf = /* @__PURE__ */ new Map();
+		flattenTableTree(processedTreeRoots).forEach((node) => {
+			childrenOf.set(node.key, node.children.map((child) => child.key));
+			parentOf.set(node.key, node.parentKey);
+		});
+		return {
+			rootKeys: processedTreeRoots.map((node) => node.key),
+			childrenOf,
+			parentOf,
+			behavior: treeSelectionBehavior
+		};
+	}, [
+		treeModel,
+		processedTreeRoots,
+		treeSelectionBehavior
+	]);
 	const resolvedSelectionMode = selectionMode ?? (bulkActions?.length ? "multiple" : "none");
 	const selection = useTableSelection({
 		rows: visibleRows,
-		filteredRows: paginationMode === "client" ? sortedRows : visibleRows,
+		rowKeys: visibleRowKeys,
+		pageRows: treeModel ? pageTreeEntries.map((entry) => entry.row) : visibleRows,
+		pageRowKeys: treeModel ? pageTreeEntries.map((entry) => entry.key) : void 0,
+		filteredRows: treeModel ? (paginationMode === "client" ? filteredTreeEntries : pageTreeEntries).map((entry) => entry.row) : paginationMode === "client" ? sortedRows : visibleRows,
+		filteredRowKeys: treeModel ? (paginationMode === "client" ? filteredTreeEntries : pageTreeEntries).map((entry) => entry.key) : void 0,
 		getRowKey: resolvedGetRowKey,
 		selectionMode: resolvedSelectionMode,
 		selectedKeys: selectedKeysProp,
@@ -100,7 +216,8 @@ function ItemTable(props, ref) {
 		onSelectionChange,
 		selectAllMode,
 		isRowSelectable,
-		disabledKeys
+		disabledKeys,
+		tree: selectionTree
 	});
 	const resolveRowMenu = useMemo(() => rowMenu == null ? void 0 : typeof rowMenu === "function" ? rowMenu : () => rowMenu, [rowMenu]);
 	const trailingColumns = useMemo(() => resolveRowMenu && rowContextMenu === true ? [{
@@ -210,7 +327,11 @@ function ItemTable(props, ref) {
 		} : void 0
 	}) : null;
 	const bodyRef = useRef(null);
-	const rowKeys = useMemo(() => visibleRows.map((row, index) => String(resolvedGetRowKey(row, index))), [visibleRows, resolvedGetRowKey]);
+	const rowKeys = useMemo(() => visibleRows.map((row, index) => String(visibleRowKeys?.[index] ?? resolvedGetRowKey(row, index))), [
+		visibleRows,
+		visibleRowKeys,
+		resolvedGetRowKey
+	]);
 	const handleReorder = useEvent((nextKeys) => {
 		const byKey = new Map(visibleRows.map((row, index) => [String(resolvedGetRowKey(row, index)), row]));
 		onReorder?.(nextKeys, nextKeys.map((key) => byKey.get(key)).filter((row) => row !== void 0));
@@ -232,8 +353,9 @@ function ItemTable(props, ref) {
 		bodyRef,
 		qa: qa || "ItemTable",
 		rows: visibleRows,
-		rowIndexOffset: isPaginated ? (pageInfo.page - 1) * pageSize : 0,
-		totalRowCount: total,
+		rowKeys: visibleRowKeys,
+		rowIndexOffset: treeModel ? 0 : isPaginated ? (pageInfo.page - 1) * pageSize : 0,
+		totalRowCount: treeModel ? visibleRows.length : total,
 		getRowKey: resolvedGetRowKey,
 		layout,
 		onScrollerRef: setScrollerEl,
@@ -243,6 +365,7 @@ function ItemTable(props, ref) {
 		headerHeight,
 		isHeaderHidden,
 		isHeaderSticky,
+		isAutoHeight,
 		isVirtualized,
 		virtualizeThreshold,
 		overscan,
@@ -273,7 +396,7 @@ function ItemTable(props, ref) {
 		toolbar: toolbarNode,
 		footer: footerNode,
 		isFiltered: isFiltered ?? isSearching,
-		sortMode: resolvedSortMode,
+		sortMode: treeSortMode,
 		sort,
 		onColumnSort: toggleSort,
 		onColumnSortChange: setColumnSort,
@@ -291,18 +414,39 @@ function ItemTable(props, ref) {
 		rowStyles,
 		cellStyles,
 		mods,
-		overlay: bulkBarPlacement === "floating" ? bulkBar : null
+		overlay: bulkBarPlacement === "floating" ? bulkBar : null,
+		tree: treeModel ? {
+			state: treeState.state,
+			ariaProps: treeState.ariaProps,
+			nodes: treeState.visibleNodes,
+			entries: visibleTreeEntries,
+			columnKey: resolvedTreeColumnKey
+		} : void 0
 	});
 	const rowByKeyForDrop = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
-		visibleRows.forEach((row, index) => map.set(String(resolvedGetRowKey(row, index)), row));
+		visibleRows.forEach((row, index) => map.set(String(visibleRowKeys?.[index] ?? resolvedGetRowKey(row, index)), row));
 		return map;
-	}, [visibleRows, resolvedGetRowKey]);
+	}, [
+		visibleRows,
+		visibleRowKeys,
+		resolvedGetRowKey
+	]);
 	const handleItemDrop = useEvent((targetKey, draggedKeys) => {
 		if (!dropOnRow) return;
 		const target = rowByKeyForDrop.get(String(targetKey));
 		if (!target) return;
-		const dragged = draggedKeys.map((key) => rowByKeyForDrop.get(String(key))).filter((row) => row !== void 0 && row !== target);
+		const draggedKeySet = new Set(draggedKeys);
+		const topmostDraggedKeys = treeModel ? draggedKeys.filter((key) => {
+			let parent = treeModel.parentOf.get(key);
+			while (parent != null) {
+				if (draggedKeySet.has(parent)) return false;
+				parent = treeModel.parentOf.get(parent);
+			}
+			return true;
+		}) : draggedKeys;
+		if (treeModel && topmostDraggedKeys.some((key) => isTableTreeDescendant(treeModel, targetKey, key))) return;
+		const dragged = topmostDraggedKeys.map((key) => rowByKeyForDrop.get(String(key))).filter((row) => row !== void 0 && row !== target);
 		if (!dragged.length) return;
 		if (dropOnRow.isAllowed && !dropOnRow.isAllowed(dragged, target)) return;
 		dropOnRow.onDrop(dragged, target);
@@ -315,7 +459,7 @@ function ItemTable(props, ref) {
 		const target = rowByKeyForDrop.get(String(targetKey));
 		return target != null && (dropOnRow?.isTarget(target) ?? false);
 	});
-	const isDragEnabled = isReorderable || dropOnRow != null;
+	const isDragEnabled = !treeModel && isReorderable || dropOnRow != null;
 	const table = isDragEnabled ? /* @__PURE__ */ jsx(DraggableCollection, {
 		state: {
 			collection: selection.collection,
@@ -325,7 +469,7 @@ function ItemTable(props, ref) {
 		listRef: bodyRef,
 		orderedKeys: rowKeys,
 		orientation: "vertical",
-		onReorder: isReorderable ? handleReorder : void 0,
+		onReorder: !treeModel && isReorderable ? handleReorder : void 0,
 		onItemDrop: dropOnRow ? handleItemDrop : void 0,
 		shouldAcceptItemDrop: dropOnRow ? shouldAcceptItemDrop : void 0,
 		renderPreview: getItemDragInfo ? renderDragPreview : void 0,