@feugene/granularity 0.49.0 → 0.50.0

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

@@ -9,11 +9,12 @@ import { t as GrButton_default } from "../../GrButton/chunks/GrButton-CS4TqMtG.j
 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-CKJ-HrsN.js";
+import { t as GrCheckbox_default } from "../../GrCheckbox/chunks/GrCheckbox-B4NJc7Ur.js";
+import { t as GrTable_default } from "../../GrTable/chunks/GrTable-BQitSDep.js";
+import { t as GrDropdownMenu_default } from "../../GrDropdownMenu/chunks/GrDropdownMenu--VoK3VY0.js";
 import { i as moveItem, r as insertionIndex } from "../../../chunks/dragSortGeometry-CY-llfrQ.js";
 import { useDragSort } from "../../../composables/useDragSort.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 { A as rowSelectedClass, C as expandColumnWidths, D as headerTextSizes, E as headerGaps, F as summaryRowClass, M as selectColumnWidths, N as sortIconSizes, O as placeholderPaddings, P as spinnerSizes, S as expandButtonClass, T as expandIconOpenClass, _ as detailCellClass, a as columnDropAfterClass, b as detailPaddings, c as columnHandleClass, d as columnPinnedLeftEdgeClass, f as columnPinnedRightEdgeClass, g as columnResizerLineClass, h as columnResizerLineActiveClass, i as columnDraggingClass, j as selectCheckboxSizes, k as rowHeightEstimates, l as columnMenuTriggerClass, m as columnResizerHoverClass, o as columnDropBeforeClass, p as columnResizerClass, r as cellPaddings, s as columnHandleActiveClass, u as columnPinnedClass, v as detailContentClass, w as expandIconClass, x as detailRowClass, y as detailErrorClass } from "../../../chunks/config-DPJ3jtiB.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, onBeforeUnmount, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, watch, watchEffect, withCtx, withModifiers } from "vue";
@@ -660,15 +661,130 @@ function useDataTableExpansion(options) {
 		invalidateDetail
 	};
 }
+function gridCellKey(row, column) {
+	return `${row}:${column}`;
+}
+function parseGridCellKey(key) {
+	const [row, column] = key.split(":");
+	return {
+		row: Number(row),
+		column: Number(column)
+	};
+}
+/** Что внутри ячейки может принять фокус. Порядок обхода — документный. */
+var FOCUSABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+function useDataTableGridNavigation(options) {
+	/**
+	* Ячейки окна плюс шапка, по строкам. Порядок обязан совпадать с показом:
+	* примитив считает соседа сдвигом по этому массиву.
+	*/
+	const cellKeys = computed(() => {
+		if (!options.enabled()) return [];
+		const width = options.columns();
+		return [-1, ...options.renderedRows()].flatMap((row) => Array.from({ length: width }, (_, column) => gridCellKey(row, column)));
+	});
+	const roving = useRovingFocus({
+		items: () => cellKeys.value,
+		elementFor: (key) => options.cellEls.get(key),
+		orientation: () => "grid",
+		columns: () => options.columns(),
+		wrap: () => false,
+		beforeFocus: (key) => options.cellEls.has(key) ? void 0 : nextTick()
+	});
+	/**
+	* Шаг за край **окна** при виртуализации.
+	*
+	* Примитиву это доверить нельзя, и не из-за его устройства: шапка всегда
+	* стоит в наборе первой, поэтому стрелка вверх из первой отрисованной строки
+	* уходит в шапку — а должна уводить к строке выше окна. Край набора и край
+	* таблицы здесь разные вещи, и различить их может только тот, кто знает
+	* общее число строк.
+	*
+	* Возвращает строку, к которой надо прокрутить, или `null` — тогда клавишу
+	* разбирает примитив.
+	*/
+	function windowStep(event) {
+		if (!options.scrollToRow || event.key !== "ArrowDown" && event.key !== "ArrowUp") return null;
+		const active = roving.rovingKey.value;
+		if (!active) return null;
+		const { row } = parseGridCellKey(active);
+		const rendered = options.renderedRows();
+		if (rendered.length === 0) return null;
+		if (event.key === "ArrowDown") {
+			const last = rendered.at(-1);
+			if (row !== last) return null;
+			return last + 1 < options.totalRows() ? last + 1 : null;
+		}
+		const first = rendered[0];
+		if (row !== first) return null;
+		return first > 0 ? first - 1 : null;
+	}
+	/** Ячейка, в которой сейчас фокус (или которая его держит). */
+	function activeCell() {
+		const key = roving.rovingKey.value;
+		return key ? options.cellEls.get(key) : void 0;
+	}
+	/**
+	* Вход в ячейку: `Enter` или `F2` отдают фокус тому, что внутри.
+	*
+	* Без этого шага паттерн неполон, а не «упрощён»: сетка забирает `Tab` себе,
+	* и кнопка сортировки, чекбокс или ссылка в ячейке иначе становятся
+	* недостижимы с клавиатуры вовсе.
+	*/
+	function enterCell(event) {
+		if (event.key !== "Enter" && event.key !== "F2") return false;
+		const cell = activeCell();
+		if (!cell || document.activeElement && document.activeElement !== cell && cell.contains(document.activeElement)) return false;
+		const target = cell.querySelector(FOCUSABLE);
+		if (!target) return false;
+		event.preventDefault();
+		target.focus();
+		return true;
+	}
+	/** Выход из ячейки: `Escape` возвращает фокус самой ячейке. */
+	function leaveCell(event) {
+		if (event.key !== "Escape") return false;
+		const cell = activeCell();
+		if (!cell || !document.activeElement || document.activeElement === cell || !cell.contains(document.activeElement)) return false;
+		event.preventDefault();
+		cell.focus();
+		return true;
+	}
+	return {
+		rovingKey: roving.rovingKey,
+		tabindexFor: (row, column) => options.enabled() ? roving.tabindexFor(gridCellKey(row, column)) : -1,
+		setActive: (row, column) => roving.setActive(gridCellKey(row, column)),
+		onKeydown: (event) => {
+			if (!options.enabled()) return false;
+			if (enterCell(event) || leaveCell(event)) return true;
+			const row = windowStep(event);
+			if (row !== null) {
+				event.preventDefault();
+				options.scrollToRow?.(row);
+				const { column } = parseGridCellKey(roving.rovingKey.value);
+				nextTick(() => roving.focusKey(gridCellKey(row, column)));
+				return true;
+			}
+			return roving.handleNavigationKeys(event);
+		}
+	};
+}
 //#endregion
 //#region ~icons/lucide/arrow-down
