@feugene/granularity 0.16.0 → 0.18.0

package/dist/components/GrDataTable/chunks/{GrDataTable-DVFho9Cj.js → GrDataTable-DzaGLG3A.js}

@@ -3,10 +3,14 @@ import { n as useGranularityTranslations } from "../../../chunks/granularityI18n
 import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BvA2ZGXP.js";
 import { useVirtualList } from "../../../composables/useVirtualList.js";
 import { t as GrCheckbox_default } from "../../GrCheckbox/chunks/GrCheckbox-BLOp8452.js";
-import { t as GrTable_default } from "../../GrTable/chunks/GrTable-BB-mI_NM.js";
-import { a as headerTextSizes, c as selectCheckboxSizes, d as spinnerSizes, i as headerGaps, l as selectColumnWidths, o as placeholderPaddings, r as cellPaddings, s as rowHeightEstimates, u as sortIconSizes } from "../../../chunks/config-BNfQwyL4.js";
+import { useDragGesture } from "../../../composables/useDragGesture.js";
+import { t as GrTable_default } from "../../GrTable/chunks/GrTable-BfqgwETQ.js";
+import { useAnnouncer } from "../../../composables/useAnnouncer.js";
+import { n as insertionIndex, r as moveItem, t as useDragSort } from "../../../chunks/useDragSort-0l47h4yb.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { C as selectColumnWidths, S as selectCheckboxSizes, T as spinnerSizes, _ as headerGaps, a as columnDropAfterClass, b as rowHeightEstimates, c as columnHandleClass, d as columnPinnedLeftEdgeClass, f as columnPinnedRightEdgeClass, g as columnResizerLineClass, h as columnResizerLineActiveClass, i as columnDraggingClass, l as columnHandleIconClass, m as columnResizerHoverClass, o as columnDropBeforeClass, p as columnResizerClass, r as cellPaddings, s as columnHandleActiveClass, u as columnPinnedClass, v as headerTextSizes, w as sortIconSizes, x as rowSelectedClass, y as placeholderPaddings } from "../../../chunks/config-DEvsMTQE.js";
 import { t as arrow_up_default } from "../../../chunks/arrow-up-C_G4jg8M.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, markRaw, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, withCtx, withModifiers } from "vue";
