@vueye-table/headless 3.0.0-alpha.8 → 3.0.0-alpha.9

package/dist/index.js

@@ -1,5 +1,6 @@
 import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useVirtualColumns, useVirtualRows } from "@vueye-table/vue";
 import { Fragment, computed, defineComponent, h, inject, nextTick, onMounted, onScopeDispose, provide, ref, shallowRef, useId, watch } from "vue";
+import { getRowItemKey, gridCommand } from "@vueye-table/core";
 
 //#region src/shared.ts
 /** The element a component renders. Every headless component accepts `as`. */
@@ -76,14 +77,16 @@ const DataTableSelectRow = defineComponent({
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableSelectRow>");
 		return () => {
-			const selected = table.isSelected(props.row.key);
+			const selected = table.tree ? props.row.selection === "all" : table.isSelected(props.row.key);
+			const indeterminate = table.tree && props.row.selection === "some";
 			const toggle = () => table.toggleRow(props.row.key);
 			return slots.default?.({
 				selected,
+				indeterminate,
 				toggle
 			}) ?? checkbox({
 				checked: selected,
-				indeterminate: false,
+				indeterminate,
 				label: props.label,
 				disabled: table.selectionMode === "none",
 				onChange: toggle
@@ -262,14 +265,16 @@ const DataTableStatus = defineComponent({
 				loadError: table.loadError,
 				canLoadMore: table.canLoadMore,
 				retry: () => table.retry(),
-				loadNext: () => table.loadNext()
+				loadNext: () => table.loadNext(),
+				loadingChildrenCount: table.tree ? table.processedRows.filter((row) => row.childStatus === "loading").length : 0,
+				childErrorCount: table.tree ? table.processedRows.filter((row) => row.childStatus === "error").length : 0
 			};
 			const count = `Loaded ${table.loadedRowCount.toLocaleString()} ${table.loadedRowCount === 1 ? "row" : "rows"}`;
 			const text = table.loadingMode ? table.loadState === "error" ? `${count}. Could not load rows. Retry loading.` : table.loadState === "aborted" ? `${count}. Loading stopped.` : table.loadState === "loading" || table.loadState === "streaming" ? `${count}…` : `${count}${table.loadState === "done" ? ". All rows loaded." : "."}` : table.rowCount === 0 ? "No rows" : `${table.pageStart}–${table.pageEnd} of ${table.rowCount} rows` + (table.selectedCount > 0 ? `, ${table.selectedCount} selected` : "");
 			return h(props.as, {
 				role: "status",
 				"aria-live": "polite"
-			}, slots.default?.(slotProps) ?? text);
+			}, slots.default?.(slotProps) ?? text + (slotProps.loadingChildrenCount ? " Loading children…" : "") + (slotProps.childErrorCount ? " Could not load children. Retry children in the affected row." : ""));
 		};
 	}
 });
@@ -556,6 +561,269 @@ function virtualRow(binding, row) {
 	return binding.rowItems.find((item) => item.renderItem.kind === "row" && item.renderItem.row.key === row.key);
 }
 