-var _hoisted_1$1 = {
+var _hoisted_1$5 = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
-function render$1(_ctx, _cache) {
-	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+function render$5(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -679,14 +795,120 @@ function render$1(_ctx, _cache) {
 }
 var arrow_down_default = markRaw({
 	name: "lucide-arrow-down",
+	render: render$5
+});
+//#endregion
+//#region ~icons/lucide/ellipsis-vertical
+var _hoisted_1$4 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$4(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [
+		createElementVNode("circle", {
+			cx: "12",
+			cy: "12",
+			r: "1"
+		}),
+		createElementVNode("circle", {
+			cx: "12",
+			cy: "5",
+			r: "1"
+		}),
+		createElementVNode("circle", {
+			cx: "12",
+			cy: "19",
+			r: "1"
+		})
+	], -1)])]);
+}
+var ellipsis_vertical_default = markRaw({
+	name: "lucide-ellipsis-vertical",
+	render: render$4
+});
+//#endregion
+//#region ~icons/lucide/arrow-left-to-line
+var _hoisted_1$3 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$3(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M3 19V5m10 1l-6 6l6 6m-6-6h14"
+	}, null, -1)])]);
+}
+var arrow_left_to_line_default = markRaw({
+	name: "lucide-arrow-left-to-line",
+	render: render$3
+});
+//#endregion
+//#region ~icons/lucide/arrow-right-to-line
+var _hoisted_1$2 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$2(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M17 12H3m8 6l6-6l-6-6m10-1v14"
+	}, null, -1)])]);
+}
+var arrow_right_to_line_default = markRaw({
+	name: "lucide-arrow-right-to-line",
+	render: render$2
+});
+//#endregion
+//#region ~icons/lucide/pin-off
+var _hoisted_1$1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M12 17v5m3-12.66V7a1 1 0 0 1 1-1a2 2 0 0 0 0-4H7.89M2 2l20 20M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"
+	}, null, -1)])]);
+}
+var pin_off_default = markRaw({
+	name: "lucide-pin-off",
 	render: render$1
 });
 //#endregion
 //#region src/components/GrDataTable/GrDataTable.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["id"];
 var _hoisted_2 = ["aria-rowindex"];
