@cube-dev/ui-kit 0.163.0 → 0.165.0

package/dist/components/content/Text.d.ts

@@ -140,7 +140,7 @@ declare const MinorText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -179,7 +179,7 @@ declare const MinorText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -546,7 +546,7 @@ declare const DangerText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -585,7 +585,7 @@ declare const DangerText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -952,7 +952,7 @@ declare const SuccessText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -991,7 +991,7 @@ declare const SuccessText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -1358,7 +1358,7 @@ declare const StrongText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -1397,7 +1397,7 @@ declare const StrongText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -1764,7 +1764,7 @@ declare const EmphasisText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -1803,7 +1803,7 @@ declare const EmphasisText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -2170,7 +2170,7 @@ declare const PlaceholderText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -2209,7 +2209,7 @@ declare const PlaceholderText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -2576,7 +2576,7 @@ declare const HighlightText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -2615,7 +2615,7 @@ declare const HighlightText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @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 { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @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 { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @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 { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

package/dist/components/content/Tree/Tree.js

@@ -1,4 +1,4 @@
-/** @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 { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-/** @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 { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @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 { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.165.0 | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @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 { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @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 { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @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 { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @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 { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,32 +1,60 @@
-/** @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 "../ItemTable/ItemTableFooter.js";
 import { RowCollection } from "../TableBase/RowCollection.js";
+import { buildTableTree, flattenTableTree, reindexTableTree, sortTableTree } from "../TableBase/table-tree.js";
 import { selectionRowKey } from "../TableBase/types.js";
 import { useCellSelection } from "../TableBase/use-cell-selection.js";
 import { getDraggableColumnKeys, isColumnDraggable, useColumnOrder } from "../TableBase/use-column-order.js";
-import { freezeColumnWidths, useTableColumns } from "../TableBase/use-table-columns.js";
+import { freezeColumnWidths, getColumnText, useTableColumns } from "../TableBase/use-table-columns.js";
 import { ROW_NUMBER_COLUMN_KEY } from "../TableBase/use-table-selection.js";
 import { TableView } from "../TableBase/TableView.js";
 import { useContainerWidth } from "../TableBase/use-container-width.js";
+import { compareByColumn } from "../TableBase/use-table-sort.js";
 import { useTableSorts } from "../TableBase/use-table-sorts.js";
 import { useTableStorage } from "../TableBase/use-table-storage.js";
+import { useTableTreeState } from "../TableBase/use-table-tree-state.js";
 import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useMultipleSelectionState } from "react-stately";
 import { useControlledState } from "@react-stately/utils";
+import { useCollator } from "@react-aria/i18n";
 import { SelectionManager } from "@react-stately/selection";
 
 //#region src/components/data/DataTable/DataTable.tsx
 /** Wide enough for five digits at the dense default. */
 const ROW_NUMBER_WIDTH = 56;
 const EMPTY_WIDTHS = {};
+function isColumnGroup(column) {
+	return "children" in column;
+}
+/** Flattens the public column tree while retaining each leaf's header path. */
+function buildColumnModel(definitions) {
+	const columns = [];
+	const headerPaths = /* @__PURE__ */ new Map();
+	function visit(entries, path) {
+		for (const entry of entries) if (isColumnGroup(entry)) visit(entry.children, [...path, {
+			key: entry.key,
+			title: entry.title
+		}]);
+		else {
+			columns.push(entry);
+			if (path.length) headerPaths.set(entry.key, path);
+		}
+	}
+	visit(definitions, []);
+	return {
+		columns,
+		headerPaths
+	};
+}
 function defaultGetRowKey(rowKey) {
 	return (row, index) => {
 		const value = row?.[rowKey];
@@ -42,18 +70,34 @@ function defaultGetRowKey(rowKey) {
 * rows pinned for totals.
 *
 * It knows nothing about Cube. Measures, dimensions, pivots and drill-downs
-* reach it as ordinary columns, `render` output and `column.header.menu`
-* content, which is what keeps the ~34 kB of Cloud's column-header menu in
-* Cloud.
+* reach it as leaf columns, presentational column groups, `render` output and
+* `column.header.menu` content, which is what keeps the ~34 kB of Cloud's
+* column-header menu in Cloud.
 */
 function DataTable(props, ref) {
-	const { data, columns, rowKey = "id", getRowKey, pinnedTopRows, pinnedBottomRows, isLoading = false, loadingIndicator = "overlay", skeletonRowCount, error, emptyLabel, noResultsLabel, isFiltered, shape = "plain", size = "small", rowSize, rowHeight, headerHeight, isStriped = true, isHeaderHidden, isHeaderSticky, showRowNumbers = false, sortMode, sorts: sortsProp, defaultSorts, onSortsChange, paginationMode = "client", page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize = 100, onPageSizeChange, pageSizeOptions, total: totalProp, totalPages, hasNextPage, summary = true, autoHidePagination = true, footerStart, footerCenter, footerEnd, cellSelectionMode = "range", isCellSelectable, selectedCellRange, defaultSelectedCellRange, onCellRangeChange, isRowMoveAnimated, isResizable = true, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, isColumnReorderable = false, columnOrder, defaultColumnOrder, onColumnOrderChange, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, isVirtualized, virtualizeThreshold, overscan, getRowProps, storageKey, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, footerStyles, ariaLabel, qa, mods, ...rest } = props;
+	const { data, columns, rowKey = "id", getRowKey, getRowChildren, treeColumnKey, expandedKeys, defaultExpandedKeys, onExpand, pinnedTopRows, pinnedBottomRows, isLoading = false, loadingIndicator = "overlay", skeletonRowCount, error, emptyLabel, noResultsLabel, isFiltered, shape = "plain", size = "small", rowSize, rowHeight, headerHeight, isStriped = true, isHeaderHidden, isHeaderSticky, isAutoHeight = false, showRowNumbers = false, sortMode, sorts: sortsProp, defaultSorts, onSortsChange, paginationMode = "client", page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize = 100, onPageSizeChange, pageSizeOptions, total: totalProp, totalPages, hasNextPage, summary = true, autoHidePagination = true, footerStart, footerCenter, footerEnd, cellSelectionMode = "range", isCellSelectable, selectedCellRange, defaultSelectedCellRange, onCellRangeChange, isRowMoveAnimated, isResizable = true, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, isColumnReorderable = false, columnOrder, defaultColumnOrder, onColumnOrderChange, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, isVirtualized, virtualizeThreshold, overscan, getRowProps, storageKey, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, footerStyles, ariaLabel, qa, mods, ...rest } = props;
 	const rootRef = useCombinedRefs(ref, useRef(null));
 	const [scrollerEl, setScrollerEl] = useState(null);
 	const containerWidth = useContainerWidth(scrollerEl);
+	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: ["data-table-tree-duplicate-keys"],
+		args: ["DataTable:", "Tree row keys must be unique across the complete hierarchy. Duplicate rows were ignored."]
+	});
+	useWarn(treeModel != null && treeModel.cyclicKeys.length > 0, {
+		key: ["data-table-tree-cyclic-keys"],
+		args: ["DataTable:", "Tree data contains a cycle. Cyclic descendants were ignored."]
+	});
 	const storage = useTableStorage(storageKey);
+	const columnModel = useMemo(() => buildColumnModel(columns), [columns]);
+	const hasColumnGroups = columnModel.headerPaths.size > 0;
 	const columnOrderState = useColumnOrder({
-		columns: useMemo(() => columns.map((column) => {
+		columns: useMemo(() => columnModel.columns.map((column) => {
 			const isNumeric = column.dataType === "number";
 			return {
 				...column,
@@ -63,26 +107,65 @@ function DataTable(props, ref) {
 					...typeof column.cellStyles === "object" ? column.cellStyles : null
 				} : column.cellStyles
 			};
-		}), [columns]),
+		}), [columnModel.columns]),
 		columnOrder,
 		defaultColumnOrder,
 		onColumnOrderChange,
 		storage
 	});
 	const orderedColumns = columnOrderState.columns;
+	const resolvedTreeColumnKey = useMemo(() => {
+		if (!treeModel) return void 0;
+		const visibleColumns = orderedColumns.filter((column) => !column.isHidden);
+		return visibleColumns.some((column) => column.key === treeColumnKey) ? treeColumnKey : visibleColumns[0]?.key;
+	}, [
+		treeModel,
+		orderedColumns,
+		treeColumnKey
+	]);
+	useWarn(treeModel != null && treeColumnKey != null && resolvedTreeColumnKey !== treeColumnKey, {
+		key: ["data-table-tree-column-invalid", treeColumnKey],
+		args: ["DataTable:", "`treeColumnKey` must identify a visible data column. Falling back to the first visible column."]
+	});
 	const { sorts, sortedRows, toggleSort, setColumnSort, mode: resolvedSortMode } = useTableSorts({
 		columns: orderedColumns,
-		rows: data,
-		mode: sortMode,
+		rows: treeModel ? treeModel.roots.map((node) => node.row) : data,
+		mode: treeModel ? "server" : sortMode,
 		sorts: sortsProp,
 		defaultSorts,
 		onSortsChange
 	});
+	const collator = useCollator({
+		numeric: true,
+		sensitivity: "base"
+	});
+	const treeSortMode = treeModel ? sortMode ?? (orderedColumns.some((column) => column.isSortable) ? "client" : "off") : resolvedSortMode;
+	const processedTreeRoots = useMemo(() => {
+		const roots = treeModel?.roots ?? [];
+		if (treeSortMode !== "client" || !sorts.length) return roots;
+		const active = sorts.map((sort) => ({
+			sort,
+			column: orderedColumns.find((column) => column.key === sort.columnKey)
+		})).filter((entry) => entry.column != null);
+		return sortTableTree(roots, (a, b) => {
+			for (const { sort, column } of active) {
+				const result = compareByColumn(column, collator, a.row, a.sourceIndex, b.row, b.sourceIndex);
+				if (result !== 0) return result * (sort.direction === "asc" ? 1 : -1);
+			}
+			return a.siblingIndex - b.siblingIndex;
+		});
+	}, [
+		treeModel,
+		treeSortMode,
+		sorts,
+		orderedColumns,
+		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 isPaginated = paginationMode !== "off";
 	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,
@@ -95,7 +178,27 @@ function DataTable(props, ref) {
 		setPageState(1);
 		if (pageSizeProp === void 0) storage.write({ pageSize: next });
 	});
-	const visibleRows = paginationMode === "client" ? sortedRows.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : sortedRows;
+	const flatVisibleRows = paginationMode === "client" ? sortedRows.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : sortedRows;
+	const treeState = useTableTreeState({
+		roots: useMemo(() => reindexTableTree(paginationMode === "client" ? processedTreeRoots.slice((pageInfo.page - 1) * pageSize, pageInfo.page * pageSize) : processedTreeRoots), [
+			processedTreeRoots,
+			paginationMode,
+			pageInfo.page,
+			pageSize
+		]),
+		allNodesByKey: treeModel?.byKey ?? /* @__PURE__ */ new Map(),
+		expandedKeys,
+		defaultExpandedKeys,
+		getTextValue: (node) => {
+			const column = orderedColumns.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 [ownColumnWidths, setOwnColumnWidths] = useState(() => (columnWidthsProp === void 0 && storage.has("columnWidths") ? storage.initial.columnWidths ?? defaultColumnWidths : defaultColumnWidths) ?? EMPTY_WIDTHS);
 	const [draftColumnWidths, setDraftColumnWidths] = useState(null);
 	const draftRef = useRef(null);
@@ -135,7 +238,6 @@ function DataTable(props, ref) {
 	});
 	layoutRef.current = layout;
 	const { t } = useI18n();
-	const resolvedGetRowKey = useMemo(() => getRowKey ?? defaultGetRowKey(rowKey), [getRowKey, rowKey]);
 	const selectionRows = useMemo(() => [
 		...pinnedTopRows ?? [],
 		...visibleRows,
@@ -147,11 +249,12 @@ function DataTable(props, ref) {
 	]);
 	const selectionRowKeys = useMemo(() => [
 		...(pinnedTopRows ?? []).map((row, index) => selectionRowKey("pinnedTop", resolvedGetRowKey(row, index))),
-		...visibleRows.map(resolvedGetRowKey),
+		...visibleRows.map((row, index) => visibleRowKeys?.[index] ?? resolvedGetRowKey(row, index)),
 		...(pinnedBottomRows ?? []).map((row, index) => selectionRowKey("pinnedBottom", resolvedGetRowKey(row, index)))
 	], [
 		pinnedTopRows,
 		visibleRows,
+		visibleRowKeys,
 		pinnedBottomRows,
 		resolvedGetRowKey
 	]);
@@ -183,9 +286,14 @@ function DataTable(props, ref) {
 	const smallestPageSize = pageSizeOptions?.length ? Math.min(...pageSizeOptions) : pageSize;
 	const showPagination = isPaginated && !(autoHidePagination && !hasNextPage && pageInfo.totalPages <= 1 && total <= smallestPageSize);
 	const hasFooter = showPagination || footerStart != null || footerCenter != null || footerEnd != null;
+	useWarn(isColumnReorderable && hasColumnGroups, {
+		key: ["data-table-grouped-column-reorder"],
+		args: ["DataTable:", "`isColumnReorderable` is ignored when columns contain header groups."]
+	});
+	const canReorderColumns = isColumnReorderable && !hasColumnGroups;
 	const headRowRef = useRef(null);
-	const draggableColumnKeys = useMemo(() => getDraggableColumnKeys(layout.columns, isColumnReorderable), [layout.columns, isColumnReorderable]);
-	const columnCollection = useMemo(() => new RowCollection(layout.columns.filter((column) => isColumnDraggable(column, isColumnReorderable)), (column) => column.key, /* @__PURE__ */ new Set(), (column) => typeof column.title === "string" ? column.title : column.key), [layout.columns, isColumnReorderable]);
+	const draggableColumnKeys = useMemo(() => getDraggableColumnKeys(layout.columns, canReorderColumns), [layout.columns, canReorderColumns]);
+	const columnCollection = useMemo(() => new RowCollection(layout.columns.filter((column) => isColumnDraggable(column, canReorderColumns)), (column) => column.key, /* @__PURE__ */ new Set(), (column) => typeof column.title === "string" ? column.title : column.key), [layout.columns, canReorderColumns]);
 	/**
 	* `'single'`, not `'none'`.
 	*
@@ -202,18 +310,21 @@ function DataTable(props, ref) {
 	const handleColumnFocus = useEvent((columnKey) => {
 		columnSelectionManager.setFocusedKey(columnKey);
 	});
-	const isColumnDragEnabled = isColumnReorderable && draggableColumnKeys.length > 1;
+	const isColumnDragEnabled = canReorderColumns && draggableColumnKeys.length > 1;
+	const treeRowNumberOffset = treeModel ? paginationMode === "client" ? flattenTableTree(processedTreeRoots.slice(0, (pageInfo.page - 1) * pageSize), treeState.expandedKeys).length : 0 : null;
 	const renderTable = (columnDragState, columnDropState, headCollectionProps) => /* @__PURE__ */ jsx(TableView, {
 		...rest,
 		rootRef,
 		qa: qa || "DataTable",
 		rows: visibleRows,
+		rowKeys: visibleRowKeys,
 		pinnedTopRows,
 		pinnedBottomRows,
-		rowNumberOffset: paginationMode === "off" ? 0 : (pageInfo.page - 1) * pageSize,
-		rowIndexOffset: paginationMode === "off" ? 0 : (pageInfo.page - 1) * pageSize,
-		totalRowCount: total,
+		rowNumberOffset: treeRowNumberOffset ?? (paginationMode === "off" ? 0 : (pageInfo.page - 1) * pageSize),
+		rowIndexOffset: treeModel ? 0 : paginationMode === "off" ? 0 : (pageInfo.page - 1) * pageSize,
+		totalRowCount: treeModel ? visibleRows.length : total,
 		layout,
+		columnHeaderPaths: columnModel.headerPaths,
 		hasColumnDividers: true,
 		cellSelection,
 		getRowKey: resolvedGetRowKey,
@@ -234,9 +345,10 @@ function DataTable(props, ref) {
 		isRowMoveAnimated,
 		isHeaderHidden,
 		isHeaderSticky,
+		isAutoHeight,
 		contentPreset: "t4",
 		headerPreset: "t4m",
-		sortMode: resolvedSortMode,
+		sortMode: treeSortMode,
 		sorts,
 		onColumnSort: toggleSort,
 		onColumnSortChange: setColumnSort,
@@ -265,6 +377,13 @@ function DataTable(props, ref) {
 		headCollectionProps,
 		headRowRef,
 		onColumnFocus: handleColumnFocus,
+		tree: treeModel ? {
+			state: treeState.state,
+			ariaProps: treeState.ariaProps,
+			nodes: treeState.visibleNodes,
+			entries: visibleTreeEntries,
+			columnKey: resolvedTreeColumnKey
+		} : void 0,
 		footer: hasFooter ? /* @__PURE__ */ jsx(ItemTableFooter, {
 			start: footerStart,
 			center: footerCenter,