+//#endregion
+//#region src/hierarchy.ts
+const hierarchyProps = {
+	treeColumn: {
+		type: String,
+		default: void 0
+	},
+	keepAliveDetail: {
+		type: Boolean,
+		default: false
+	}
+};
+const hierarchyKey = Symbol("vueye-table-hierarchy");
+function provideHierarchy(table, props) {
+	const focus = shallowRef();
+	const focusKey = computed(() => table.rows.some((row) => row.key === focus.value) ? focus.value : table.rows[0]?.key);
+	const context = {
+		id: `vt-tree-${useId()}`,
+		table,
+		get treeColumn() {
+			return props.treeColumn;
+		},
+		get keepAliveDetail() {
+			return props.keepAliveDetail;
+		},
+		focus,
+		get focusKey() {
+			return focusKey.value;
+		}
+	};
+	provide(hierarchyKey, context);
+	return context;
+}
+function injectHierarchy() {
+	return inject(hierarchyKey, void 0);
+}
+function resolveTreeColumn(table, column) {
+	return table.columns.find((candidate) => candidate.id === column)?.id ?? table.columns[0]?.id;
+}
+function itemId(context, row, detail = false) {
+	return context ? `${context.id}-${encodeURIComponent(getRowItemKey(row.key, detail ? "detail" : "row"))}` : void 0;
+}
+const siblingCache = /* @__PURE__ */ new WeakMap();
+function hierarchyRowAttrs(table, row, context) {
+	if (!table.tree) return {};
+	let positions = siblingCache.get(table.processedRows);
+	if (!positions) {
+		const groups = /* @__PURE__ */ new Map();
+		for (const candidate of table.processedRows) {
+			const group = groups.get(candidate.parentKey) ?? [];
+			group.push(candidate);
+			groups.set(candidate.parentKey, group);
+		}
+		const indices = new Map(table.processedRows.map((candidate, index) => [candidate.key, index]));
+		const result = /* @__PURE__ */ new Map();
+		for (const group of groups.values()) group.forEach((candidate, index) => result.set(candidate.key, {
+			position: index + 1,
+			size: group.length,
+			index: indices.get(candidate.key)
+		}));
+		positions = result;
+		siblingCache.set(table.processedRows, result);
+	}
+	const position = positions.get(row.key);
+	return {
+		id: itemId(context, row),
+		"data-tree-key": getRowItemKey(row.key),
+		"aria-level": row.depth + 1,
+		"aria-expanded": row.canExpand ? String(row.isExpanded) : void 0,
+		"aria-setsize": position?.size,
+		"aria-posinset": position?.position,
+		"aria-rowindex": position ? position.index + 2 : void 0,
+		"aria-busy": row.childStatus === "loading" ? "true" : void 0
+	};
+}
+/** Row-focused table navigation; cell-focused grids use the same pure core commands. */
+function treeKeydown(event, context, virtual) {
+	const table = context.table;
+	const target = event.target;
+	if (!table.tree || !target?.closest) return;
+	if (target.closest("input, textarea, select, [contenteditable=true]") || target.closest("button") && !target.closest("[data-expand-toggle]")) return;
+	const key = target.closest("tr")?.getAttribute("data-tree-key");
+	const index = table.rows.findIndex((row) => getRowItemKey(row.key) === key);
+	const row = table.rows[index];
+	if (!row) return;
+	const command = gridCommand(event, {
+		canExpand: row.canExpand,
+		expanded: row.isExpanded
+	});
+	let next = row;
+	if (command?.type === "tree") {
+		if (command.action === "expand" || command.action === "collapse") table.toggleExpanded(row.key, command.action === "expand");
+		else if (command.action === "siblings") for (const sibling of table.processedRows.filter((candidate) => candidate.parentKey === row.parentKey && candidate.canExpand)) table.toggleExpanded(sibling.key, true);
+		else if (command.action === "child") next = table.rows.find((candidate) => candidate.parentKey === row.key) ?? row;
+		else next = table.rows.find((candidate) => candidate.key === row.parentKey) ?? row;
+	} else if (event.key === "ArrowDown" || event.key === "ArrowUp") next = table.rows[index + (event.key === "ArrowDown" ? 1 : -1)] ?? row;
+	else if (event.key === "Home" || event.key === "End") next = table.rows[event.key === "Home" ? 0 : table.rows.length - 1] ?? row;
+	else return;
+	event.preventDefault();
+	context.focus.value = next.key;
+	virtual?.rows.scrollToKey(next.key);
+	const id = itemId(context, next);
+	nextTick(() => target.closest("table")?.ownerDocument.getElementById(id ?? "")?.focus());
+}
+const expandToggleProps = {
+	row: rowProp,
+	controls: {
+		type: String,
+		default: void 0
+	},
+	expandLabel: {
+		type: String,
+		default: "Expand row"
+	},
+	collapseLabel: {
+		type: String,
+		default: "Collapse row"
+	}
+};
+const treeCellProps = {
+	row: rowProp,
+	as: asProp("div")
+};
+const DataTableExpandToggle = defineComponent({
+	name: "DataTableExpandToggle",
+	props: expandToggleProps,
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableExpandToggle>");
+		const context = injectHierarchy();
+		const grid = injectDataGrid();
+		return () => props.row.canExpand ? h("button", {
+			type: "button",
+			"data-expand-toggle": "",
+			tabindex: table.tree ? -1 : void 0,
+			"aria-expanded": String(props.row.isExpanded),
+			"aria-controls": props.controls ?? (!table.tree ? itemId(context, props.row, true) : props.row.isExpanded ? table.rows.filter((row) => row.parentKey === props.row.key).map((row) => itemId(context, row)).filter(Boolean).join(" ") || void 0 : void 0),
+			"aria-label": props.row.isExpanded ? props.collapseLabel : props.expandLabel,
+			onMousedown: (event) => event.stopPropagation(),
+			onDblclick: (event) => event.stopPropagation(),
+			onClick: (event) => {
+				event.stopPropagation();
+				if (grid?.table === table) grid.focusCell({
+					row: table.rows.indexOf(props.row),
+					column: Math.max(0, table.columns.findIndex((column) => column.id === resolveTreeColumn(table, context?.treeColumn)))
+				});
+				table.toggleExpanded(props.row.key);
+				if (grid?.table === table) nextTick(() => event.target.closest("table")?.focus());
+			}
+		}, slots.default?.({
+			row: props.row,
+			expanded: props.row.isExpanded
+		}) ?? (props.row.isExpanded ? props.collapseLabel : props.expandLabel)) : null;
+	}
+});
+const DataTableTreeCell = defineComponent({
+	name: "DataTableTreeCell",
+	props: treeCellProps,
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableTreeCell>");
+		const context = injectHierarchy();
+		const grid = injectDataGrid();
+		return () => h(props.as, {
+			class: "vt-tree-cell",
+			"data-tree-cell": "",
+			style: { paddingInlineStart: `calc(var(--vt-tree-indent, 1.25rem) * ${props.row.depth})` }
+		}, [
+			h("span", { class: "vt-tree-toggle" }, slots.toggle?.({ row: props.row }) ?? h(DataTableExpandToggle, { row: props.row })),
+			h("span", { class: "vt-tree-label" }, [slots.default?.()]),
+			props.row.childStatus === "loading" ? h("span", { class: "vt-tree-loading" }, "Loading children…") : null,
+			props.row.childStatus === "error" ? h("span", { class: "vt-tree-error" }, ["Could not load children. ", h("button", {
+				type: "button",
+				class: "vt-tree-retry",
+				onMousedown: (event) => event.stopPropagation(),
+				onClick: (event) => {
+					event.stopPropagation();
+					const element = event.currentTarget.closest("table");
+					if (grid?.table === table) grid.focusCell({
+						row: table.rows.indexOf(props.row),
+						column: Math.max(0, table.columns.findIndex((column) => column.id === resolveTreeColumn(table, context?.treeColumn)))
+					});
+					table.toggleExpanded(props.row.key, true);
+					nextTick(() => {
+						if (grid?.table === table) element?.focus();
+						else element?.ownerDocument.getElementById(itemId(context, props.row) ?? "")?.focus();
+					});
+				}
+			}, "Retry children")]) : null
+		]);
+	}
+});
+/** One full-width detail; retained collapsed content remains hidden and unmeasured. */
+const DataTableDetailRow = defineComponent({
+	name: "DataTableDetailRow",
+	props: {
+		row: rowProp,
+		colspan: {
+			type: Number,
+			default: void 0
+		},
+		hidden: {
+			type: Boolean,
+			default: false
+		},
+		keepAlive: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableDetailRow>");
+		const context = injectHierarchy();
+		const virtual = injectVirtual();
+		let opened = false;
+		return () => {
+			if (props.row.isExpanded && !props.hidden) opened = true;
+			if (!opened || (!props.row.isExpanded || props.hidden) && !(props.keepAlive ?? context?.keepAliveDetail)) return null;
+			const hidden = props.hidden || !props.row.isExpanded;
+			return h("tr", {
+				id: itemId(context, props.row, true),
+				"data-detail": "",
+				hidden,
+				...virtual && !hidden ? { ref: (target) => virtual.rows.measureElement(target, getRowItemKey(props.row.key, "detail")) } : {}
+			}, [h("td", {
+				colspan: Math.max(1, props.colspan ?? table.columns.length),
+				class: "vt-detail-cell"
+			}, [slots.default?.({ row: props.row })])]);
+		};
+	}
+});
+function createDetails(table, slot, colspan) {
+	const context = injectHierarchy();
+	const visited = /* @__PURE__ */ new Set();
+	const render = (row, rowIndex, hidden = false) => {
+		if (!hidden && context?.keepAliveDetail) visited.add(row.key);
+		return h(DataTableDetailRow, {
+			key: getRowItemKey(row.key, "detail"),
+			row,
+			colspan: colspan(),
+			hidden
+		}, { default: () => slot()?.({
+			row,
+			rowIndex
+		}) });
+	};
+	return {
+		render,
+		retained(visible) {
+			if (!context?.keepAliveDetail) return [];
+			return [...visited].flatMap((key) => {
+				const index = table.rows.findIndex((row) => row.key === key);
+				if (index < 0) {
+					visited.delete(key);
+					return [];
+				}
+				return visible.has(key) ? [] : [render(table.rows[index], index, true)];
+			});
+		}
+	};
+}
+
 //#endregion
 //#region src/table.ts
 /**
@@ -571,16 +839,20 @@ const DataTableRoot = defineComponent({
 			required: true
 		},
 		as: asProp("table"),
-		...virtualProps
+		...virtualProps,
+		...hierarchyProps
 	},
 	setup(props, { slots }) {
 		provideDataTable(props.table);
+		const hierarchy = provideHierarchy(props.table, props);
 		const element = shallowRef();
 		const render = (virtual) => h(props.as, {
-			"aria-rowcount": props.table.rowCount + 1,
+			role: props.table.tree ? "treegrid" : void 0,
+			"aria-rowcount": (props.table.tree ? props.table.processedRows.length : props.table.rowCount) + 1,
 			"aria-colcount": props.table.columns.length,
 			"aria-busy": props.table.loadState === "loading" || props.table.loadState === "streaming" ? "true" : void 0,
 			"data-empty": flag(props.table.rowCount === 0),
+			onKeydown: (event) => treeKeydown(event, hierarchy, virtual),
 			...virtual ? {
 				ref: element,
 				"data-virtual": ""
@@ -729,20 +1001,28 @@ const DataTableBody = defineComponent({
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableBody>");
 		const virtual = injectVirtual();
+		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length);
 		return () => {
 			if (props.virtual && !virtual) return h(VirtualDataTableBody, props, slots);
-			if (virtual) return renderTableBody(table, virtual, props.as, props.colspan, slots);
+			if (virtual) return renderTableBody(table, virtual, props.as, props.colspan, slots, details);
 			let content = slots.default?.({ rows: table.rows });
-			if (!content) content = table.rows.length === 0 && slots.empty ? h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, table.columns.length) }, slots.empty())]) : table.rows.map((row) => h(DataTableRow, {
-				key: row.key,
-				row
-			}));
+			if (!content) content = table.rows.length === 0 && slots.empty ? h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, table.columns.length) }, slots.empty())]) : table.renderItems.map((item) => item.kind === "row" ? slots.row ? h(Fragment, { key: item.key }, [slots.row(item)]) : h(DataTableRow, {
+				key: item.key,
+				row: item.row,
+				rowIndex: item.rowIndex
+			}) : details.render(item.row, item.rowIndex));
+			const visibleDetails = new Set(table.renderItems.filter((item) => item.kind === "detail").map((item) => item.row.key));
+			const retained = slots.default ? [] : details.retained(visibleDetails);
 			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length);
-			return h(props.as, sentinel ? [content, sentinel] : content);
+			return h(props.as, [
+				...Array.isArray(content) ? content : content ? [content] : [],
+				...retained,
+				...sentinel ? [sentinel] : []
+			]);
 		};
 	}
 });
-function renderTableBody(table, virtual, as, colspan, slots, element) {
+function renderTableBody(table, virtual, as, colspan, slots, details, element) {
 	const width = colspan ?? table.columns.length;
 	const attrs = element ? { ref: element } : {};
 	const content = slots.default?.({ rows: virtual.rowItems.filter((item) => item.renderItem.kind === "row").map((item) => item.renderItem.row) });
@@ -753,15 +1033,15 @@ function renderTableBody(table, virtual, as, colspan, slots, element) {
 		rowSpacer(virtual.rows.paddingEnd, width, "gap-end"),
 		...loadSentinel(table, width) ? [loadSentinel(table, width)] : []
 	]);
-	return h(as, attrs, [...renderRows(virtual, width, (item) => item.renderItem.kind === "row" ? h(DataTableRow, {
-		key: item.key,
-		row: item.renderItem.row,
-		rowIndex: item.renderItem.rowIndex
-	}) : h("tr", {
-		key: item.key,
-		"data-detail": "",
-		ref: (target) => virtual.rows.measureElement(target, item.key)
-	}, [h("td", { colspan: Math.max(1, width) }, slots.detail?.(item.renderItem))])), ...loadSentinel(table, width) ? [loadSentinel(table, width)] : []]);
+	return h(as, attrs, [
+		...renderRows(virtual, width, (item) => item.renderItem.kind === "row" ? slots.row ? h(Fragment, { key: item.key }, [slots.row(item.renderItem)]) : h(DataTableRow, {
+			key: item.key,
+			row: item.renderItem.row,
+			rowIndex: item.renderItem.rowIndex
+		}) : details.render(item.renderItem.row, item.renderItem.rowIndex)),
+		...details.retained(new Set(virtual.rowItems.filter((item) => item.renderItem.kind === "detail").map((item) => item.renderItem.row.key))),
+		...loadSentinel(table, width) ? [loadSentinel(table, width)] : []
+	]);
 }
 const VirtualDataTableBody = defineComponent({
 	name: "DataTableVirtualBody",
@@ -778,7 +1058,8 @@ const VirtualDataTableBody = defineComponent({
 		const table = injectDataTable("<DataTableBody>");
 		const element = shallowRef();
 		const virtual = createComponentVirtual(table, virtualOptions(props), () => element.value?.closest("table"));
-		return () => renderTableBody(table, virtual, props.as, props.colspan, slots, element);
+		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length);
+		return () => renderTableBody(table, virtual, props.as, props.colspan, slots, details, element);
 	}
 });
 /** A body row; `aria-selected` and `data-selected` follow the selection. */