-var _hoisted_3 = ["data-column-key", "aria-sort"];
-var _hoisted_4 = [
+var _hoisted_3 = ["tabindex"];
+var _hoisted_4 = ["tabindex"];
+var _hoisted_5 = [
+	"tabindex",
+	"data-column-key",
+	"aria-sort",
+	"onFocus"
+];
+var _hoisted_6 = [
 	"tabindex",
 	"aria-label",
 	"disabled",
@@ -694,17 +916,23 @@ var _hoisted_4 = [
 	"onKeydown",
 	"onFocus"
 ];
-var _hoisted_5 = ["onClick"];
-var _hoisted_6 = { class: "sr-only" };
-var _hoisted_7 = {
+var _hoisted_7 = ["tabindex", "onClick"];
+var _hoisted_8 = { class: "sr-only" };
+var _hoisted_9 = {
 	class: "inline-flex",
 	"aria-hidden": "true"
 };
-var _hoisted_8 = {
+var _hoisted_10 = {
 	key: 2,
 	class: "text-[var(--gr-muted-fg)]"
 };
-var _hoisted_9 = [
+var _hoisted_11 = [
+	"tabindex",
+	"aria-label",
+	"disabled"
+];
+var _hoisted_12 = [
+	"tabindex",
 	"aria-label",
 	"aria-valuenow",
 	"aria-valuemin",
@@ -713,53 +941,85 @@ var _hoisted_9 = [
 	"onKeydown",
 	"onDblclick"
 ];
-var _hoisted_10 = {
+var _hoisted_13 = { key: 0 };
+var _hoisted_14 = { "data-gr-datatable-loading": "" };
+var _hoisted_15 = ["colspan"];
+var _hoisted_16 = { class: "inline-flex items-center gap-2" };
+var _hoisted_17 = { key: 1 };
+var _hoisted_18 = { "data-gr-datatable-empty": "" };
+var _hoisted_19 = ["colspan"];
+var _hoisted_20 = {
 	key: 0,
-	"data-gr-datatable-loading": ""
-};
-var _hoisted_11 = ["colspan"];
-var _hoisted_12 = { class: "inline-flex items-center gap-2" };
-var _hoisted_13 = {
-	key: 1,
-	"data-gr-datatable-empty": ""
+	"data-gr-table-off-grid": ""
 };
-var _hoisted_14 = ["colspan"];
-var _hoisted_15 = {
-	key: 0,
+var _hoisted_21 = {
 	"aria-hidden": "true",
 	"data-gr-datatable-spacer": "before",
 	"data-gr-table-off-grid": "",
 	style: { pointerEvents: "none" }
 };
-var _hoisted_16 = ["colspan"];
-var _hoisted_17 = [
+var _hoisted_22 = ["colspan"];
+var _hoisted_23 = [
 	"data-row-key",
 	"data-selected",
 	"aria-rowindex",
 	"onClick"
 ];
-var _hoisted_18 = [
+var _hoisted_24 = ["tabindex", "onFocus"];
+var _hoisted_25 = [
+	"tabindex",
 	"aria-expanded",
 	"aria-controls",
 	"aria-label",
 	"onClick"
 ];
-var _hoisted_19 = ["id"];
-var _hoisted_20 = ["colspan"];
-var _hoisted_21 = {
+var _hoisted_26 = ["tabindex", "onFocus"];
+var _hoisted_27 = ["tabindex", "onFocus"];
+var _hoisted_28 = ["id"];
+var _hoisted_29 = ["colspan"];
+var _hoisted_30 = {
 	key: 0,
 	"data-gr-datatable-detail-loading": ""
 };
-var _hoisted_22 = {
+var _hoisted_31 = {
 	key: 1,
+	"data-gr-table-off-grid": ""
+};
+var _hoisted_32 = {
 	"aria-hidden": "true",
 	"data-gr-datatable-spacer": "after",
 	"data-gr-table-off-grid": "",
 	style: { pointerEvents: "none" }
 };
-var _hoisted_23 = ["colspan"];
-var _hoisted_24 = ["aria-rowindex"];
-var _hoisted_25 = ["data-column-key"];
+var _hoisted_33 = ["colspan"];
+var _hoisted_34 = ["aria-rowindex"];
+var _hoisted_35 = ["data-column-key"];
+/**
+* `GrDataTable` — data-таблица поверх `GrTable` с сортировкой по клику
+* на заголовок и scoped-слотами ячеек (`#cell-<key>`), `#header-<key>`,
+* `#caption`, `#footer`, `#empty`, `#loading`.
+*
+* Итоговая строка объявляется пропом `summaryRow` и оформляется слотами
+* `#summary-<key>`: она встаёт по той же колоночной сетке, что и тело.
+*
+* `#footer` — для свободной разметки под итогом: несколько строк, примечание,
+* `colspan`. Рендерится внутрь того же `<tfoot>`, то есть его содержимое тоже
+* строки таблицы (`<tr><td>`), а скоуп отдаёт `columns` (в текущем порядке) и
+* `totalColumns` (со служебными колонками выбора и раскрытия).
+*
+* Сортировка, включая крайние случаи с пустыми и смешанными значениями, живёт
+* в `grDataTableSort.ts` — см. `docs/components/GrDataTable.md`.
+*/
+var COLUMN_MENU_WIDTH = 240;
+/**
+* Пункты меню колонки.
+*
+* Три состояния закрепления — это выбор одного из трёх, поэтому пункты
+* `menuitemradio` с `checked`, а не три команды: так диктор называет текущее
+* положение сам, и «открепить» у незакреплённой колонки видно выключенным, а
+* не пропадает.
+*/
+var expandColumnIndex = 0;
 //#endregion
 //#region src/components/GrDataTable/GrDataTable.vue
 var GrDataTable_default = /* @__PURE__ */ defineComponent({
@@ -828,6 +1088,15 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		columnWidths: { default: void 0 },
+		pinnableColumns: {
+			type: Boolean,
+			default: false
+		},
+		pinnedColumns: { default: void 0 },
+		cellNavigation: {
+			type: Boolean,
+			default: false
+		},
 		expandable: {
 			type: Boolean,
 			default: false
@@ -860,6 +1129,8 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 		"columnReorder",
 		"update:columnWidths",
 		"columnResize",
+		"update:pinnedColumns",
+		"columnPin",
 		"update:expandedKeys",
 		"expand",
 		"collapse",
@@ -953,7 +1224,7 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 		* Раскрытие выключено при виртуализации целиком — см. предупреждение ниже.
 		* Объявлено здесь, а не рядом с ним: от него зависит `colspan` служебных строк.
 		*/
-		const expandEnabled = computed(() => props.expandable && !props.virtual);
+		const expandEnabled = computed(() => props.expandable);
 		/** Своя колонка с кнопкой: её может не быть, если кнопку ставит потребитель. */
 		const expandColumnVisible = computed(() => expandEnabled.value && props.expandColumn);
 		const totalColumns = computed(() => props.columns.length + (props.selectable ? 1 : 0) + (expandColumnVisible.value ? 1 : 0));
@@ -972,8 +1243,32 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			const previous = store.get(key);
 			if (previous && !previous.isConnected) store.delete(key);
 		}
+		/**
+		* Закрепление, выбранное пользователем, поверх объявленного в конфиге колонки.
+		*
+		* Отсутствие ключа означает «решает конфиг», а `null` — «откреплена»: без
+		* различия снять закрепление, объявленное у колонки, было бы нечем.
+		*/
+		const pinnedState = ref({});
+		const pinnedOverrides = computed(() => props.pinnedColumns ?? pinnedState.value);
+		/**
+		* Колонки с уже разрешённым закреплением.
+		*
+		* Дальше по компоненту `col.pinned` читают порядок, раскладка и все три яруса
+		* ячеек. Разрешать выбор пользователя в каждом из этих мест значило бы завести
+		* четыре места, где он может разойтись, — поэтому он разрешается один раз
+		* здесь, а ниже по течению ничего не знает о том, откуда взялось значение.
+		*/
+		const resolvedColumns = computed(() => props.columns.map((col) => {
+			const key = String(col.key);
+			if (!(key in pinnedOverrides.value)) return col;
+			return {
+				...col,
+				pinned: pinnedOverrides.value[key] ?? void 0
+			};
+		}));
 		const { orderedColumns, columnKeys, draggingColumnKey, columnDropClass, onColumnHandleKeydown, columnSort, columnRoving } = useDataTableColumnOrder({
-			columns: () => props.columns,
+			columns: () => resolvedColumns.value,
 			columnOrder: () => props.columnOrder,
 			reorderableColumns: () => props.reorderableColumns,
 			loading: () => props.loading,
@@ -991,6 +1286,50 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 				}));
 			}
 		});
+		/**
+		* Ширина меню колонки.
+		*
+		* Панель ужимается по содержимому, и самой длинной подписи не хватало пяти
+		* пикселей: «Закрепить справа» переносилось на вторую строку. Ширина задана
+		* явно и с запасом — она обязана держать все три локали, а не ту, на которой
+		* её замерили.
+		*/
+		function columnMenuItems(col) {
+			const current = col.pinned ?? null;
+			const item = (pinned, label, icon) => ({
+				key: pinned ?? "none",
+				label,
+				icon,
+				role: "menuitemradio",
+				checked: current === pinned
+			});
+			return [
+				item("left", t("gr.dataTable.pinLeft", "Pin to the left"), arrow_left_to_line_default),
+				item("right", t("gr.dataTable.pinRight", "Pin to the right"), arrow_right_to_line_default),
+				item(null, t("gr.dataTable.unpin", "Unpin"), pin_off_default)
+			];
+		}
+		function columnMenuLabel(col) {
+			return t("gr.dataTable.columnMenu", "Options for column {label}", { label: col.label });
+		}
+		function onColumnMenuSelect(col, item) {
+			const pinned = item.key === "left" || item.key === "right" ? item.key : null;
+			if ((col.pinned ?? null) === pinned) return;
+			pinColumn(String(col.key), pinned);
+			announce(pinned === "left" ? t("gr.dataTable.columnPinnedLeft", "Column {label} pinned to the left", { label: col.label }) : pinned === "right" ? t("gr.dataTable.columnPinnedRight", "Column {label} pinned to the right", { label: col.label }) : t("gr.dataTable.columnUnpinned", "Column {label} unpinned", { label: col.label }));
+		}
+		function pinColumn(key, pinned) {
+			const next = {
+				...pinnedOverrides.value,
+				[key]: pinned
+			};
+			pinnedState.value = next;
+			emit("update:pinnedColumns", next);
+			emit("columnPin", {
+				key,
+				pinned
+			});
+		}
 		const { columnWidths, setMeasuredWidths, widthOf, tableMinWidth, resizingKey, onResizerPointerDown, onResizerKeydown, resetColumnWidth, resizerValue } = useDataTableColumnWidths({
 			orderedColumns: () => orderedColumns.value,
 			columnWidths: () => props.columnWidths,
@@ -1051,6 +1390,14 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			if (isEmpty.value) return resolvedEmptyText.value;
 			return "";
 		});
+		/**
+		* В режиме сетки регион таблицы не рендерится, и объявлять состояние некому —
+		* берёт на себя общий объявитель. Вне режима ничего не меняется: там регион на
+		* месте, и второе объявление было бы дублем.
+		*/
+		watch(liveMessage, (next) => {
+			if (props.cellNavigation && next) announce(next);
+		});
 		function cellValue(row, key) {
 			return row[key];
 		}
@@ -1105,15 +1452,6 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 		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() {
@@ -1156,6 +1494,40 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 				index: start + offset
 			}));
 		});
+		/**
+		* Порядок ячеек в строке: раскрытие, выбор, колонки. Шапка и тело рисуют его
+		* одинаково, поэтому индекс колонки в сетке считается один раз здесь.
+		*/
+		const serviceColumnCount = computed(() => (expandColumnVisible.value ? 1 : 0) + (props.selectable ? 1 : 0));
+		const selectColumnIndex = computed(() => expandColumnVisible.value ? 1 : 0);
+		const dataColumnIndex = (index) => serviceColumnCount.value + index;
+		/** Узлы ячеек по ключу сетки. Заполняется `:ref` в разметке. */
+		const cellEls = /* @__PURE__ */ new Map();
+		/**
+		* Индексы отрисованных строк. При виртуализации это окно, без неё — весь
+		* набор: сетке нужно то, что действительно есть в разметке.
+		*/
+		const renderedRowIndexes = computed(() => renderedRows.value.map((item) => item.index));
+		const grid = useDataTableGridNavigation({
+			enabled: () => props.cellNavigation,
+			columns: () => totalColumns.value,
+			renderedRows: () => renderedRowIndexes.value,
+			totalRows: () => sortedRows.value.length,
+			cellEls,
+			scrollToRow: props.virtual ? (index) => virtualizer.scrollToIndex(index) : void 0
+		});
+		function registerCell(row, column, el) {
+			registerEl(cellEls, gridCellKey(row, column), el);
+		}
+		/**
+		* Остановка `Tab` у контролов внутри ячеек.
+		*
+		* При навигации по ячейкам их в таб-порядке быть не должно: `Tab` принадлежит
+		* сетке целиком, а до кнопки добираются стрелкой до ячейки и `Enter`. Иначе
+		* остановок было бы столько же, сколько контролов, — то есть паттерн не
+		* выполнялся бы вовсе.
+		*/
+		const cellControlTabindex = computed(() => props.cellNavigation ? -1 : void 0);
 		const spacerBefore = computed(() => props.virtual ? virtualizer.offset.value : 0);
 		const spacerAfter = computed(() => props.virtual ? virtualizer.offsetEnd.value : 0);
 		/** Ширина колонки: число трактуем как пиксели. */
@@ -1216,36 +1588,49 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createBlock(GrTable_default, mergeProps(tableProps.value, {
 				ref_key: "tableRef",
 				ref: tableRef,
-				"data-gr-datatable": ""
+				"row-groups": "",
+				"data-gr-datatable": "",
+				role: __props.cellNavigation ? "grid" : "table",
+				onKeydown: unref(grid).onKeydown
 			}), createSlots({
-				caption: withCtx(() => [renderSlot(_ctx.$slots, "caption", {}, () => [createTextVNode(toDisplayString(__props.caption), 1)]), createElementVNode("span", {
+				caption: withCtx(() => [renderSlot(_ctx.$slots, "caption", {}, () => [createTextVNode(toDisplayString(__props.caption), 1)]), !__props.cellNavigation ? (openBlock(), createElementBlock("span", {
+					key: 0,
 					id: `${unref(rootId)}-live`,
 					"data-gr-datatable-live": "",
 					role: "status",
 					"aria-live": "polite"
-				}, toDisplayString(liveMessage.value), 9, _hoisted_1)]),
+				}, toDisplayString(liveMessage.value), 9, _hoisted_1)) : createCommentVNode("", true)]),
 				header: withCtx(() => [createElementVNode("tr", {
 					"data-gr-datatable-header": "",
 					"aria-rowindex": __props.virtual ? 1 : void 0
 				}, [
 					expandColumnVisible.value ? (openBlock(), createElementBlock("th", {
 						key: 0,
+						ref: (el) => registerCell(unref(-1), expandColumnIndex, el),
 						"data-gr-datatable-expand-head": "",
 						scope: "col",
-						class: normalizeClass([unref(expandColumnWidths)[unref(resolvedSize)], cellClass.value])
-					}, null, 2)) : createCommentVNode("", true),
+						class: normalizeClass([unref(expandColumnWidths)[unref(resolvedSize)], cellClass.value]),
+						tabindex: __props.cellNavigation ? unref(grid).tabindexFor(unref(-1), expandColumnIndex) : void 0,
+						onFocus: _cache[0] || (_cache[0] = ($event) => unref(grid).setActive(unref(-1), expandColumnIndex))
+					}, null, 42, _hoisted_3)) : createCommentVNode("", true),
 					__props.selectable ? (openBlock(), createElementBlock("th", {
 						key: 1,
-						ref: (el) => registerEl(unref(headerCellEls), unref(SELECT_COLUMN_KEY), el),
+						ref: (el) => {
+							registerEl(unref(headerCellEls), unref(SELECT_COLUMN_KEY), el);
+							registerCell(unref(-1), selectColumnIndex.value, el);
+						},
 						class: normalizeClass(["text-left", [
 							selectColumnClass.value,
 							cellClass.value,
 							unref(hasPinnedLeft) ? unref(columnPinnedClass) : ""
 						]]),
+						tabindex: __props.cellNavigation ? unref(grid).tabindexFor(unref(-1), selectColumnIndex.value) : void 0,
 						style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0),
-						scope: "col"
+						scope: "col",
+						onFocus: _cache[1] || (_cache[1] = ($event) => unref(grid).setActive(unref(-1), selectColumnIndex.value))
 					}, [createVNode(GrCheckbox_default, {
 						"data-gr-datatable-select-all": "",
+						tabindex: cellControlTabindex.value,
 						"model-value": unref(allSelected),
 						indeterminate: unref(someSelected),
 						size: checkboxSize.value,
@@ -1253,120 +1638,160 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 						"aria-label": unref(t)("gr.dataTable.selectAll", "Select all rows"),
 						"onUpdate:modelValue": unref(toggleAll)
 					}, null, 8, [
+						"tabindex",
 						"model-value",
 						"indeterminate",
 						"size",
 						"disabled",
 						"aria-label",
 						"onUpdate:modelValue"
-					])], 6)) : createCommentVNode("", true),
+					])], 46, _hoisted_4)) : 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),
+							ref: (el) => {
+								registerEl(unref(headerCellEls), String(col.key), el);
+								registerCell(unref(-1), dataColumnIndex(colIndex), el);
+							},
 							class: normalizeClass(["font-700", [
 								headerTextClass.value,
 								cellClass.value,
 								cellAlign(col),
-								__props.reorderableColumns || __props.resizableColumns ? "group relative" : "",
+								__props.reorderableColumns || __props.resizableColumns || __props.pinnableColumns ? "group relative" : "",
 								unref(draggingColumnKey) === String(col.key) ? unref(columnDraggingClass) : "",
 								unref(columnDropClass)(colIndex),
 								...unref(pinnedCellClass)(col, colIndex)
 							]]),
+							tabindex: __props.cellNavigation ? unref(grid).tabindexFor(unref(-1), dataColumnIndex(colIndex)) : void 0,
 							"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,
-							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)
+							scope: "col",
+							onFocus: ($event) => unref(grid).setActive(unref(-1), dataColumnIndex(colIndex))
 						}, [
-							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, {
+							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: __props.cellNavigation ? -1 : 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[2] || (_cache[2] = withModifiers(() => {}, ["stop"]))
+							}, [createVNode(unref(grip_vertical_default), {
+								class: "block",
+								"aria-hidden": "true"
+							})], 42, _hoisted_6)) : createCommentVNode("", true), col.sortable ? (openBlock(), createElementBlock("button", {
 								key: 1,
-								size: sortIconSize.value
+								type: "button",
+								"data-gr-datatable-sort": "",
+								tabindex: cellControlTabindex.value,
+								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_8, toDisplayString(sortHint(col)), 1),
+								createElementVNode("span", _hoisted_9, [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_7)) : (openBlock(), createElementBlock("span", _hoisted_10, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]))], 2),
+							__props.pinnableColumns ? (openBlock(), createBlock(GrDropdownMenu_default, {
+								key: 0,
+								"data-gr-datatable-column-menu": "",
+								items: columnMenuItems(col),
+								placement: "bottom-end",
+								width: COLUMN_MENU_WIDTH,
+								"aria-label": columnMenuLabel(col),
+								onSelect: ($event) => onColumnMenuSelect(col, $event)
 							}, {
-								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);
+								trigger: withCtx(({ triggerProps }) => [createElementVNode("button", mergeProps({ ref_for: true }, triggerProps, {
+									type: "button",
+									"data-gr-datatable-column-menu-trigger": "",
+									tabindex: cellControlTabindex.value,
+									class: unref(columnMenuTriggerClass),
+									"aria-label": columnMenuLabel(col),
+									disabled: __props.loading,
+									onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+								}), [createVNode(unref(ellipsis_vertical_default), {
+									class: "block",
+									"aria-hidden": "true"
+								})], 16, _hoisted_11)]),
+								_: 2
+							}, 1032, [
+								"items",
+								"aria-label",
+								"onSelect"
+							])) : createCommentVNode("", true),
+							__props.resizableColumns ? (openBlock(), createElementBlock("span", {
+								key: 1,
+								"data-gr-datatable-column-resizer": "",
+								role: "separator",
+								tabindex: __props.cellNavigation ? -1 : 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[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+							}, [createElementVNode("span", {
+								class: normalizeClass([
+									unref(columnResizerLineClass),
+									unref(columnResizerHoverClass),
+									unref(resizingKey) === String(col.key) ? unref(columnResizerLineActiveClass) : ""
+								]),
+								"aria-hidden": "true"
+							}, null, 2)], 42, _hoisted_12)) : createCommentVNode("", true)
+						], 46, _hoisted_5);
 					}), 128))
 				], 8, _hoisted_2)]),
