@cube-dev/ui-kit 0.164.0 → 0.165.0

package/dist/components/data/TableBase/TableView.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.164.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 { useEvent } from "../../../_internal/hooks/use-event.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { TextItem } from "../../content/TextItem/TextItem.js";
@@ -6,6 +7,7 @@ import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ArrowNarrowDownIcon } from "../../../icons/ArrowNarrowDownIcon.js";
 import { ArrowNarrowUpIcon } from "../../../icons/ArrowNarrowUpIcon.js";
+import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";
 import { _MenuTrigger } from "../../actions/Menu/MenuTrigger.js";
 import { __Menu } from "../../actions/Menu/Menu.js";
@@ -22,7 +24,7 @@ import { ROW_MENU_COLUMN_KEY, isMenuEmpty, normalizeMenuAction } from "./row-men
 import { COLUMN_MENU_SORT_DIRECTION, isColumnMenuSortKey, processColumnMenuItems } from "./column-menu.js";
 import { buildColumnTints, tintSlot } from "./column-tint.js";
 import { ColumnResizer } from "./ColumnResizer.js";
-import { TableElement, TableHeaderItem } from "./styled.js";
+import { TableElement, TableHeaderItem, TableTreeToggle, TableTreeTogglePlaceholder } from "./styled.js";
 import { TableHeaderCell } from "./TableHeaderCell.js";
 import { TableRow, TableRowDropIndicator } from "./TableRow.js";
 import { selectionRowKey } from "./types.js";