@@ -796,6 +1077,7 @@ const DataTableRow = defineComponent({
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableRow>");
 		const virtual = injectVirtual();
+		const hierarchy = injectHierarchy();
 		return () => {
 			const { row } = props;
 			const selected = table.isSelected(row.key);
@@ -806,6 +1088,11 @@ const DataTableRow = defineComponent({
 				"aria-selected": table.selectionMode === "none" ? void 0 : String(selected),
 				"data-selected": flag(selected),
 				"data-key": String(row.key),
+				...hierarchyRowAttrs(table, row, hierarchy),
+				tabindex: table.tree ? (hierarchy?.focusKey ?? table.rows[0]?.key) === row.key ? 0 : -1 : void 0,
+				onFocus: () => {
+					if (hierarchy) hierarchy.focus.value = row.key;
+				},
 				...virtual && item ? {
 					ref: (element) => virtual.rows.measureElement(element, item.key),
 					"data-virtual-row": ""
@@ -829,22 +1116,29 @@ const DataTableCell = defineComponent({
 	props: {
 		row: rowProp,
 		column: columnProp,
-		as: asProp("td")
+		as: asProp("td"),
+		tree: {
+			type: Boolean,
+			default: true
+		}
 	},
 	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableCell>");
+		const hierarchy = injectHierarchy();
 		return () => {
 			const { row, column } = props;
 			const value = row.getValue(column.id);
 			const display = row.getDisplay(column.id);
-			return h(props.as, {
-				"data-column": column.id,
-				"data-align": column.align
-			}, slots.default?.({
+			const content = () => slots.default?.({
 				row,
 				column,
 				value,
 				display
-			}) ?? display);
+			}) ?? display;
+			return h(props.as, {
+				"data-column": column.id,
+				"data-align": column.align
+			}, props.tree && table.tree && column.id === resolveTreeColumn(table, hierarchy?.treeColumn) ? h(DataTableTreeCell, { row }, { default: content }) : content());
 		};
 	}
 });
@@ -893,6 +1187,7 @@ const DataGridRoot = defineComponent({
 			default: void 0
 		},
 		...virtualProps,
+		...hierarchyProps,
 		/** Width reserved before data columns, for a row-number/header column. */
 		gutter: {
 			type: Number,
@@ -901,8 +1196,9 @@ const DataGridRoot = defineComponent({
 	},
 	setup(props, { slots, expose }) {
 		provideDataTable(props.table);
-		const grid = useDataGrid(props.table);
+		const grid = useDataGrid(props.table, { treeColumn: () => props.treeColumn });
 		provideDataGrid(grid);
+		provideHierarchy(props.table, props);
 		const element = ref();
 		const id = `vt-grid-${useId()}`;
 		const focus = () => {
@@ -964,11 +1260,11 @@ const DataGridRoot = defineComponent({
 			return h(props.as, {
 				ref: element,
 				id,
-				role: "grid",
+				role: props.table.tree ? "treegrid" : "grid",
 				tabindex: 0,
 				"aria-label": props.label,
 				"aria-multiselectable": "true",
-				"aria-rowcount": (binding ? props.table.rowCount : props.table.rows.length) + 1,
+				"aria-rowcount": (props.table.tree ? props.table.processedRows.length : binding ? props.table.rowCount : props.table.rows.length) + 1,
 				"aria-colcount": props.table.columns.length,
 				"aria-busy": props.table.loadState === "loading" || props.table.loadState === "streaming" ? "true" : void 0,
 				"aria-activedescendant": focusPosition && !grid.editor ? cellId(id, focusPosition.row, focusPosition.column) : void 0,
@@ -1015,12 +1311,18 @@ const DataGridBody = defineComponent({
 		colspan: {
 			type: Number,
 			default: void 0
+		},
+		treeCell: {
+			type: Boolean,
+			default: true
 		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataGridBody>");
 		const { grid } = useGrid("<DataGridBody>");
 		const virtual = injectVirtual();
+		const hierarchy = injectHierarchy();
+		const details = createDetails(table, () => slots.detail, () => props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0));
 		const element = ref();
 		const render = (binding) => {
 			if (binding && slots.default) {
@@ -1028,53 +1330,60 @@ const DataGridBody = defineComponent({
 				const content = slots.default({ rows: binding.rowItems.filter((item) => item.renderItem.kind === "row").map((item) => item.renderItem.row) });
 				return h(props.as, { ref: element }, sentinel ? [...content, sentinel] : content);
 			}
-			if (binding) return h(props.as, { ref: element }, [...renderRows(binding, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0), (item) => {
-				if (item.renderItem.kind !== "row") return h("tr", {
-					key: item.key,
-					"aria-hidden": "true",
-					"data-detail": "",
-					style: { height: `${item.size}px` }
-				}, [h("td", {
-					colspan: Math.max(1, table.columns.length),
-					style: { padding: "0" }
-				})]);
-				const { row, rowIndex } = item.renderItem;
-				const columns = renderColumns(table.columns, binding, (column, columnIndex) => h(DataGridCell, {
-					key: column.id,
-					row,
-					column,
-					rowIndex,
-					columnIndex
-				}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0), "td");
+			if (binding) return h(props.as, { ref: element }, [
+				...renderRows(binding, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0), (item) => {
+					if (item.renderItem.kind !== "row") return details.render(item.renderItem.row, item.renderItem.rowIndex);
+					const { row, rowIndex } = item.renderItem;
+					const columns = renderColumns(table.columns, binding, (column, columnIndex) => h(DataGridCell, {
+						key: column.id,
+						row,
+						column,
+						rowIndex,
+						columnIndex,
+						tree: props.treeCell
+					}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0), "td");
+					return h("tr", {
+						key: item.key,
+						role: "row",
+						"aria-rowindex": table.pageStart + rowIndex + 1,
+						"data-key": String(row.key),
+						...hierarchyRowAttrs(table, row, hierarchy),
+						"data-virtual-row": "",
+						ref: (target) => binding.rows.measureElement(target, item.key)
+					}, [slots.rowHeader?.({
+						row,
+						index: rowIndex
+					}), ...columns]);
+				}),
+				...details.retained(new Set(binding.rowItems.filter((item) => item.renderItem.kind === "detail").map((item) => item.renderItem.row.key))),
+				...loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0)) ? [loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0))] : []
+			]);
+			const content = slots.default?.({ rows: table.rows }) ?? table.renderItems.map((item) => item.kind === "detail" ? details.render(item.row, item.rowIndex) : (() => {
+				const { row, rowIndex } = item;
 				return h("tr", {
 					key: item.key,
 					role: "row",
-					"aria-rowindex": table.pageStart + rowIndex + 1,
+					"aria-rowindex": rowIndex + 2,
 					"data-key": String(row.key),
-					"data-virtual-row": "",
-					ref: (target) => binding.rows.measureElement(target, item.key)
+					...hierarchyRowAttrs(table, row, hierarchy)
 				}, [slots.rowHeader?.({
 					row,
 					index: rowIndex
-				}), ...columns]);
-			}), ...loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0)) ? [loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0))] : []]);
-			const content = slots.default?.({ rows: table.rows }) ?? table.rows.map((row, rowIndex) => h("tr", {
-				key: row.key,
-				role: "row",
-				"aria-rowindex": rowIndex + 2,
-				"data-key": String(row.key)
-			}, [slots.rowHeader?.({
-				row,
-				index: rowIndex
-			}), ...table.columns.map((column, columnIndex) => h(DataGridCell, {
-				key: column.id,
-				row,
-				column,
-				rowIndex,
-				columnIndex
-			}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0))]));
+				}), ...table.columns.map((column, columnIndex) => h(DataGridCell, {
+					key: column.id,
+					row,
+					column,
+					rowIndex,
+					columnIndex,
+					tree: props.treeCell
+				}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0))]);
+			})());
 			const sentinel = loadSentinel(table, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0));
-			return h(props.as, sentinel ? [...content, sentinel] : content);
+			return h(props.as, [
+				...content,
+				...slots.default ? [] : details.retained(new Set(table.renderItems.filter((item) => item.kind === "detail").map((item) => item.row.key))),
+				sentinel
+			]);
 		};
 		return () => props.virtual && !virtual ? h(VirtualContent, {
 			table,
@@ -1142,6 +1451,10 @@ const DataGridCell = defineComponent({
 		row: rowProp,
 		column: columnProp,
 		as: asProp("td"),
+		tree: {
+			type: Boolean,
+			default: true
+		},
 		/** The row's position on the page. Found by searching the rows when left out. */
 		rowIndex: {
 			type: Number,
@@ -1157,6 +1470,7 @@ const DataGridCell = defineComponent({
 		const table = injectDataTable("<DataGridCell>");
 		const { grid, context } = useGrid("<DataGridCell>");
 		const virtual = injectVirtual();
+		const hierarchy = injectHierarchy();
 		const element = ref();
 		const position = () => ({
 			row: props.rowIndex ?? table.rows.indexOf(props.row),
@@ -1182,13 +1496,16 @@ const DataGridCell = defineComponent({
 				commit: (then) => grid.commitEdit(then),
 				cancel: () => grid.cancelEdit()
 			}) ?? h(DataGridEditor, { label: `Edit ${column.header}` });
-			else content = slots.default?.({
-				row,
-				column,
-				value,
-				display,
-				editable
-			}) ?? display;
+			else {
+				const children = () => slots.default?.({
+					row,
+					column,
+					value,
+					display,
+					editable
+				}) ?? display;
+				content = props.tree && table.tree && column.id === resolveTreeColumn(table, hierarchy?.treeColumn) ? h(DataTableTreeCell, { row }, { default: children }) : children();
+			}
 			return h(props.as, {
 				ref: element,
 				id: cellId(context.id, at.row, at.column),
@@ -1221,5 +1538,5 @@ const DataGridCell = defineComponent({
 });
 
 //#endregion
-export { DataGridBody, DataGridCell, DataGridRoot, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnVisibility, DataTableEmpty, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, DataTableViewport, DataTableVirtualColumns, cellId, columnStyle, injectVirtual as injectVirtualRenderer, virtualProps };
+export { DataGridBody, DataGridCell, DataGridRoot, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnVisibility, DataTableDetailRow, DataTableEmpty, DataTableExpandToggle, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, DataTableTreeCell, DataTableViewport, DataTableVirtualColumns, cellId, columnStyle, expandToggleProps, hierarchyProps, injectVirtual as injectVirtualRenderer, resolveTreeColumn, treeCellProps, virtualProps };
 //# sourceMappingURL=index.js.map