-				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("tr", _hoisted_10, [createElementVNode("td", {
+				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("tbody", _hoisted_13, [createElementVNode("tr", _hoisted_14, [createElementVNode("td", {
 					colspan: totalColumns.value,
 					class: normalizeClass(["text-center text-[var(--gr-muted-fg)]", placeholderClass.value])
-				}, [renderSlot(_ctx.$slots, "loading", {}, () => [createElementVNode("span", _hoisted_12, [createVNode(unref(loader_circle_default), {
+				}, [renderSlot(_ctx.$slots, "loading", {}, () => [createElementVNode("span", _hoisted_16, [createVNode(unref(loader_circle_default), {
 					class: normalizeClass(["block animate-spin", spinnerClass.value]),
 					"aria-hidden": "true"
-				}, null, 8, ["class"]), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)])])], 10, _hoisted_11)])) : isEmpty.value ? (openBlock(), createElementBlock("tr", _hoisted_13, [createElementVNode("td", {
+				}, null, 8, ["class"]), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)])])], 10, _hoisted_15)])])) : isEmpty.value ? (openBlock(), createElementBlock("tbody", _hoisted_17, [createElementVNode("tr", _hoisted_18, [createElementVNode("td", {
 					colspan: totalColumns.value,
 					class: normalizeClass(["text-center text-[var(--gr-muted-fg)]", placeholderClass.value])
-				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 10, _hoisted_14)])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-					__props.virtual && spacerBefore.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_15, [createElementVNode("td", {
+				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 10, _hoisted_19)])])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+					__props.virtual && spacerBefore.value > 0 ? (openBlock(), createElementBlock("tbody", _hoisted_20, [createElementVNode("tr", _hoisted_21, [createElementVNode("td", {
 						colspan: totalColumns.value,
 						style: normalizeStyle({
 							height: `${spacerBefore.value}px`,
 							padding: "0",
 							border: "0"
 						})
-					}, null, 12, _hoisted_16)])) : createCommentVNode("", true),
+					}, null, 12, _hoisted_22)])])) : createCommentVNode("", true),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(renderedRows.value, ({ row, index }) => {
-						return openBlock(), createElementBlock(Fragment, { key: unref(rowKeyValue)(row) }, [createElementVNode("tr", mergeProps({
+						return openBlock(), createElementBlock("tbody", {
+							key: unref(rowKeyValue)(row),
 							ref_for: true,
 							ref: (el) => __props.virtual && unref(virtualizer).measure(index, el),
+							"data-gr-datatable-row-group": ""
+						}, [createElementVNode("tr", mergeProps({
 							class: ["border-t border-[var(--gr-brd)]", [unref(isRowSelected)(row) ? unref(rowSelectedClass) : "", rowClassName(row, index)]],
 							"data-gr-datatable-row": "",
 							"data-row-key": unref(rowKeyValue)(row),
@@ -1375,12 +1800,17 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 						}, { ref_for: true }, __props.rowProps?.(row, index), { onClick: ($event) => onRowClick(row, index, $event) }), [
 							expandColumnVisible.value ? (openBlock(), createElementBlock("td", {
 								key: 0,
+								ref_for: true,
+								ref: (el) => registerCell(index, expandColumnIndex, el),
 								"data-gr-datatable-expand-cell": "",
-								class: normalizeClass(["text-left", [unref(expandColumnWidths)[unref(resolvedSize)], cellClass.value]])
+								class: normalizeClass(["text-left", [unref(expandColumnWidths)[unref(resolvedSize)], cellClass.value]]),
+								tabindex: __props.cellNavigation ? unref(grid).tabindexFor(index, expandColumnIndex) : void 0,
+								onFocus: ($event) => unref(grid).setActive(index, expandColumnIndex)
 							}, [unref(isRowExpandable)(row) ? (openBlock(), createElementBlock("button", {
 								key: 0,
 								type: "button",
 								"data-gr-datatable-expand": "",
+								tabindex: cellControlTabindex.value,
 								class: normalizeClass([unref(expandButtonClass), checkboxSize.value === "xs" ? "h-5 w-5" : "h-6 w-6"]),
 								"aria-expanded": unref(isRowExpanded)(row),
 								"aria-controls": detailRowId(row),
@@ -1389,33 +1819,41 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 							}, [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),
+							}, () => [createVNode(unref(chevron_right_default), { class: normalizeClass([unref(expandIconClass), unref(isRowExpanded)(row) ? unref(expandIconOpenClass) : ""]) }, null, 8, ["class"])])], 10, _hoisted_25)) : createCommentVNode("", true)], 42, _hoisted_24)) : createCommentVNode("", true),
 							__props.selectable ? (openBlock(), createElementBlock("td", {
 								key: 1,
+								ref_for: true,
+								ref: (el) => registerCell(index, selectColumnIndex.value, el),
 								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)
+								style: normalizeStyle(unref(hasPinnedLeft) ? { left: "0px" } : void 0),
+								tabindex: __props.cellNavigation ? unref(grid).tabindexFor(index, selectColumnIndex.value) : void 0,
+								onFocus: ($event) => unref(grid).setActive(index, selectColumnIndex.value)
 							}, [unref(isRowSelectable)(row) ? (openBlock(), createBlock(GrCheckbox_default, {
 								key: 0,
 								"data-gr-datatable-select-row": "",
+								tabindex: cellControlTabindex.value,
 								"model-value": unref(isRowSelected)(row),
 								size: checkboxSize.value,
 								"aria-label": unref(t)("gr.dataTable.selectRow", "Select row"),
-								onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+								onClick: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"])),
 								"onUpdate:modelValue": ($event) => unref(toggleRow)(row)
 							}, null, 8, [
+								"tabindex",
 								"model-value",
 								"size",
 								"aria-label",
 								"onUpdate:modelValue"
-							])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true),
+							])) : createCommentVNode("", true)], 46, _hoisted_26)) : createCommentVNode("", true),
 							(openBlock(true), createElementBlock(Fragment, null, renderList(unref(orderedColumns), (col, colIndex) => {
 								return openBlock(), createElementBlock("td", {
 									key: col.key,
+									ref_for: true,
+									ref: (el) => registerCell(index, dataColumnIndex(colIndex), el),
 									class: normalizeClass([
 										cellClass.value,
 										cellAlign(col),
@@ -1425,15 +1863,17 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 									style: normalizeStyle({
 										...columnWidthStyle(unref(widthOf)(col)),
 										...unref(pinnedStyleOf)(col)
-									})
+									}),
+									tabindex: __props.cellNavigation ? unref(grid).tabindexFor(index, dataColumnIndex(colIndex)) : void 0,
+									onFocus: ($event) => unref(grid).setActive(index, dataColumnIndex(colIndex))
 								}, [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);
+								}, () => [createElementVNode("span", null, toDisplayString(cellValue(row, col.key)), 1)])], 46, _hoisted_27);
 							}), 128))
-						], 16, _hoisted_17), unref(isRowExpanded)(row) ? (openBlock(), createElementBlock("tr", {
+						], 16, _hoisted_23), unref(isRowExpanded)(row) ? (openBlock(), createElementBlock("tr", {
 							key: 0,
 							id: detailRowId(row),
 							"data-gr-datatable-detail": "",
@@ -1442,7 +1882,7 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 						}, [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", {
+						}, [createElementVNode("div", { class: normalizeClass(unref(detailContentClass)) }, [unref(detailStateOf)(row) === "loading" ? (openBlock(), createElementBlock("div", _hoisted_30, [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": ""
@@ -1462,16 +1902,16 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 							index,
 							data: unref(detailDataOf)(row),
 							state: unref(detailStateOf)(row)
-						}, void 0, void 0, 2)], 2)], 10, _hoisted_20)], 10, _hoisted_19)) : createCommentVNode("", true)], 64);
+						}, void 0, void 0, 2)], 2)], 10, _hoisted_29)], 10, _hoisted_28)) : createCommentVNode("", true)]);
 					}), 128)),
-					__props.virtual && spacerAfter.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_22, [createElementVNode("td", {
+					__props.virtual && spacerAfter.value > 0 ? (openBlock(), createElementBlock("tbody", _hoisted_31, [createElementVNode("tr", _hoisted_32, [createElementVNode("td", {
 						colspan: totalColumns.value,
 						style: normalizeStyle({
 							height: `${spacerAfter.value}px`,
 							padding: "0",
 							border: "0"
 						})
-					}, null, 12, _hoisted_23)])) : createCommentVNode("", true)
+					}, null, 12, _hoisted_33)])])) : createCommentVNode("", true)
 				], 64))]),
 				_: 2
 			}, [_ctx.$slots.footer || hasSummary.value ? {
@@ -1505,13 +1945,13 @@ 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_25);
-				}), 128))], 10, _hoisted_24)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", {
+					}, () => [createElementVNode("span", null, toDisplayString(summaryValue(col.key)), 1)])], 14, _hoisted_35);
+				}), 128))], 10, _hoisted_34)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", {
 					columns: unref(orderedColumns),
 					totalColumns: totalColumns.value
 				})]),
 				key: "0"
-			} : void 0]), 1040);
+			} : void 0]), 1040, ["role", "onKeydown"]);
 		};
 	}
 });