+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, withCtx, withModifiers } from "vue";
 //#region src/components/GrDataTable/grDataTableSort.ts
 /** Пустое значение ячейки: нечего сравнивать, место таким — в конце списка. */
 function isEmptyCell(value) {
@@ -83,48 +87,77 @@ var arrow_down_default = markRaw({
 //#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 = ["aria-sort"];
-var _hoisted_4 = ["onClick"];
-var _hoisted_5 = { class: "sr-only" };
-var _hoisted_6 = {
+var _hoisted_3 = ["data-column-key", "aria-sort"];
+var _hoisted_4 = [
+	"tabindex",
+	"aria-label",
+	"disabled",
+	"onPointerdown",
+	"onKeydown",
+	"onFocus"
+];
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = { class: "sr-only" };
+var _hoisted_7 = {
 	class: "inline-flex",
 	"aria-hidden": "true"
 };
-var _hoisted_7 = {
-	key: 1,
+var _hoisted_8 = {
+	key: 2,
 	class: "text-[var(--gr-muted-fg)]"
 };
-var _hoisted_8 = {
+var _hoisted_9 = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"onPointerdown",
+	"onKeydown",
+	"onDblclick"
+];
+var _hoisted_10 = {
 	key: 0,
 	"data-gr-datatable-loading": ""
 };
-var _hoisted_9 = ["colspan"];
-var _hoisted_10 = { class: "inline-flex items-center gap-2" };
-var _hoisted_11 = {
+var _hoisted_11 = ["colspan"];
+var _hoisted_12 = { class: "inline-flex items-center gap-2" };
+var _hoisted_13 = {
 	key: 1,
 	"data-gr-datatable-empty": ""
 };
-var _hoisted_12 = ["colspan"];
-var _hoisted_13 = {
+var _hoisted_14 = ["colspan"];
+var _hoisted_15 = {
 	key: 0,
 	"aria-hidden": "true",
 	"data-gr-datatable-spacer": "before",
 	style: { pointerEvents: "none" }
 };
-var _hoisted_14 = ["colspan"];
-var _hoisted_15 = [
+var _hoisted_16 = ["colspan"];
+var _hoisted_17 = [
 	"data-row-key",
 	"data-selected",
 	"aria-rowindex",
 	"onClick"
 ];
-var _hoisted_16 = {
+var _hoisted_18 = {
 	key: 1,
 	"aria-hidden": "true",
 	"data-gr-datatable-spacer": "after",
 	style: { pointerEvents: "none" }
 };
-var _hoisted_17 = ["colspan"];
+var _hoisted_19 = ["colspan"];
+/**
+* `GrDataTable` — data-таблица поверх `GrTable` с сортировкой по клику
+* на заголовок и scoped-слотами ячеек (`#cell-<key>`), `#header-<key>`,
+* `#caption`, `#footer`, `#empty`, `#loading`.
+*
+* Сортировка, включая крайние случаи с пустыми и смешанными значениями, живёт
+* в `grDataTableSort.ts` — см. `docs/components/GrDataTable.md`.
+*/
+var MIN_COLUMN_WIDTH = 48;
+/** Шаг клавиатуры и крупный шаг — как у `GrSplitter`. */
+var RESIZE_STEP = 16;
+var RESIZE_BIG_STEP = 48;
+var SELECT_COLUMN_KEY = "__select__";
 //#endregion
 //#region src/components/GrDataTable/GrDataTable.vue
 var GrDataTable_default = /* @__PURE__ */ defineComponent({
@@ -181,19 +214,34 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		maxHeight: { default: void 0 }
+		maxHeight: { default: void 0 },
+		reorderableColumns: {
+			type: Boolean,
+			default: false
+		},
+		columnOrder: { default: void 0 },
+		resizableColumns: {
+			type: Boolean,
+			default: false
+		},
+		columnWidths: { default: void 0 }
 	},
 	emits: [
 		"update:sortKey",
 		"update:sortDir",
 		"sortChange",
 		"update:selected",
-		"rowClick"
+		"rowClick",
+		"update:columnOrder",
+		"columnReorder",
+		"update:columnWidths",
+		"columnResize"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const { t, locale } = useGranularityTranslations();
+		const { announce } = useAnnouncer();
 		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.dataTable.loading", "Loading…"));
 		const resolvedEmptyText = computed(() => props.emptyText ?? t("gr.dataTable.empty", "No data"));
 		const internalSortKey = ref(props.initialSortKey ?? "");
@@ -305,6 +353,57 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 		function ariaRowIndex(index) {
 			return props.virtual ? index + 2 : void 0;
 		}
+		const isEmpty = computed(() => sortedRows.value.length === 0);
+		const totalColumns = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+		/** Uncontrolled-состояние; в controlled-режиме перекрывается пропом `columnOrder`. */
+		const internalColumnOrder = ref(props.columns.map((col) => String(col.key)));
+		/**
+		* Колонки в пользовательском порядке.
+		*
+		* Состав задаёт `columns`, порядок — только порядок: ключ, которого в наборе
+		* нет, игнорируется, а колонка, которой нет в порядке (её только что добавили),
+		* встаёт в конец. Иначе правка `columns` теряла бы колонки молча.
+		*/
+		const orderedColumns = computed(() => {
+			const order = props.columnOrder ?? internalColumnOrder.value;
+			const remaining = new Map(props.columns.map((col) => [String(col.key), col]));
+			const ordered = [];
+			for (const key of order) {
+				const col = remaining.get(key);
+				if (!col) continue;
+				remaining.delete(key);
+				ordered.push(col);
+			}
+			for (const col of props.columns) if (remaining.has(String(col.key))) ordered.push(col);
+			return ordered.sort((a, b) => pinGroupOf(a) - pinGroupOf(b));
+		});
+		/** Группа закрепления: 0 — слева, 1 — обычная колонка, 2 — справа. */
+		function pinGroupOf(col) {
+			if (col.pinned === "left") return 0;
+			if (col.pinned === "right") return 2;
+			return 1;
+		}
+		/**
+		* Сумма заданных ширин — минимальная ширина таблицы.
+		*
+		* Без неё фиксированная раскладка вписывает таблицу в контейнер и делит место
+		* пропорционально: колонка, которую пользователь растянул, ужимается обратно, а
+		* горизонтальной прокрутки — той самой, ради которой закрепляют колонки, — не
+		* возникает. Считается, только когда ширина известна у **всех** колонок: с
+		* одной неизвестной сумма врала бы.
+		*/
+		const tableMinWidth = computed(() => {
+			const cols = orderedColumns.value;
+			if (cols.length === 0) return void 0;
+			let total = 0;
+			for (const col of cols) {
+				const width = widthOf(col);
+				if (typeof width !== "number") return void 0;
+				total += width;
+			}
+			return total;
+		});
+		const columnKeys = computed(() => orderedColumns.value.map((col) => String(col.key)));
 		const tableProps = computed(() => ({
 			size: resolvedSize.value,
 			ariaLabel: props.ariaLabel,
@@ -313,10 +412,289 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 			stickyHeader: props.stickyHeader,
 			maxHeight: props.maxHeight,
 			rowCount: ariaRowCount.value,
-			fixedLayout: props.virtual
+			fixedLayout: props.virtual || props.resizableColumns,
+			tableMinWidth: tableMinWidth.value
 		}));
-		const isEmpty = computed(() => sortedRows.value.length === 0);
-		const totalColumns = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+		function indexOfColumn(key) {
+			return columnKeys.value.indexOf(key);
+		}
+		const headerCellEls = /* @__PURE__ */ new Map();
+		const columnHandleEls = /* @__PURE__ */ new Map();
+		function registerEl(store, key, el) {
+			if (el instanceof HTMLElement) {
+				store.set(key, el);
+				return;
+			}
+			const previous = store.get(key);
+			if (previous && !previous.isConnected) store.delete(key);
+		}
+		function applyColumnMove(from, to) {
+			const keys = columnKeys.value;
+			if (from < 0 || to < 0 || to >= keys.length || from === to) return;
+			if (!sameGroup(from, to)) return;
+			const key = keys[from];
+			const label = orderedColumns.value[from]?.label ?? key;
+			const next = moveItem(keys, from, to);
+			internalColumnOrder.value = next;
+			emit("update:columnOrder", next);
+			emit("columnReorder", {
+				key,
+				from,
+				to
+			});
+			announce(t("gr.dataTable.columnMoved", "Column {label} moved to position {position} of {count}", {
+				label,
+				position: to + 1,
+				count: keys.length
+			}));
+		}
+		const columnSort = useDragSort({
+			items: () => columnKeys.value,
+			elementFor: (key) => headerCellEls.get(key) ?? null,
+			orientation: () => "horizontal",
+			disabled: () => !props.reorderableColumns || props.loading,
+			resolveTarget: (hit, source) => {
+				const to = insertionIndex(hit, indexOfColumn(source), columnKeys.value.length);
+				return sameGroup(indexOfColumn(source), to) ? to : null;
+			},
+			onDrop: (source, to) => applyColumnMove(indexOfColumn(source), to)
+		});
+		function sameGroup(from, to) {
+			const cols = orderedColumns.value;
+			if (!cols[from] || !cols[to]) return false;
+			return pinGroupOf(cols[from]) === pinGroupOf(cols[to]);
+		}
+		/**
+		* Кольцо роверного фокуса по ручкам: одна остановка `Tab` на всю шапку.
+		* Иначе таблица из десяти колонок добавляла бы десять таб-стопов подряд.
+		*/
+		const columnRoving = useRovingFocus({
+			items: () => props.reorderableColumns ? columnKeys.value : [],
+			elementFor: (key) => columnHandleEls.get(key) ?? null,
+			orientation: () => "horizontal",
+			wrap: () => false
+		});
+		async function onColumnHandleKeydown(event, key) {
+			if (!props.reorderableColumns) return;
+			if (event.shiftKey && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+				event.preventDefault();
+				const from = indexOfColumn(key);
+				applyColumnMove(from, event.key === "ArrowLeft" ? from - 1 : from + 1);
+				await nextTick();
+				await columnRoving.focusKey(key);
+				return;
+			}
+			columnRoving.handleNavigationKeys(event);
+		}
+		const draggingColumnKey = computed(() => columnSort.mode.value === null ? null : columnSort.source.value);
+		/** Полоса места вставки — на колонке-соседе, со стороны движения. */
+		function columnDropClass(index) {
+			const target = columnSort.target.value;
+			if (!columnSort.isActive.value || target === null || target !== index) return "";
+			const active = columnSort.source.value === null ? -1 : indexOfColumn(columnSort.source.value);
+			if (index === active) return "";
+			return target < active ? columnDropBeforeClass : columnDropAfterClass;
+		}
+		const columnHandleLabel = (col) => t("gr.dataTable.moveColumn", "Move column {label}", { label: col.label });
+		/** Уже колонки не бывает: в неё перестаёт помещаться даже стрелка сортировки. */
+		const internalColumnWidths = ref({});
+		const columnWidths = computed(() => props.columnWidths ?? internalColumnWidths.value);
+		/** Фактические ширины шапки: заполняются замером, см. `measureLayout`. */
+		const measuredColumnWidths = ref({});
+		/** Ширина колонки: заданная пользователем сильнее объявленной в `columns`. */
+		function widthOf(col) {
+			return columnWidths.value[String(col.key)] ?? col.width;
+		}
+		const resizingKey = ref(null);
+		let pendingResizeKey = null;
+		let resizeStartX = 0;
+		let resizeStartWidth = 0;
+		let widthBeforeResize;
+		function setColumnWidth(key, width) {
+			const next = {
+				...columnWidths.value,
+				[key]: Math.max(MIN_COLUMN_WIDTH, Math.round(width))
+			};
+			internalColumnWidths.value = next;
+			emit("update:columnWidths", next);
+		}
+		function announceWidth(key) {
+			const col = orderedColumns.value.find((item) => String(item.key) === key);
+			if (!col) return;
+			announce(t("gr.dataTable.columnResized", "Column {label} is {width} pixels wide", {
+				label: col.label,
+				width: columnWidths.value[key] ?? 0
+			}));
+		}
+		const resizeGesture = useDragGesture({
+			disabled: () => !props.resizableColumns || props.loading,
+			onStart: (event) => {
+				const key = pendingResizeKey;
+				const el = key === null ? null : headerCellEls.get(key);
+				if (key === null || !el) return false;
+				resizeStartX = event.clientX;
+				resizeStartWidth = el.getBoundingClientRect().width;
+				widthBeforeResize = columnWidths.value[key];
+				resizingKey.value = key;
+			},
+			onMove: (event) => {
+				if (resizingKey.value === null) return;
+				event.preventDefault();
+				setColumnWidth(resizingKey.value, resizeStartWidth + (event.clientX - resizeStartX));
+			},
+			onEnd: () => {
+				const key = resizingKey.value;
+				resizingKey.value = null;
+				if (key === null) return;
+				emit("columnResize", {
+					key,
+					width: columnWidths.value[key] ?? Math.round(resizeStartWidth)
+				});
+				announceWidth(key);
+			},
+			onCancel: () => {
+				const key = resizingKey.value;
+				resizingKey.value = null;
+				if (key === null) return;
+				const next = { ...columnWidths.value };
+				if (widthBeforeResize === void 0) delete next[key];
+				else next[key] = widthBeforeResize;
+				internalColumnWidths.value = next;
+				emit("update:columnWidths", next);
+			}
+		});
+		function onResizerPointerDown(event, key) {
+			pendingResizeKey = key;
+			resizeGesture.start(event);
+		}
+		/** Сброс к авторазметке: колонка снова считается по содержимому. */
+		function resetColumnWidth(key) {
+			if (columnWidths.value[key] === void 0) return;
+			const next = { ...columnWidths.value };
+			delete next[key];
+			internalColumnWidths.value = next;
+			emit("update:columnWidths", next);
+			emit("columnResize", {
+				key,
+				width: 0
+			});
+		}
+		function resizeByKeyboard(key, delta) {
+			const measured = headerCellEls.get(key)?.getBoundingClientRect().width ?? MIN_COLUMN_WIDTH;
+			const current = columnWidths.value[key] ?? measured;
+			setColumnWidth(key, current + delta);
+			emit("columnResize", {
+				key,
+				width: columnWidths.value[key] ?? current
+			});
+			announceWidth(key);
+		}
+		function onResizerKeydown(event, key) {
+			if (!props.resizableColumns || props.loading) return;
+			const step = event.shiftKey ? RESIZE_BIG_STEP : RESIZE_STEP;
+			if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+				event.preventDefault();
+				resizeByKeyboard(key, event.key === "ArrowLeft" ? -step : step);
+				return;
+			}
+			if (event.key === "Enter") {
+				event.preventDefault();
+				resetColumnWidth(key);
+			}
+		}
+		function resizerLabel(col) {
+			return t("gr.dataTable.resizeColumn", "Width of column {label}", { label: col.label });
+		}
+		/**
+		* Ручка ресайза — фокусируемый `separator`, а значит обязана называть текущее
+		* значение с первого рендера, до всякого перетаскивания. Заданной ширины у
+		* колонки может не быть вовсе (авторазметка), поэтому за значением идём к
+		* измеренной; до замера остаётся объявленная в `columns`, а её тоже может не
+		* быть — тогда минимум.
+		*/
+		function resizerValue(col) {
+			const key = String(col.key);
+			const declared = typeof col.width === "number" ? col.width : void 0;
+			return columnWidths.value[key] ?? measuredColumnWidths.value[key] ?? declared ?? MIN_COLUMN_WIDTH;
+		}
+		/** Служебная колонка выбора в реестре ячеек: своего ключа у неё нет. */
+		const hasPinnedLeft = computed(() => orderedColumns.value.some((col) => col.pinned === "left"));
+		const pinnedOffsets = ref({});
+		/**
+		* Смещения липких колонок считаются по **измеренным** ширинам соседей: колонка
+		* может жить на авторазметке, и тогда взять смещение больше неоткуда. Отсюда же
+		* порядок: замер после отрисовки, а не в вычислении.
+		*/
+		function measurePinnedOffsets() {
+			const next = {};
+			const cols = orderedColumns.value;
+			let left = props.selectable && hasPinnedLeft.value ? headerCellEls.get(SELECT_COLUMN_KEY)?.getBoundingClientRect().width ?? 0 : 0;
+			for (const col of cols) {
+				if (col.pinned !== "left") continue;
+				next[String(col.key)] = left;
+				left += headerCellEls.get(String(col.key))?.getBoundingClientRect().width ?? 0;
+			}
+			let right = 0;
+			for (let index = cols.length - 1; index >= 0; index -= 1) {
+				const col = cols[index];
+				if (col.pinned !== "right") continue;
+				next[String(col.key)] = right;
+				right += headerCellEls.get(String(col.key))?.getBoundingClientRect().width ?? 0;
+			}
+			pinnedOffsets.value = next;
+		}
+		function measureColumnWidths() {
+			if (!props.resizableColumns) return;
+			const next = {};
+			for (const col of orderedColumns.value) {
+				const key = String(col.key);
+				const width = headerCellEls.get(key)?.getBoundingClientRect().width;
+				if (width) next[key] = Math.round(width);
+			}
+			measuredColumnWidths.value = next;
+		}
+		function measureLayout() {
+			measurePinnedOffsets();
+			measureColumnWidths();
+		}
+		function pinnedStyleOf(col) {
+			if (!col.pinned) return void 0;
+			const offset = pinnedOffsets.value[String(col.key)] ?? 0;
+			return col.pinned === "left" ? { left: `${offset}px` } : { right: `${offset}px` };
+		}
+		/** Тень рисует только крайняя колонка группы — иначе полос было бы столько же, сколько колонок. */
+		function pinnedEdgeClass(col, index) {
+			if (col.pinned === "left") return orderedColumns.value[index + 1]?.pinned === "left" ? "" : columnPinnedLeftEdgeClass;
+			if (col.pinned === "right") return orderedColumns.value[index - 1]?.pinned === "right" ? "" : columnPinnedRightEdgeClass;
+			return "";
+		}
+		function pinnedCellClass(col, index) {
+			if (!col.pinned) return [];
+			return [columnPinnedClass, pinnedEdgeClass(col, index)];
+		}
+		/**
+		* Ширину колонки меняет не только правка пропов: окно, шрифт и содержимое
+		* ячейки двигают её сами. `ResizeObserver` — единственный способ узнать об этом;
+		* в jsdom и на сервере его нет, там хватает пересчёта по изменению данных.
+		*/
+		let layoutObserver = null;
+		onMounted(() => {
+			measureLayout();
+			if (typeof ResizeObserver === "undefined") return;
+			layoutObserver = new ResizeObserver(() => measureLayout());
+			const el = headerCellEls.get(SELECT_COLUMN_KEY) ?? headerCellEls.get(columnKeys.value[0]);
+			if (el?.parentElement) layoutObserver.observe(el.parentElement);
+		});
+		onUnmounted(() => {
+			layoutObserver?.disconnect();
+			layoutObserver = null;
+		});
+		watch(() => [
+			orderedColumns.value,
+			columnWidths.value,
+			props.loading,
+			props.rows.length
+		], () => void nextTick(measureLayout));
 		/**
 		* Живой регион существует с первого рендера и пуст, пока объявлять нечего.
 		* Регион, который появляется уже с текстом, часть AT не объявляет вовсе —
@@ -478,7 +856,13 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 					"aria-rowindex": __props.virtual ? 1 : void 0
 				}, [__props.selectable ? (openBlock(), createElementBlock("th", {
 					key: 0,
-					class: normalizeClass(["text-left", [selectColumnClass.value, cellClass.value]]),
+					ref: (el) => registerEl(unref(headerCellEls), SELECT_COLUMN_KEY, el),
+					class: normalizeClass(["text-left", [
+						selectColumnClass.value,
+						cellClass.value,
+						hasPinnedLeft.value ? unref(columnPinnedClass) : ""
+					]]),
+					style: normalizeStyle(hasPinnedLeft.value ? { left: "0px" } : void 0),
 					scope: "col"
 				}, [createVNode(GrCheckbox_default, {
 					"data-gr-datatable-select-all": "",
@@ -494,27 +878,54 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 					"size",
 					"disabled",
 					"aria-label"
-				])], 2)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+				])], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(orderedColumns.value, (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)
+							cellAlign(col),
+							__props.reorderableColumns || __props.resizableColumns ? "group relative" : "",
+							draggingColumnKey.value === String(col.key) ? unref(columnDraggingClass) : "",
+							columnDropClass(colIndex),
+							...pinnedCellClass(col, colIndex)
 						]]),
-						style: normalizeStyle(columnWidthStyle(col.width)),
+						"data-column-key": col.key,
+						style: normalizeStyle({
+							...columnWidthStyle(widthOf(col)),
+							...pinnedStyleOf(col)
+						}),
 						"aria-sort": ariaSortFor(col),
 						scope: "col"
-					}, [createElementVNode("div", { class: normalizeClass(["inline-flex items-center", headerGapClass.value]) }, [col.sortable ? (openBlock(), createElementBlock("button", {
+					}, [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) => onColumnHandleKeydown($event, String(col.key)),
+						onFocus: ($event) => unref(columnRoving).setActive(String(col.key)),
+						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+					}, [createElementVNode("span", {
+						class: normalizeClass(unref(columnHandleIconClass)),
+						"aria-hidden": "true"
+					}, null, 2)], 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) => toggleSort(col)
 					}, [
 						createElementVNode("span", null, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]),
-						createElementVNode("span", _hoisted_5, toDisplayString(sortHint(col)), 1),
-						createElementVNode("span", _hoisted_6, [currentSortKey.value === col.key && currentSortDir.value === "asc" ? (openBlock(), createBlock(GrIcon_default, {
+						createElementVNode("span", _hoisted_6, toDisplayString(sortHint(col)), 1),
+						createElementVNode("span", _hoisted_7, [currentSortKey.value === col.key && currentSortDir.value === "asc" ? (openBlock(), createBlock(GrIcon_default, {
 							key: 0,
 							size: sortIconSize.value
 						}, {
@@ -527,70 +938,107 @@ var GrDataTable_default = /* @__PURE__ */ defineComponent({
 							default: withCtx(() => [createVNode(unref(arrow_down_default))]),
 							_: 1
 						}, 8, ["size"])) : createCommentVNode("", true)])
-					], 10, _hoisted_4)) : (openBlock(), createElementBlock("span", _hoisted_7, [renderSlot(_ctx.$slots, `header-${col.key}`, { column: col }, () => [createTextVNode(toDisplayString(col.label), 1)])]))], 2)], 14, _hoisted_3);
+					], 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": resizerValue(col),
+						"aria-valuemin": MIN_COLUMN_WIDTH,
+						"aria-valuetext": `${resizerValue(col)}px`,
+						onPointerdown: ($event) => onResizerPointerDown($event, String(col.key)),
+						onKeydown: ($event) => onResizerKeydown($event, String(col.key)),
+						onDblclick: ($event) => resetColumnWidth(String(col.key)),
+						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+					}, [createElementVNode("span", {
+						class: normalizeClass([
+							unref(columnResizerLineClass),
+							unref(columnResizerHoverClass),
+							resizingKey.value === 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_8, [createElementVNode("td", {
+				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])
-				}, [renderSlot(_ctx.$slots, "loading", {}, () => [createElementVNode("span", _hoisted_10, [createElementVNode("span", {
+				}, [renderSlot(_ctx.$slots, "loading", {}, () => [createElementVNode("span", _hoisted_12, [createElementVNode("span", {
 					class: normalizeClass(["i-lucide-loader-circle block animate-spin", spinnerClass.value]),
 					"aria-hidden": "true"
-				}, null, 2), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)])])], 10, _hoisted_9)])) : isEmpty.value ? (openBlock(), createElementBlock("tr", _hoisted_11, [createElementVNode("td", {
+				}, null, 2), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)])])], 10, _hoisted_11)])) : isEmpty.value ? (openBlock(), createElementBlock("tr", _hoisted_13, [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_12)])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-					__props.virtual && spacerBefore.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_13, [createElementVNode("td", {
+				}, [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", {
 						colspan: totalColumns.value,
 						style: normalizeStyle({
 							height: `${spacerBefore.value}px`,
 							padding: "0",
 							border: "0"
 						})
-					}, null, 12, _hoisted_14)])) : createCommentVNode("", true),
+					}, null, 12, _hoisted_16)])) : createCommentVNode("", true),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(renderedRows.value, ({ row, index }) => {
 						return openBlock(), createElementBlock("tr", mergeProps({
 							key: rowKeyValue(row),
 							ref_for: true,
 							ref: (el) => __props.virtual && unref(virtualizer).measure(index, el),
-							class: ["border-t border-[var(--gr-brd)]", [isRowSelected(row) ? "bg-[color-mix(in_srgb,var(--gr-primary)_8%,transparent)]" : "", rowClassName(row, index)]],
+							class: ["border-t border-[var(--gr-brd)]", [isRowSelected(row) ? unref(rowSelectedClass) : "", rowClassName(row, index)]],
 							"data-gr-datatable-row": "",
 							"data-row-key": rowKeyValue(row),
 							"data-selected": __props.selectable && 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]])
+							class: normalizeClass(["text-left", [
+								selectColumnClass.value,
+								cellClass.value,
+								hasPinnedLeft.value ? unref(columnPinnedClass) : "",
+								hasPinnedLeft.value && isRowSelected(row) ? unref(rowSelectedClass) : ""
+							]]),
+							style: normalizeStyle(hasPinnedLeft.value ? { left: "0px" } : void 0)
 						}, [isRowSelectable(row) ? (openBlock(), createBlock(GrCheckbox_default, {
 							key: 0,
 							"data-gr-datatable-select-row": "",
 							"model-value": isRowSelected(row),
 							size: checkboxSize.value,
 							"aria-label": unref(t)("gr.dataTable.selectRow", "Select row"),
-							onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+							onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
 							"onUpdate:modelValue": ($event) => toggleRow(row)
 						}, null, 8, [
 							"model-value",
 							"size",
 							"aria-label",
 							"onUpdate:modelValue"
-						])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+						])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(orderedColumns.value, (col, colIndex) => {
 							return openBlock(), createElementBlock("td", {
 								key: col.key,
-								class: normalizeClass([cellClass.value, cellAlign(col)])
+								class: normalizeClass([
+									cellClass.value,
+									cellAlign(col),
+									...pinnedCellClass(col, colIndex),
+									col.pinned && isRowSelected(row) ? unref(rowSelectedClass) : ""
+								]),
+								style: normalizeStyle({
+									...columnWidthStyle(widthOf(col)),
+									...pinnedStyleOf(col)
+								})
 							}, [renderSlot(_ctx.$slots, `cell-${col.key}`, {
 								row,
 								index
-							}, () => [createElementVNode("span", null, toDisplayString(cellValue(row, col.key)), 1)])], 2);
-						}), 128))], 16, _hoisted_15);
+							}, () => [createElementVNode("span", null, toDisplayString(cellValue(row, col.key)), 1)])], 6);
+						}), 128))], 16, _hoisted_17);
 					}), 128)),
-					__props.virtual && spacerAfter.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_16, [createElementVNode("td", {
+					__props.virtual && spacerAfter.value > 0 ? (openBlock(), createElementBlock("tr", _hoisted_18, [createElementVNode("td", {
 						colspan: totalColumns.value,
 						style: normalizeStyle({
 							height: `${spacerAfter.value}px`,
 							padding: "0",
 							border: "0"
 						})
-					}, null, 12, _hoisted_17)])) : createCommentVNode("", true)
+					}, null, 12, _hoisted_19)])) : createCommentVNode("", true)
 				], 64))]),
 				_: 2
 			}, [_ctx.$slots.footer ? {