@feugene/granularity 0.47.0 → 0.48.0

package/dist/components/GrDataTable/chunks/{GrDataTable-Dp9Fp_P5.js → GrDataTable-DQxYYgQk.js}

@@ -4,16 +4,19 @@ import { t as loader_circle_default } from "../../../chunks/loader-circle-CfVLz7
 import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-DTZIgmje.js";
 import { useVirtualList } from "../../../composables/useVirtualList.js";
 import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { t as GrSkeleton_default } from "../../GrSkeleton/chunks/GrSkeleton-CgfXxPQ2.js";
+import { t as GrButton_default } from "../../GrButton/chunks/GrButton-CS4TqMtG.js";
 import { useAnnouncer } from "../../../composables/useAnnouncer.js";
 import { useDragGesture } from "../../../composables/useDragGesture.js";
+import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
 import { t as GrCheckbox_default } from "../../GrCheckbox/chunks/GrCheckbox-Dp201frb.js";
-import { t as GrTable_default } from "../../GrTable/chunks/GrTable-iwzHvlMC.js";
+import { t as GrTable_default } from "../../GrTable/chunks/GrTable-CKJ-HrsN.js";
 import { i as moveItem, r as insertionIndex } from "../../../chunks/dragSortGeometry-CY-llfrQ.js";
 import { useDragSort } from "../../../composables/useDragSort.js";
-import { C as sortIconSizes, S as selectColumnWidths, T as summaryRowClass, _ as headerTextSizes, a as columnDropAfterClass, b as rowSelectedClass, c as columnHandleClass, d as columnPinnedRightEdgeClass, f as columnResizerClass, g as headerGaps, h as columnResizerLineClass, i as columnDraggingClass, l as columnPinnedClass, m as columnResizerLineActiveClass, o as columnDropBeforeClass, p as columnResizerHoverClass, r as cellPaddings, s as columnHandleActiveClass, u as columnPinnedLeftEdgeClass, v as placeholderPaddings, w as spinnerSizes, x as selectCheckboxSizes, y as rowHeightEstimates } from "../../../chunks/config-DeyT9dJl.js";
+import { A as selectCheckboxSizes, C as expandIconClass, D as placeholderPaddings, E as headerTextSizes, M as sortIconSizes, N as spinnerSizes, O as rowHeightEstimates, P as summaryRowClass, S as expandColumnWidths, T as headerGaps, _ as detailContentClass, a as columnDropAfterClass, b as detailRowClass, c as columnHandleClass, d as columnPinnedRightEdgeClass, f as columnResizerClass, g as detailCellClass, h as columnResizerLineClass, i as columnDraggingClass, j as selectColumnWidths, k as rowSelectedClass, l as columnPinnedClass, m as columnResizerLineActiveClass, o as columnDropBeforeClass, p as columnResizerHoverClass, r as cellPaddings, s as columnHandleActiveClass, u as columnPinnedLeftEdgeClass, v as detailErrorClass, w as expandIconOpenClass, x as expandButtonClass, y as detailPaddings } from "../../../chunks/config-Bs1HwUcx.js";
 import { t as arrow_up_default } from "../../../chunks/arrow-up-C_G4jg8M.js";
 import { t as grip_vertical_default } from "../../../chunks/grip-vertical-lRha2S7q.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, watch, watchEffect, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, watch, watchEffect, withCtx, withModifiers } from "vue";
 //#region src/components/GrDataTable/composables/useDataTableRowKeys.ts
 function useDataTableRowKeys(options) {
 	const syntheticKeys = /* @__PURE__ */ new WeakMap();
@@ -536,6 +539,128 @@ function useDataTableLayout(options) {
 	};
 }
 //#endregion