@@ -34,7 +36,7 @@ import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { ROW_NUMBER_COLUMN_KEY, SELECTION_COLUMN_KEY } from "./use-table-selection.js";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { VisuallyHidden } from "react-aria";
+import { VisuallyHidden, useTree } from "react-aria";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 //#region src/components/data/TableBase/TableView.tsx
@@ -103,14 +105,108 @@ function pinStyle(column) {
 	return { ["--pin-offset"]: `${column.pinOffset}px` };
 }
 /**
+* Hook boundary for the native table. Flat tables deliberately avoid this
+* component so their DOM and keyboard behaviour remain exactly as before.
+*/
+function TreeGridTable(props) {
+	const { tree, tableProps, style, children } = props;
+	const ref = useRef(null);
+	const pendingFocusKey = useRef(null);
+	const { gridProps } = useTree(tree.ariaProps, tree.state, ref);
+	useEffect(() => {
+		const key = pendingFocusKey.current;
+		if (key == null) return;
+		const activeElement = document.activeElement;
+		if (activeElement && activeElement !== document.body && !ref.current?.contains(activeElement)) {
+			pendingFocusKey.current = null;
+			return;
+		}
+		const target = Array.from(ref.current?.querySelectorAll("tbody tr[data-element=\"Row\"][data-key]") ?? []).find((element) => element.dataset.key === String(key));
+		if (target) {
+			pendingFocusKey.current = null;
+			target.focus();
+		}
+	});
+	const handleBlurCapture = (event) => {
+		const pendingKey = pendingFocusKey.current;
+		const nextTarget = event.relatedTarget;
+		if (pendingKey != null && nextTarget instanceof Element) {
+			if (nextTarget.closest("tbody tr[data-element=\"Row\"][data-key]")?.dataset.key !== String(pendingKey)) pendingFocusKey.current = null;
+		}
+		gridProps.onBlurCapture?.(event);
+	};
+	const handleKeyDownCapture = (event) => {
+		const row = event.target.closest("tbody tr[data-element=\"Row\"][data-key]");
+		if (!row || event.target !== row) {
+			gridProps.onKeyDownCapture?.(event);
+			return;
+		}
+		const currentKey = pendingFocusKey.current ?? row.dataset.key;
+		const index = tree.entries.findIndex((entry) => String(entry.key) === String(currentKey));
+		const entry = tree.entries[index];
+		if (!entry) return;
+		const focusEntry = (next) => {
+			if (!next) return false;
+			tree.state.selectionManager.setFocusedKey(next.key);
+			const target = Array.from(ref.current?.querySelectorAll("tbody tr[data-element=\"Row\"][data-key]") ?? []).find((element) => element.dataset.key === String(next.key));
+			if (target) {
+				pendingFocusKey.current = null;
+				target.focus();
+			} else pendingFocusKey.current = next.key;
+			return true;
+		};
+		const hasChildren = entry.children.length > 0;
+		const isExpanded = tree.state.expandedKeys.has(entry.key);
+		let handled = false;
+		if (event.key === "ArrowRight" && hasChildren) if (isExpanded) handled = focusEntry(entry.children[0]);
+		else {
+			tree.state.toggleKey(entry.key);
+			handled = true;
+		}
+		else if (event.key === "ArrowLeft") {
+			if (hasChildren && isExpanded) {
+				tree.state.toggleKey(entry.key);
+				handled = true;
+			} else if (entry.parentKey != null) handled = focusEntry(tree.entries.find((candidate) => candidate.key === entry.parentKey));
+		} else if (event.key === "ArrowDown") handled = focusEntry(tree.entries[index + 1]);
+		else if (event.key === "ArrowUp") handled = focusEntry(tree.entries[index - 1]);
+		if (handled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		if (pendingFocusKey.current != null && [
+			"ArrowDown",
+			"ArrowUp",
+			"ArrowRight",
+			"ArrowLeft"
+		].includes(event.key)) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		gridProps.onKeyDownCapture?.(event);
+	};
+	return /* @__PURE__ */ jsx("table", {
+		...mergeProps$1(gridProps, tableProps),
+		ref,
+		role: "treegrid",
+		style,
+		onBlurCapture: handleBlurCapture,
+		onKeyDownCapture: handleKeyDownCapture,
+		children
+	});
+}
+/**
 * The one place table DOM exists. Both `ItemTable` and `DataTable` resolve their
 * props into the shape above and hand it here, so the markup, the ARIA
 * bookkeeping and the tasty sub-element contract have a single implementation.
 */
 function TableView(props) {
-	const { qa, rows, getRowKey, layout, onScrollerRef, rootRef, size = "medium", shape = "plain", rowSize, rowHeight, headerHeight, isHeaderHidden = false, isStriped = false, hasColumnDividers, isRowMoveAnimated = true, isHeaderSticky = true, isVirtualized = "auto", virtualizeThreshold = 50, overscan = 20, isLoading = false, loadingIndicator = "overlay", skeletonRowCount = 6, selection, selectionTooltip, overlay, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, rowLink, onRowAction, onLoadMore, hasMore = false, isLoadingMore = false, loadMoreMargin, pinnedTopRows, pinnedBottomRows, cellSelection, rowNumberOffset = 0, rowIndexOffset = 0, totalRowCount, isReorderable = false, dragState, dropState, collectionProps, isColumnReorderable = false, columnDragState, columnDropState, headCollectionProps, headRowRef, onColumnFocus, bodyRef, isResizable = false, onColumnResize, onColumnResizeEnd, emptyLabel, noResultsLabel, error, isFiltered = false, sortMode = "off", sort, sorts, onColumnSort, onColumnSortChange, columnContextMenu = true, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, getRowProps, headerPreset, contentPreset, toolbar, footer, ariaLabel, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, mods } = props;
+	const { qa, rows, rowKeys, getRowKey, layout, columnHeaderPaths, onScrollerRef, rootRef, size = "medium", shape = "plain", rowSize, rowHeight, headerHeight, isHeaderHidden = false, isStriped = false, hasColumnDividers, isRowMoveAnimated = true, isHeaderSticky = true, isAutoHeight = false, isVirtualized = "auto", virtualizeThreshold = 50, overscan = 20, isLoading = false, loadingIndicator = "overlay", skeletonRowCount = 6, selection, selectionTooltip, overlay, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, rowLink, onRowAction, onLoadMore, hasMore = false, isLoadingMore = false, loadMoreMargin, pinnedTopRows, pinnedBottomRows, cellSelection, rowNumberOffset = 0, rowIndexOffset = 0, totalRowCount, tree, isReorderable = false, dragState, dropState, collectionProps, isColumnReorderable = false, columnDragState, columnDropState, headCollectionProps, headRowRef, onColumnFocus, bodyRef, isResizable = false, onColumnResize, onColumnResizeEnd, emptyLabel, noResultsLabel, error, isFiltered = false, sortMode = "off", sort, sorts, onColumnSort, onColumnSortChange, columnContextMenu = true, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, getRowProps, headerPreset, contentPreset, toolbar, footer, ariaLabel, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, mods } = props;
 	const { columns } = layout;
 	const columnCount = columns.length;
+	const headerGroupDepth = columns.reduce((depth, column) => Math.max(depth, columnHeaderPaths?.get(column.key)?.length ?? 0), 0);
 	/**
 	* `rowSize` resolved to the size scale, or `null` when it was not given.
 	*
@@ -144,17 +240,35 @@ function TableView(props) {
 		setScrollerEl(element);
 		onScrollerRef(element);
 	}, [onScrollerRef]);
-	const headerRowCount = isHeaderHidden ? 0 : 1;
+	const headerRowCount = isHeaderHidden ? 0 : headerGroupDepth + 1;
 	const pinnedTopCount = pinnedTopRows?.length ?? 0;
 	const pinnedBottomCount = pinnedBottomRows?.length ?? 0;
 	const bodyRowCount = Math.max(totalRowCount ?? rows.length, rowIndexOffset + rows.length);
 	/** 1-based `aria-rowindex` for the i-th body row of the current page. */
 	const bodyRowIndex = (rowIndex) => headerRowCount + pinnedTopCount + rowIndexOffset + rowIndex + 1;
+	const bodyRowKey = (row, rowIndex) => rowKeys?.[rowIndex] ?? getRowKey(row, rowIndex);
+	const treeRowState = (rowIndex) => {
+		const entry = tree?.entries[rowIndex];
+		return entry ? {
+			level: entry.level,
+			parentKey: entry.parentKey,
+			hasChildren: entry.children.length > 0,
+			isExpanded: tree.state.expandedKeys.has(entry.key)
+		} : void 0;
+	};
 	/** 1-based `aria-rowindex` for the i-th pinned row at `edge`. */
 	const pinnedRowIndex = (index, edge) => edge === "top" ? headerRowCount + index + 1 : headerRowCount + pinnedTopCount + bodyRowCount + index + 1;
 	const tints = useMemo(() => buildColumnTints(columns, { resolveTheme: getColorTheme }), [columns, usePaletteVersion()]);
 	const mergedStyles = useMemo(() => ({
+		height: "min 0",
+		flexGrow: 1,
+		flexShrink: 1,
 		...styles,
+		...isAutoHeight ? {
+			height: "min 0",
+			flexGrow: 0,
+			flexShrink: 0
+		} : null,
 		...contentPreset ? { Table: { preset: contentPreset } } : null,
 		...headerStyles ? { HeadRow: headerStyles } : null,
 		...headerPreset || headerCellStyles || tints.headerCellStyles ? { HeaderCell: {
@@ -162,6 +276,10 @@ function TableView(props) {
 			...tints.headerCellStyles,
 			...headerCellStyles
 		} } : null,
+		...headerPreset || headerCellStyles ? { HeaderGroupCell: {
+			...headerPreset ? { preset: headerPreset } : null,
+			...headerCellStyles
+		} } : null,
 		...bodyStyles ? { Body: bodyStyles } : null,
 		...rowStyles ? { Row: rowStyles } : null,
 		...cellStyles || tints.cellStyles ? { Cell: {
@@ -172,6 +290,7 @@ function TableView(props) {
 		...headerHeight != null ? { "$header-height": `${headerHeight}px` } : null
 	}), [
 		styles,
+		isAutoHeight,
 		headerStyles,
 		headerCellStyles,
 		headerPreset,
@@ -315,7 +434,7 @@ function TableView(props) {
 			}, column.key))
 		}, `${keyPrefix}-${rowIndex}`));
 	}
-	function renderSelectionHeaderCell(column) {
+	function renderSelectionHeaderCell(column, rowSpan = 1) {
 		return /* @__PURE__ */ jsx("th", {
 			"data-element": "HeaderCell",
 			"data-key": column.key,
@@ -325,6 +444,7 @@ function TableView(props) {
 			"data-last-column": lastColumnFlag(column),
 			role: "columnheader",
 			scope: "col",
+			rowSpan: rowSpan > 1 ? rowSpan : void 0,
 			tabIndex: -1,
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column),
@@ -345,6 +465,7 @@ function TableView(props) {
 		const checkbox = /* @__PURE__ */ jsx(__Checkbox, {
 			"aria-label": t("itemTable.selectRow", "Select row"),
 			isSelected: selection.isSelected(rowKey),
+			isIndeterminate: selection.isIndeterminate(rowKey),
 			isDisabled: !canSelect,
 			onChange: () => selection.toggleRow(rowKey)
 		});
@@ -403,8 +524,8 @@ function TableView(props) {
 			})
 		}, column.key);
 	}
-	function renderHeaderCell(column) {
-		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionHeaderCell(column);
+	function renderHeaderCell(column, rowSpan = 1) {
+		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionHeaderCell(column, rowSpan);
 		if (column.key === ROW_NUMBER_COLUMN_KEY) return /* @__PURE__ */ jsx("th", {
 			"data-element": "HeaderCell",
 			"data-key": column.key,
@@ -412,6 +533,7 @@ function TableView(props) {
 			"data-last-column": lastColumnFlag(column),
 			role: "columnheader",
 			scope: "col",
+			rowSpan: rowSpan > 1 ? rowSpan : void 0,
 			tabIndex: -1,
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column)
@@ -425,6 +547,7 @@ function TableView(props) {
 			"data-last-column": lastColumnFlag(column),
 			role: "columnheader",
 			scope: "col",
+			rowSpan: rowSpan > 1 ? rowSpan : void 0,
 			tabIndex: -1,
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column)
@@ -514,6 +637,7 @@ function TableView(props) {
 				"data-tint": tintSlot(tints, column.key, "header"),
 				role: "columnheader",
 				scope: "col",
+				rowSpan: rowSpan > 1 ? rowSpan : void 0,
 				tabIndex: isSortable || hasMenu || isDraggable ? 0 : -1,
 				"aria-colindex": column.ariaColIndex,
 				"aria-sort": activeSort ? ARIA_SORT[activeSort.direction] : void 0,
@@ -546,7 +670,7 @@ function TableView(props) {
 			}) : null]
 		}, column.key);
 	}
-	function renderCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge) {
+	function renderCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge, treeItemAria) {
 		const rangeKey = selectionRowKey(sectionOf(pinnedEdge), rowKey);
 		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge);
 		if (column.key === ROW_NUMBER_COLUMN_KEY) return /* @__PURE__ */ jsx("td", {
@@ -571,12 +695,30 @@ function TableView(props) {
 			columnKey: column.key,
 			columnIndex: column.index,
 			section: sectionOf(pinnedEdge),
-			isSelected: selection?.isSelected(rowKey) ?? false
+			isSelected: selection?.isSelected(rowKey) ?? false,
+			tree: pinnedEdge == null ? treeRowState(rowIndex) : void 0
 		};
 		const value = column.isStructural ? void 0 : getColumnValue(column, row, rowIndex);
 		const rendered = column.render ? column.render(value, row, rowIndex, ctx) : column.isStructural ? null : getColumnText(column, row, rowIndex);
 		const isText = typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "bigint";
 		const content = isText && !column.autoHeight ? /* @__PURE__ */ jsx(TextItem, { children: String(rendered) }) : isText ? String(rendered) : rendered;
+		const treeEntry = pinnedEdge == null ? tree?.entries[rowIndex] : void 0;
+		const displayContent = treeEntry && column.key === tree?.columnKey ? /* @__PURE__ */ jsxs("div", {
+			"data-element": "TreeContent",
+			style: { "--tree-level": String(treeEntry.level) },
+			children: [treeEntry.children.length > 0 ? /* @__PURE__ */ jsx(TableTreeToggle, {
+				...treeItemAria?.expandButtonProps,
+				"data-element": "TreeToggle",
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(DirectionIcon, { to: tree.state.expandedKeys.has(treeEntry.key) ? "bottom" : "right" })
+			}) : /* @__PURE__ */ jsx(TableTreeTogglePlaceholder, {
+				"data-element": "TreeToggle",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx("div", {
+				"data-element": "TreeValue",
+				children: content
+			})]
+		}) : content;
 		const resolvedCellStyles = typeof column.cellStyles === "function" ? column.cellStyles(ctx) : column.cellStyles;
 		const CellTag = column.isRowHeader ? "th" : "td";
 		const link = column.isRowHeader ? rowLink?.(row, rowIndex) : void 0;
@@ -603,7 +745,7 @@ function TableView(props) {
 				...resolvedCellStyles
 			},
 			...column.cellProps?.(ctx),
-			children: [content, link !== void 0 ? /* @__PURE__ */ jsx(Action, {
+			children: [displayContent, link !== void 0 ? /* @__PURE__ */ jsx(Action, {
 				"data-element": "RowLink",
 				to: link,
 				tabIndex: -1,
@@ -630,9 +772,9 @@ function TableView(props) {
 		}, `pinned-${edge}-${rowKey}`);
 	}
 	/** The cells of one body row. Shared by both render paths. */
-	function renderRowCells(row, rowIndex) {
-		const rowKey = getRowKey(row, rowIndex);
-		return columns.map((column) => renderCell(column, row, rowIndex, rowKey, rowIndex === rows.length - 1));
+	function renderRowCells(row, rowIndex, treeItemAria) {
+		const rowKey = bodyRowKey(row, rowIndex);
+		return columns.map((column) => renderCell(column, row, rowIndex, rowKey, rowIndex === rows.length - 1, void 0, treeItemAria));
 	}
 	/**
 	* The `<tr>` shell. Virtuoso owns the element in the virtualized path (it
@@ -640,15 +782,17 @@ function TableView(props) {
 	* props rather than the element.
 	*/
 	function getRowElementProps(row, rowIndex) {
-		const rowKey = getRowKey(row, rowIndex);
+		const rowKey = bodyRowKey(row, rowIndex);
 		const isSelected = selection?.isSelected(rowKey) ?? false;
-		const extra = getRowProps?.({
+		const ctx = {
 			row,
 			rowKey,
 			rowIndex,
 			section: "body",
-			isSelected
-		});
+			isSelected,
+			tree: treeRowState(rowIndex)
+		};
+		const extra = getRowProps?.(ctx);
 		return {
 			"data-element": "Row",
 			"data-key": String(rowKey),
@@ -659,7 +803,7 @@ function TableView(props) {
 			"data-selected": isSelected ? "" : void 0,
 			"data-disabled": selection?.isRowDisabled(rowKey) ? "" : void 0,
 			role: "row",
-			tabIndex: isReorderable ? rowIndex === focusedRowIndex ? 0 : -1 : void 0,
+			tabIndex: !tree && isReorderable ? rowIndex === focusedRowIndex ? 0 : -1 : void 0,
 			"aria-selected": selection?.isEnabled ? isSelected : void 0,
 			"aria-rowindex": bodyRowIndex(rowIndex),
 			title: extra?.tooltip,
@@ -675,15 +819,24 @@ function TableView(props) {
 	}
 	function renderRow(row, rowIndex, isVirtual = false) {
 		const { height, ...rowProps } = getRowElementProps(row, rowIndex);
+		const rowKey = bodyRowKey(row, rowIndex);
+		const treeNode = tree?.nodes[rowIndex];
+		const treeEntry = tree?.entries[rowIndex];
 		return /* @__PURE__ */ jsx(TableRow, {
-			rowKey: getRowKey(row, rowIndex),
+			rowKey,
 			rowProps,
 			height,
 			index: isVirtual ? rowIndex : void 0,
 			measureRef: isVirtual ? virtualizer.measureElement : void 0,
 			dragState: isReorderable ? dragState : void 0,
 			dropState: isReorderable ? dropState : void 0,
-			children: renderRowCells(row, rowIndex)
+			tree: treeNode && treeEntry ? {
+				state: tree.state,
+				node: treeNode,
+				entry: treeEntry,
+				isVirtualized: isVirtual
+			} : void 0,
+			children: (treeItemAria) => renderRowCells(row, rowIndex, treeItemAria)
 		}, rowProps["data-key"]);
 	}
 	function renderSpacerRow(height, position) {
@@ -705,7 +858,7 @@ function TableView(props) {
 	* is merely *capable* of dragging keeps its ordinary structure.
 	*/
 	function withDropIndicators(row, index, isVirtual = false) {
-		const rowKey = getRowKey(row, index);
+		const rowKey = bodyRowKey(row, index);
 		const rowNode = renderRow(row, index, isVirtual);
 		if (!isReorderable || !dropState) return rowNode;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -728,17 +881,28 @@ function TableView(props) {
 	const isStale = isLoading && hasRows && loadingIndicator === "overlay";
 	const showSkeleton = isLoading && loadingIndicator !== "none" && (!hasRows || loadingIndicator === "skeleton");
 	const showBlank = isLoading && !hasRows && loadingIndicator === "none";
-	const shouldVirtualize = hasRows && error == null && (isVirtualized === true || isVirtualized === "auto" && rows.length > virtualizeThreshold);
+	const shouldVirtualize = !isAutoHeight && hasRows && error == null && (isVirtualized === true || isVirtualized === "auto" && rows.length > virtualizeThreshold);
 	const rowsRef = useRef(rows);
 	rowsRef.current = rows;
 	const virtualizer = useVirtualizer({
 		count: shouldVirtualize ? rows.length : 0,
 		getScrollElement: () => scrollerRef.current,
-		getItemKey: (index) => String(getRowKey(rowsRef.current[index], index)),
+		getItemKey: (index) => String(rowKeys?.[index] ?? getRowKey(rowsRef.current[index], index)),
 		estimateSize: () => (rowHeight ?? (rowSizeKey ? SIZES[rowSizeKey] : ESTIMATED_ROW_HEIGHT[size ?? "medium"])) + 1,
 		measureElement: (element) => element.getBoundingClientRect().height,
 		overscan
 	});
+	const focusedTreeKey = tree?.state.selectionManager.focusedKey;
+	useEffect(() => {
+		if (!shouldVirtualize || focusedTreeKey == null || !tree) return;
+		const index = tree.entries.findIndex((entry) => entry.key === focusedTreeKey);
+		if (index >= 0) virtualizer.scrollToIndex(index, { align: "auto" });
+	}, [
+		focusedTreeKey,
+		shouldVirtualize,
+		tree,
+		virtualizer
+	]);
 	const scrollability = useScrollability(scrollerEl);
 	/**
 	* Roving tabindex over the rows, so a reorderable table can be operated from
@@ -908,28 +1072,82 @@ function TableView(props) {
 		const row = rows[index];
 		return row === void 0 ? null : {
 			row,
-			index
+			index,
+			key: bodyRowKey(row, index)
 		};
 	}
 	const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
 	const paddingTop = virtualItems.length ? virtualItems[0].start : 0;
 	const paddingBottom = virtualItems.length ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
 	const colGroup = /* @__PURE__ */ jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsx("col", { style: column.width != null ? { width: column.width } : void 0 }, column.key)) });
-	const headerRow = isHeaderHidden ? null : /* @__PURE__ */ jsx("tr", {
-		"data-element": "HeadRow",
-		role: "row",
-		"aria-rowindex": 1,
-		ref: headRowRef,
-		...headCollectionProps,
-		onKeyDownCapture: (event) => {
-			if (event.target?.closest?.("[data-element=\"Resizer\"]")) return;
-			headCollectionProps?.onKeyDownCapture?.(event);
-		},
-		children: columns.map(renderHeaderCell)
+	function pathsSharePrefix(left, right, depth) {
+		for (let index = 0; index <= depth; index++) if (left[index]?.key !== right[index]?.key) return false;
+		return true;
+	}
+	function renderHeaderGroupCell(group, segment, depth) {
+		const first = segment[0];
+		const last = segment[segment.length - 1];
+		const pin = segment.every((column) => column.pin === first.pin) ? first.pin : void 0;
+		const pinOffset = pin === "start" ? first.pinOffset : pin === "end" ? last.pinOffset : null;
+		return /* @__PURE__ */ jsx("th", {
+			"data-element": "HeaderGroupCell",
+			"data-key": group.key,
+			"data-pin": pin,
+			"data-pin-edge": segment.some((column) => column.isPinEdge) ? "" : void 0,
+			"data-last-column": last.index === columnCount - 1 ? "" : void 0,
+			"data-align": "center",
+			role: "columnheader",
+			scope: "colgroup",
+			tabIndex: -1,
+			"aria-colindex": first.ariaColIndex,
+			colSpan: segment.length,
+			style: pinOffset == null ? void 0 : { ["--pin-offset"]: `${pinOffset}px` },
+			children: /* @__PURE__ */ jsx(TableHeaderItem, { children: group.title })
+		}, `${depth}:${first.key}:${group.key}`);
+	}
+	function renderHeaderRowCells(depth) {
+		const cells = [];
+		for (let columnIndex = 0; columnIndex < columns.length;) {
+			const column = columns[columnIndex];
+			const path = columnHeaderPaths?.get(column.key) ?? [];
+			if (path.length < depth) {
+				columnIndex++;
+				continue;
+			}
+			if (path.length === depth) {
+				cells.push(renderHeaderCell(column, headerRowCount - depth));
+				columnIndex++;
+				continue;
+			}
+			let segmentEnd = columnIndex + 1;
+			while (segmentEnd < columns.length) {
+				const nextPath = columnHeaderPaths?.get(columns[segmentEnd].key) ?? [];
+				if (nextPath.length <= depth || columns[segmentEnd].pin !== column.pin || !pathsSharePrefix(path, nextPath, depth)) break;
+				segmentEnd++;
+			}
+			cells.push(renderHeaderGroupCell(path[depth], columns.slice(columnIndex, segmentEnd), depth));
+			columnIndex = segmentEnd;
+		}
+		return cells;
+	}
+	const headerRows = isHeaderHidden ? null : Array.from({ length: headerRowCount }, (_, depth) => {
+		const isLeafRow = depth === headerRowCount - 1;
+		return /* @__PURE__ */ jsx("tr", {
+			"data-element": "HeadRow",
+			role: "row",
+			"aria-rowindex": depth + 1,
+			ref: isLeafRow ? headRowRef : void 0,
+			...isLeafRow ? headCollectionProps : void 0,
+			onKeyDownCapture: isLeafRow ? (event) => {
+				if (event.target?.closest?.("[data-element=\"Resizer\"]")) return;
+				headCollectionProps?.onKeyDownCapture?.(event);
+			} : void 0,
+			children: renderHeaderRowCells(depth)
+		}, depth);
 	});
 	const tableProps = {
 		"data-element": "Table",
-		role: "grid",
+		role: tree ? "treegrid" : "grid",
 		"aria-label": ariaLabel,
 		"aria-busy": isLoading || void 0,
 		"aria-rowcount": headerRowCount + pinnedTopCount + bodyRowCount + pinnedBottomCount,
@@ -947,6 +1165,40 @@ function TableView(props) {
 		renderSpacerRow(paddingBottom, "bottom")
 	] });
 	else bodyContent = rows.map((row, index) => withDropIndicators(row, index));
+	const tableContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		colGroup,
+		isHeaderHidden ? null : /* @__PURE__ */ jsx("thead", {
+			"data-element": "Head",
+			children: headerRows
+		}),
+		/* @__PURE__ */ jsxs("tbody", {
+			"data-element": "Body",
+			...collectionProps,
+			ref: handleBodyRef,
+			children: [
+				pinnedTopRows?.map((row, index) => renderPinnedRow(row, index, "top")),
+				bodyContent,
+				pinnedBottomRows?.map((row, index) => renderPinnedRow(row, index, "bottom")),
+				isLoadingMore ? renderSkeletonRows(loadMoreSkeletonCount, "load-more") : null,
+				onLoadMore && hasRows ? /* @__PURE__ */ jsx("tr", {
+					"data-sentinel": "",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("td", {
+						colSpan: Math.max(columnCount, 1),
+						style: {
+							height: 1,
+							padding: 0,
+							border: 0
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							ref: sentinelRef,
+							style: { height: 1 }
+						})
+					})
+				}) : null
+			]
+		})
+	] });
 	if (columnCount === 0 && isLoading) return /* @__PURE__ */ jsxs(TableElement, {
 		ref: rootRef,
 		qa: qa || "Table",
@@ -989,16 +1241,16 @@ function TableView(props) {
 						const found = rowFromEvent(event.target);
 						if (found) {
 							event.stopPropagation();
-							openContextMenuFor(found.row, found.index, getRowKey(found.row, found.index), event);
+							openContextMenuFor(found.row, found.index, found.key, event);
 						}
 						return;
 					}
 					if (event.key === "Enter" && onRowAction) {
 						const found = rowFromEvent(event.target);
-						if (found && !event.target.closest("a, button, input, select, textarea, [role=\"button\"]")) onRowAction(found.row, getRowKey(found.row, found.index));
+						if (found && !event.target.closest("a, button, input, select, textarea, [role=\"button\"]")) onRowAction(found.row, found.key);
 						return;
 					}
-					if (isReorderable && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+					if (!tree && isReorderable && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
 						if (dragState?.draggingKeys?.size) return;
 						if (moveRowFocus(event.target, event.key === "ArrowDown" ? 1 : -1)) event.preventDefault();
 						return;
@@ -1027,43 +1279,15 @@ function TableView(props) {
 						description: t("itemTable.copiedCells", "{{count}} cells copied", { count: cellSelection.cellCount })
 					});
 				},
-				children: /* @__PURE__ */ jsxs("table", {
+				children: tree ? /* @__PURE__ */ jsx(TreeGridTable, {
+					tree,
+					tableProps,
+					style: layout.totalWidth != null ? { width: layout.totalWidth } : void 0,
+					children: tableContent
+				}) : /* @__PURE__ */ jsx("table", {
 					...tableProps,
 					style: layout.totalWidth != null ? { width: layout.totalWidth } : void 0,
-					children: [
-						colGroup,
-						isHeaderHidden ? null : /* @__PURE__ */ jsx("thead", {
-							"data-element": "Head",
-							children: headerRow
-						}),
-						/* @__PURE__ */ jsxs("tbody", {
-							"data-element": "Body",
-							...collectionProps,
-							ref: handleBodyRef,
-							children: [
-								pinnedTopRows?.map((row, index) => renderPinnedRow(row, index, "top")),
-								bodyContent,
-								pinnedBottomRows?.map((row, index) => renderPinnedRow(row, index, "bottom")),
-								isLoadingMore ? renderSkeletonRows(loadMoreSkeletonCount, "load-more") : null,
-								onLoadMore && hasRows ? /* @__PURE__ */ jsx("tr", {
-									"data-sentinel": "",
-									"aria-hidden": "true",
-									children: /* @__PURE__ */ jsx("td", {
-										colSpan: Math.max(columnCount, 1),
-										style: {
-											height: 1,
-											padding: 0,
-											border: 0
-										},
-										children: /* @__PURE__ */ jsx("div", {
-											ref: sentinelRef,
-											style: { height: 1 }
-										})
-									})
-								}) : null
-							]
-						})
-					]
+					children: tableContent
 				})
 			}),
 			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", {