+//#region src/components/GrDataTable/composables/useDataTableExpansion.ts
+function useDataTableExpansion(options) {
+	const internalExpanded = ref([]);
+	const isExpandedControlled = computed(() => options.expandedKeys() !== void 0);
+	const expandedKeys = computed(() => new Set(options.expandedKeys() ?? internalExpanded.value));
+	const states = ref(/* @__PURE__ */ new Map());
+	const data = ref(/* @__PURE__ */ new Map());
+	/**
+	* Летящие запросы по ключу. Счётчик поколений отдельно от контроллера: ответ,
+	* стартовавший раньше и пришедший позже, обязан проиграть последнему, а
+	* `abort()` сам по себе этого не гарантирует — промис уже мог разрешиться.
+	*/
+	const inflight = /* @__PURE__ */ new Map();
+	const generation = /* @__PURE__ */ new Map();
+	function setState(key, state) {
+		const next = new Map(states.value);
+		next.set(key, state);
+		states.value = next;
+	}
+	function cancel(key) {
+		inflight.get(key)?.abort();
+		inflight.delete(key);
+		generation.set(key, (generation.get(key) ?? 0) + 1);
+	}
+	function isRowExpandable(row) {
+		const predicate = options.expandableRow();
+		return predicate ? predicate(row) : true;
+	}
+	function isRowExpanded(row) {
+		return expandedKeys.value.has(options.rowKeyValue(row));
+	}
+	function detailStateOf(row) {
+		return states.value.get(options.rowKeyValue(row)) ?? "idle";
+	}
+	function detailDataOf(row) {
+		return data.value.get(options.rowKeyValue(row));
+	}
+	async function load(row, key) {
+		const loadDetail = options.loadDetail();
+		if (!loadDetail) return;
+		cancel(key);
+		const controller = new AbortController();
+		inflight.set(key, controller);
+		const seq = generation.get(key) ?? 0;
+		setState(key, "loading");
+		try {
+			const result = await loadDetail(row, controller.signal);
+			if (seq !== generation.get(key)) return;
+			const next = new Map(data.value);
+			next.set(key, result);
+			data.value = next;
+			setState(key, "ready");
+		} catch (error) {
+			if (seq !== generation.get(key) || controller.signal.aborted) return;
+			setState(key, "error");
+			options.onDetailLoadError(row, key, error);
+		} finally {
+			if (inflight.get(key) === controller) inflight.delete(key);
+		}
+	}
+	function commit(keys) {
+		if (!isExpandedControlled.value) internalExpanded.value = keys;
+		options.onExpandedChange(keys);
+	}
+	function toggleRow(row) {
+		if (!isRowExpandable(row)) return;
+		const key = options.rowKeyValue(row);
+		if (expandedKeys.value.has(key)) {
+			cancel(key);
+			if (states.value.get(key) === "loading") setState(key, "idle");
+			commit([...expandedKeys.value].filter((item) => item !== key));
+			options.onCollapse(row, key);
+			return;
+		}
+		commit(options.accordion() ? [key] : [...expandedKeys.value, key]);
+		options.onExpand(row, key);
+		if (options.loadDetail() && states.value.get(key) !== "ready") load(row, key);
+	}
+	function collapseAll() {
+		for (const key of expandedKeys.value) cancel(key);
+		commit([]);
+	}
+	function retryDetail(row) {
+		load(row, options.rowKeyValue(row));
+	}
+	function invalidateDetail(key) {
+		if (key === void 0) {
+			for (const item of inflight.keys()) cancel(item);
+			states.value = /* @__PURE__ */ new Map();
+			data.value = /* @__PURE__ */ new Map();
+			return;
+		}
+		cancel(key);
+		const nextStates = new Map(states.value);
+		nextStates.delete(key);
+		states.value = nextStates;
+		const nextData = new Map(data.value);
+		nextData.delete(key);
+		data.value = nextData;
+	}
+	/**
+	* Смена идентичности набора сбрасывает загруженное — то же правило, что у
+	* виртуализатора: мутация массива на месте сохраняет, замена сбрасывает.
+	* Иначе строка показывала бы подробности прошлого набора данных.
+	*/
+	watch(() => options.rows(), () => invalidateDetail());
+	onBeforeUnmount(() => {
+		for (const key of inflight.keys()) cancel(key);
+	});
+	return {
+		expandedKeys,
+		isRowExpandable,
+		isRowExpanded,
+		toggleRow,
+		collapseAll,
+		detailStateOf,
+		detailDataOf,
+		retryDetail,
+		invalidateDetail
+	};
+}
+//#endregion
 //#region ~icons/lucide/arrow-down
 var _hoisted_1$1 = {
 	viewBox: "0 0 24 24",
@@ -603,6 +728,7 @@ var _hoisted_15 = {
 	key: 0,
 	"aria-hidden": "true",
 	"data-gr-datatable-spacer": "before",
+	"data-gr-table-off-grid": "",
 	style: { pointerEvents: "none" }
 };
 var _hoisted_16 = ["colspan"];
@@ -612,15 +738,28 @@ var _hoisted_17 = [
 	"aria-rowindex",
 	"onClick"
 ];
-var _hoisted_18 = {
+var _hoisted_18 = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-label",
+	"onClick"
+];
+var _hoisted_19 = ["id"];
+var _hoisted_20 = ["colspan"];
+var _hoisted_21 = {
+	key: 0,
+	"data-gr-datatable-detail-loading": ""
+};
+var _hoisted_22 = {
 	key: 1,
 	"aria-hidden": "true",
 	"data-gr-datatable-spacer": "after",
+	"data-gr-table-off-grid": "",
 	style: { pointerEvents: "none" }
 };
-var _hoisted_19 = ["colspan"];
-var _hoisted_20 = ["aria-rowindex"];
-var _hoisted_21 = ["data-column-key"];
+var _hoisted_23 = ["colspan"];
+var _hoisted_24 = ["aria-rowindex"];
+var _hoisted_25 = ["data-column-key"];
 //#endregion
 //#region src/components/GrDataTable/GrDataTable.vue
 var GrDataTable_default = /* @__PURE__ */ defineComponent({
@@ -688,7 +827,28 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		columnWidths: { default: void 0 }
+		columnWidths: { default: void 0 },
+		expandable: {
+			type: Boolean,
+			default: false
+		},
+		expandedKeys: { default: void 0 },
+		expandableRow: {
+			type: Function,
+			default: void 0
+		},
+		loadDetail: {
+			type: Function,
+			default: void 0
+		},
+		accordion: {
+			type: Boolean,
+			default: false
+		},
+		expandColumn: {
+			type: Boolean,
+			default: true
+		}
 	},
 	emits: [
 		"update:sortKey",
@@ -699,7 +859,11 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 		"update:columnOrder",
 		"columnReorder",
 		"update:columnWidths",
-		"columnResize"
+		"columnResize",
+		"update:expandedKeys",
+		"expand",
+		"collapse",
+		"detailLoadError"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
@@ -785,7 +949,14 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 		function summaryValue(key) {
 			return props.summaryRow?.[key];
 		}
-		const totalColumns = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+		/**
+		* Раскрытие выключено при виртуализации целиком — см. предупреждение ниже.
+		* Объявлено здесь, а не рядом с ним: от него зависит `colspan` служебных строк.
+		*/
+		const expandEnabled = computed(() => props.expandable && !props.virtual);
+		/** Своя колонка с кнопкой: её может не быть, если кнопку ставит потребитель. */
+		const expandColumnVisible = computed(() => expandEnabled.value && props.expandColumn);
+		const totalColumns = computed(() => props.columns.length + (props.selectable ? 1 : 0) + (expandColumnVisible.value ? 1 : 0));
 		/**
 		* Карты живут в компоненте, а не в модуле: наполняет их шаблон, а читают все
 		* три колоночных модуля — порядок тянет за ячейку, ширина её замеряет,
@@ -901,6 +1072,48 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			rowKeyValue,
 			onSelectedChange: (keys) => emit("update:selected", keys)
 		});
+		const expandDetailId = useId();
+		const { isRowExpandable, isRowExpanded, toggleRow: toggleRowExpanded, detailStateOf, detailDataOf, retryDetail, invalidateDetail } = useDataTableExpansion({
+			expandedKeys: () => props.expandedKeys,
+			rows: () => props.rows,
+			expandableRow: () => props.expandableRow,
+			loadDetail: () => props.loadDetail,
+			accordion: () => props.accordion,
+			rowKeyValue,
+			onExpandedChange: (keys) => emit("update:expandedKeys", keys),
+			onExpand: (row, key) => {
+				emit("expand", {
+					row,
+					key
+				});
+				announce(t("gr.dataTable.detailExpanded", "Row details shown"));
+			},
+			onCollapse: (row, key) => {
+				emit("collapse", {
+					row,
+					key
+				});
+				announce(t("gr.dataTable.detailCollapsed", "Row details hidden"));
+			},
+			onDetailLoadError: (row, key, error) => emit("detailLoadError", {
+				row,
+				key,
+				error
+			})
+		});
+		/** Id строки подробностей: адресат `aria-controls` у кнопки. */
+		function detailRowId(row) {
+			return `${expandDetailId}-${rowKeyValue(row)}`;
+		}
+		/**
+		* Раскрытие и виртуализация вместе пока не работают: замер виртуализатора висит
+		* на самой строке, и высота второго яруса в него не попадает — распорка
+		* разъедется молча. Запрет снимется, когда пара строк переедет в свою группу
+		* `<tbody>`; до тех пор лучше предупредить, чем показать прыгающую таблицу.
+		*/
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			if (props.expandable && props.virtual) console.warn("[granularity] GrDataTable: `expandable` вместе с `virtual` пока не поддержан — раскрытие выключено. Замер виртуализатора висит на строке и не видит высоту подробностей, поэтому распорки разъезжаются.");
+		});
 		const tableRef = ref(null);
 		const rootId = useId();
 		function rootEl() {
@@ -981,7 +1194,13 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			/** Снять сортировку (эквивалент третьего состояния). */
 			clearSort,
 			/** Отметить/снять все выбираемые строки. */
-			toggleAll
+			toggleAll,
+			/**
+			* Сбросить загруженные подробности: у одной строки либо у всех.
+			* Нужен, когда запись изменилась на сервере, — само по себе раскрытие
+			* держит загруженное, пока строка жива.
+			*/
+			invalidateDetail
 		});
 		/**
 		* Три семейства слотов по ключу колонки — `#cell-<key>` (`{ row, index }`),
@@ -1008,115 +1227,124 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 				header: withCtx(() => [createElementVNode("tr", {
 					"data-gr-datatable-header": "",
 					"aria-rowindex": __props.virtual ? 1 : void 0
-				}, [__props.selectable ? (openBlock(), createElementBlock("th", {
-					key: 0,
-					ref: (el) => registerEl(unref(headerCellEls), unref(SELECT_COLUMN_KEY), el),
-					class: normalizeClass(["text-left", [
-						selectColumnClass.value,
-						cellClass.value,
-						unref(hasPinnedLeft) ? unref(columnPinnedClass) : ""
-					]]),
-					style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0),
-					scope: "col"
-				}, [createVNode(GrCheckbox_default, {
-					"data-gr-datatable-select-all": "",
-					"model-value": unref(allSelected),
-					indeterminate: unref(someSelected),
-					size: checkboxSize.value,
-					disabled: __props.loading || unref(selectableRows).length === 0,
-					"aria-label": unref(t)("gr.dataTable.selectAll", "Select all rows"),
-					"onUpdate:modelValue": unref(toggleAll)
-				}, null, 8, [
-					"model-value",
-					"indeterminate",
-					"size",
-					"disabled",
-					"aria-label",
-					"onUpdate:modelValue"
-				])], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(orderedColumns), (col, colIndex) => {
-					return openBlock(), createElementBlock("th", {
-						key: col.key,
-						ref_for: true,
-						ref: (el) => registerEl(unref(headerCellEls), String(col.key), el),
-						class: normalizeClass(["font-700", [
-							headerTextClass.value,
+				}, [
+					expandColumnVisible.value ? (openBlock(), createElementBlock("th", {
+						key: 0,
+						"data-gr-datatable-expand-head": "",
+						scope: "col",
+						class: normalizeClass([unref(expandColumnWidths)[unref(resolvedSize)], cellClass.value])
+					}, null, 2)) : createCommentVNode("", true),
+					__props.selectable ? (openBlock(), createElementBlock("th", {
+						key: 1,
+						ref: (el) => registerEl(unref(headerCellEls), unref(SELECT_COLUMN_KEY), el),
+						class: normalizeClass(["text-left", [
+							selectColumnClass.value,
 							cellClass.value,
-							cellAlign(col),
-							__props.reorderableColumns || __props.resizableColumns ? "group relative" : "",
-							unref(draggingColumnKey) === String(col.key) ? unref(columnDraggingClass) : "",
-							unref(columnDropClass)(colIndex),
-							...unref(pinnedCellClass)(col, colIndex)
+							unref(hasPinnedLeft) ? unref(columnPinnedClass) : ""
 						]]),
-						"data-column-key": col.key,
-						style: normalizeStyle({
-							...columnWidthStyle(unref(widthOf)(col)),
-							...unref(pinnedStyleOf)(col)
-						}),
-						"aria-sort": unref(ariaSortFor)(col),
+						style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0),
 						scope: "col"
-					}, [createElementVNode("div", { class: normalizeClass(["inline-flex items-center", headerGapClass.value]) }, [__props.reorderableColumns ? (openBlock(), createElementBlock("button", {
-						key: 0,
-						ref_for: true,
-						ref: (el) => registerEl(unref(columnHandleEls), String(col.key), el),
-						type: "button",
-						"data-gr-datatable-column-handle": "",
-						class: normalizeClass([unref(columnHandleClass), unref(columnSort).isActive.value ? unref(columnHandleActiveClass) : ""]),
-						tabindex: unref(columnRoving).tabindexFor(String(col.key)),
-						"aria-label": columnHandleLabel(col),
-						disabled: __props.loading,
-						onPointerdown: ($event) => unref(columnSort).startFrom(String(col.key))($event),
-						onKeydown: ($event) => unref(onColumnHandleKeydown)($event, String(col.key)),
-						onFocus: ($event) => unref(columnRoving).setActive(String(col.key)),
-						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-					}, [createVNode(unref(grip_vertical_default), {
-						class: "block",
-						"aria-hidden": "true"
-					})], 42, _hoisted_4)) : createCommentVNode("", true), col.sortable ? (openBlock(), createElementBlock("button", {
-						key: 1,
-						type: "button",
-						"data-gr-datatable-sort": "",
-						class: normalizeClass(["inline-flex items-center text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] rounded-[var(--gr-radius-sm)]", headerGapClass.value]),
-						onClick: ($event) => unref(toggleSort)(col)
-					}, [
-						createElementVNode("span", null, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]),
-						createElementVNode("span", _hoisted_6, toDisplayString(sortHint(col)), 1),
-						createElementVNode("span", _hoisted_7, [unref(currentSortKey) === col.key && unref(currentSortDir) === "asc" ? (openBlock(), createBlock(GrIcon_default, {
+					}, [createVNode(GrCheckbox_default, {
+						"data-gr-datatable-select-all": "",
+						"model-value": unref(allSelected),
+						indeterminate: unref(someSelected),
+						size: checkboxSize.value,
+						disabled: __props.loading || unref(selectableRows).length === 0,
+						"aria-label": unref(t)("gr.dataTable.selectAll", "Select all rows"),
+						"onUpdate:modelValue": unref(toggleAll)
+					}, null, 8, [
+						"model-value",
+						"indeterminate",
+						"size",
+						"disabled",
+						"aria-label",
+						"onUpdate:modelValue"
+					])], 6)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(orderedColumns), (col, colIndex) => {
+						return openBlock(), createElementBlock("th", {
+							key: col.key,
+							ref_for: true,
+							ref: (el) => registerEl(unref(headerCellEls), String(col.key), el),
+							class: normalizeClass(["font-700", [
+								headerTextClass.value,
+								cellClass.value,
+								cellAlign(col),
+								__props.reorderableColumns || __props.resizableColumns ? "group relative" : "",
+								unref(draggingColumnKey) === String(col.key) ? unref(columnDraggingClass) : "",
+								unref(columnDropClass)(colIndex),
+								...unref(pinnedCellClass)(col, colIndex)
+							]]),
+							"data-column-key": col.key,
+							style: normalizeStyle({
+								...columnWidthStyle(unref(widthOf)(col)),
+								...unref(pinnedStyleOf)(col)
+							}),
+							"aria-sort": unref(ariaSortFor)(col),
+							scope: "col"
+						}, [createElementVNode("div", { class: normalizeClass(["inline-flex items-center", headerGapClass.value]) }, [__props.reorderableColumns ? (openBlock(), createElementBlock("button", {
 							key: 0,
-							size: sortIconSize.value
-						}, {
-							default: withCtx(() => [createVNode(unref(arrow_up_default))]),
-							_: 1
-						}, 8, ["size"])) : unref(currentSortKey) === col.key && unref(currentSortDir) === "desc" ? (openBlock(), createBlock(GrIcon_default, {
+							ref_for: true,
+							ref: (el) => registerEl(unref(columnHandleEls), String(col.key), el),
+							type: "button",
+							"data-gr-datatable-column-handle": "",
+							class: normalizeClass([unref(columnHandleClass), unref(columnSort).isActive.value ? unref(columnHandleActiveClass) : ""]),
+							tabindex: unref(columnRoving).tabindexFor(String(col.key)),
+							"aria-label": columnHandleLabel(col),
+							disabled: __props.loading,
+							onPointerdown: ($event) => unref(columnSort).startFrom(String(col.key))($event),
+							onKeydown: ($event) => unref(onColumnHandleKeydown)($event, String(col.key)),
+							onFocus: ($event) => unref(columnRoving).setActive(String(col.key)),
+							onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+						}, [createVNode(unref(grip_vertical_default), {
+							class: "block",
+							"aria-hidden": "true"
+						})], 42, _hoisted_4)) : createCommentVNode("", true), col.sortable ? (openBlock(), createElementBlock("button", {
 							key: 1,
-							size: sortIconSize.value
-						}, {
-							default: withCtx(() => [createVNode(unref(arrow_down_default))]),
-							_: 1
-						}, 8, ["size"])) : createCommentVNode("", true)])
-					], 10, _hoisted_5)) : (openBlock(), createElementBlock("span", _hoisted_8, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]))], 2), __props.resizableColumns ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						"data-gr-datatable-column-resizer": "",
-						role: "separator",
-						tabindex: "0",
-						"aria-orientation": "vertical",
-						class: normalizeClass(unref(columnResizerClass)),
-						"aria-label": resizerLabel(col),
-						"aria-valuenow": unref(resizerValue)(col),
-						"aria-valuemin": unref(48),
-						"aria-valuetext": `${unref(resizerValue)(col)}px`,
-						onPointerdown: ($event) => unref(onResizerPointerDown)($event, String(col.key)),
-						onKeydown: ($event) => unref(onResizerKeydown)($event, String(col.key)),
-						onDblclick: ($event) => unref(resetColumnWidth)(String(col.key)),
-						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
-					}, [createElementVNode("span", {
-						class: normalizeClass([
-							unref(columnResizerLineClass),
-							unref(columnResizerHoverClass),
-							unref(resizingKey) === String(col.key) ? unref(columnResizerLineActiveClass) : ""
-						]),
-						"aria-hidden": "true"
-					}, null, 2)], 42, _hoisted_9)) : createCommentVNode("", true)], 14, _hoisted_3);
-				}), 128))], 8, _hoisted_2)]),
+							type: "button",
+							"data-gr-datatable-sort": "",
+							class: normalizeClass(["inline-flex items-center text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] rounded-[var(--gr-radius-sm)]", headerGapClass.value]),
+							onClick: ($event) => unref(toggleSort)(col)
+						}, [
+							createElementVNode("span", null, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]),
+							createElementVNode("span", _hoisted_6, toDisplayString(sortHint(col)), 1),
+							createElementVNode("span", _hoisted_7, [unref(currentSortKey) === col.key && unref(currentSortDir) === "asc" ? (openBlock(), createBlock(GrIcon_default, {
+								key: 0,
+								size: sortIconSize.value
+							}, {
+								default: withCtx(() => [createVNode(unref(arrow_up_default))]),
+								_: 1
+							}, 8, ["size"])) : unref(currentSortKey) === col.key && unref(currentSortDir) === "desc" ? (openBlock(), createBlock(GrIcon_default, {
+								key: 1,
+								size: sortIconSize.value
+							}, {
+								default: withCtx(() => [createVNode(unref(arrow_down_default))]),
+								_: 1
+							}, 8, ["size"])) : createCommentVNode("", true)])
+						], 10, _hoisted_5)) : (openBlock(), createElementBlock("span", _hoisted_8, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]))], 2), __props.resizableColumns ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							"data-gr-datatable-column-resizer": "",
+							role: "separator",
+							tabindex: "0",
+							"aria-orientation": "vertical",
+							class: normalizeClass(unref(columnResizerClass)),
+							"aria-label": resizerLabel(col),
+							"aria-valuenow": unref(resizerValue)(col),
+							"aria-valuemin": unref(48),
+							"aria-valuetext": `${unref(resizerValue)(col)}px`,
+							onPointerdown: ($event) => unref(onResizerPointerDown)($event, String(col.key)),
+							onKeydown: ($event) => unref(onResizerKeydown)($event, String(col.key)),
+							onDblclick: ($event) => unref(resetColumnWidth)(String(col.key)),
+							onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+						}, [createElementVNode("span", {
+							class: normalizeClass([
+								unref(columnResizerLineClass),
+								unref(columnResizerHoverClass),
+								unref(resizingKey) === String(col.key) ? unref(columnResizerLineActiveClass) : ""
+							]),
+							"aria-hidden": "true"
+						}, null, 2)], 42, _hoisted_9)) : createCommentVNode("", true)], 14, _hoisted_3);
+					}), 128))
+				], 8, _hoisted_2)]),
 				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("tr", _hoisted_10, [createElementVNode("td", {
 					colspan: totalColumns.value,
 					class: normalizeClass(["text-center text-[var(--gr-muted-fg)]", placeholderClass.value])
@@ -1136,8 +1364,7 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 						})
 					}, null, 12, _hoisted_16)])) : createCommentVNode("", true),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(renderedRows.value, ({ row, index }) => {
-						return openBlock(), createElementBlock("tr", mergeProps({
-							key: unref(rowKeyValue)(row),
+						return openBlock(), createElementBlock(Fragment, { key: unref(rowKeyValue)(row) }, [createElementVNode("tr", mergeProps({
 							ref_for: true,
 							ref: (el) => __props.virtual && unref(virtualizer).measure(index, el),
 							class: ["border-t border-[var(--gr-brd)]", [unref(isRowSelected)(row) ? unref(rowSelectedClass) : "", rowClassName(row, index)]],
@@ -1145,55 +1372,106 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 							"data-row-key": unref(rowKeyValue)(row),
 							"data-selected": __props.selectable && unref(isRowSelected)(row) ? "true" : void 0,
 							"aria-rowindex": ariaRowIndex(index)
-						}, { ref_for: true }, __props.rowProps?.(row, index), { onClick: ($event) => onRowClick(row, index, $event) }), [__props.selectable ? (openBlock(), createElementBlock("td", {
-							key: 0,
-							class: normalizeClass(["text-left", [
-								selectColumnClass.value,
-								cellClass.value,
-								unref(hasPinnedLeft) ? unref(columnPinnedClass) : "",
-								unref(hasPinnedLeft) && unref(isRowSelected)(row) ? unref(rowSelectedClass) : ""
-							]]),
-							style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0)
-						}, [unref(isRowSelectable)(row) ? (openBlock(), createBlock(GrCheckbox_default, {
-							key: 0,
-							"data-gr-datatable-select-row": "",
-							"model-value": unref(isRowSelected)(row),
-							size: checkboxSize.value,
-							"aria-label": unref(t)("gr.dataTable.selectRow", "Select row"),
-							onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
-							"onUpdate:modelValue": ($event) => unref(toggleRow)(row)
-						}, null, 8, [
-							"model-value",
-							"size",
-							"aria-label",
-							"onUpdate:modelValue"
-						])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(orderedColumns), (col, colIndex) => {
-							return openBlock(), createElementBlock("td", {
-								key: col.key,
-								class: normalizeClass([
+						}, { ref_for: true }, __props.rowProps?.(row, index), { onClick: ($event) => onRowClick(row, index, $event) }), [
+							expandColumnVisible.value ? (openBlock(), createElementBlock("td", {
+								key: 0,
+								"data-gr-datatable-expand-cell": "",
+								class: normalizeClass(["text-left", [unref(expandColumnWidths)[unref(resolvedSize)], cellClass.value]])
+							}, [unref(isRowExpandable)(row) ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								type: "button",
+								"data-gr-datatable-expand": "",
+								class: normalizeClass([unref(expandButtonClass), checkboxSize.value === "xs" ? "h-5 w-5" : "h-6 w-6"]),
+								"aria-expanded": unref(isRowExpanded)(row),
+								"aria-controls": detailRowId(row),
+								"aria-label": unref(isRowExpanded)(row) ? unref(t)("gr.dataTable.collapseRow", "Hide details") : unref(t)("gr.dataTable.expandRow", "Show details"),
+								onClick: withModifiers(($event) => unref(toggleRowExpanded)(row), ["stop"])
+							}, [renderSlot(_ctx.$slots, "expand-icon", {
+								expanded: unref(isRowExpanded)(row),
+								row
+							}, () => [createVNode(unref(chevron_right_default), { class: normalizeClass([unref(expandIconClass), unref(isRowExpanded)(row) ? unref(expandIconOpenClass) : ""]) }, null, 8, ["class"])])], 10, _hoisted_18)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+							__props.selectable ? (openBlock(), createElementBlock("td", {
+								key: 1,
+								class: normalizeClass(["text-left", [
+									selectColumnClass.value,
 									cellClass.value,
-									cellAlign(col),
-									...unref(pinnedCellClass)(col, colIndex),
-									col.pinned && unref(isRowSelected)(row) ? unref(rowSelectedClass) : ""
-								]),
-								style: normalizeStyle({
-									...columnWidthStyle(unref(widthOf)(col)),
-									...unref(pinnedStyleOf)(col)
-								})
-							}, [renderSlot(_ctx.$slots, `cell-${col.key}`, {
-								row,
-								index
-							}, () => [createElementVNode("span", null, toDisplayString(cellValue(row, col.key)), 1)])], 6);
-						}), 128))], 16, _hoisted_17);
+									unref(hasPinnedLeft) ? unref(columnPinnedClass) : "",
+									unref(hasPinnedLeft) && unref(isRowSelected)(row) ? unref(rowSelectedClass) : ""
+								]]),
+								style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0)
+							}, [unref(isRowSelectable)(row) ? (openBlock(), createBlock(GrCheckbox_default, {
+								key: 0,
+								"data-gr-datatable-select-row": "",
+								"model-value": unref(isRowSelected)(row),
+								size: checkboxSize.value,
+								"aria-label": unref(t)("gr.dataTable.selectRow", "Select row"),
+								onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+								"onUpdate:modelValue": ($event) => unref(toggleRow)(row)
+							}, null, 8, [
+								"model-value",
+								"size",
+								"aria-label",
+								"onUpdate:modelValue"
+							])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true),
+							(openBlock(true), createElementBlock(Fragment, null, renderList(unref(orderedColumns), (col, colIndex) => {
+								return openBlock(), createElementBlock("td", {
+									key: col.key,
+									class: normalizeClass([
+										cellClass.value,
+										cellAlign(col),
+										...unref(pinnedCellClass)(col, colIndex),
+										col.pinned && unref(isRowSelected)(row) ? unref(rowSelectedClass) : ""
+									]),
+									style: normalizeStyle({
+										...columnWidthStyle(unref(widthOf)(col)),
+										...unref(pinnedStyleOf)(col)
+									})
+								}, [renderSlot(_ctx.$slots, `cell-${col.key}`, {
+									row,
+									index,
+									expanded: unref(isRowExpanded)(row),
+									toggleExpand: () => unref(toggleRowExpanded)(row)
+								}, () => [createElementVNode("span", null, toDisplayString(cellValue(row, col.key)), 1)])], 6);
+							}), 128))
+						], 16, _hoisted_17), unref(isRowExpanded)(row) ? (openBlock(), createElementBlock("tr", {
+							key: 0,
+							id: detailRowId(row),
+							"data-gr-datatable-detail": "",
+							"data-gr-table-off-grid": "",
+							class: normalizeClass(unref(detailRowClass))
+						}, [createElementVNode("td", {
+							colspan: totalColumns.value,
+							class: normalizeClass([unref(detailCellClass), unref(detailPaddings)[unref(resolvedSize)]])
+						}, [createElementVNode("div", { class: normalizeClass(unref(detailContentClass)) }, [unref(detailStateOf)(row) === "loading" ? (openBlock(), createElementBlock("div", _hoisted_21, [renderSlot(_ctx.$slots, "detail-loading", { row }, () => [createVNode(GrSkeleton_default, { count: 2 })])])) : unref(detailStateOf)(row) === "error" ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass(unref(detailErrorClass)),
+							"data-gr-datatable-detail-error": ""
+						}, [renderSlot(_ctx.$slots, "detail-error", {
+							row,
+							retry: () => unref(retryDetail)(row)
+						}, () => [createElementVNode("span", null, toDisplayString(unref(t)("gr.dataTable.detailError", "Could not load details")), 1), createVNode(GrButton_default, {
+							size: "xs",
+							tone: "danger",
+							variant: "outline",
+							onClick: ($event) => unref(retryDetail)(row)
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(t)("gr.dataTable.detailRetry", "Retry")), 1)]),
+							_: 1
+						}, 8, ["onClick"])])], 2)) : renderSlot(_ctx.$slots, "detail", {
+							row,
+							index,
+							data: unref(detailDataOf)(row),
+							state: unref(detailStateOf)(row)
+						}, void 0, void 0, 2)], 2)], 10, _hoisted_20)], 10, _hoisted_19)) : createCommentVNode("", true)], 64);
 					}), 128)),
-					__props.virtual && spacerAfter.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_18, [createElementVNode("td", {
+					__props.virtual && spacerAfter.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_22, [createElementVNode("td", {
 						colspan: totalColumns.value,
 						style: normalizeStyle({
 							height: `${spacerAfter.value}px`,
 							padding: "0",
 							border: "0"
 						})
-					}, null, 12, _hoisted_19)])) : createCommentVNode("", true)
+					}, null, 12, _hoisted_23)])) : createCommentVNode("", true)
 				], 64))]),
 				_: 2
 			}, [_ctx.$slots.footer || hasSummary.value ? {
@@ -1227,8 +1505,8 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 					}, [renderSlot(_ctx.$slots, `summary-${col.key}`, {
 						value: summaryValue(col.key),
 						column: col
-					}, () => [createElementVNode("span", null, toDisplayString(summaryValue(col.key)), 1)])], 14, _hoisted_21);
-				}), 128))], 10, _hoisted_20)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", {
+					}, () => [createElementVNode("span", null, toDisplayString(summaryValue(col.key)), 1)])], 14, _hoisted_25);
+				}), 128))], 10, _hoisted_24)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", {
 					columns: unref(orderedColumns),
 					totalColumns: totalColumns.value
 				})]),