From 14ed329214d9060412a1cdb400d8dd75b424d1f7 Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Tue, 18 Aug 2026 23:07:52 +0200
Subject: [PATCH 1/6] feat: resize and change columns order

---
 client/bun.lock                               |   9 +
 client/package.json                           |   3 +
 client/src/components/page/DataTable.vue      | 211 ++++++++++++++----
 .../ui/resizable/ResizableHandle.vue          |   2 +-
 client/src/composables/openadmin-table.ts     |   2 +
 client/src/lib/data-table.ts                  |   4 +
 6 files changed, 191 insertions(+), 40 deletions(-)

diff --git a/client/bun.lock b/client/bun.lock
index 01fa29e..178ddd1 100644
--- a/client/bun.lock
+++ b/client/bun.lock
@@ -14,11 +14,13 @@
         "@tanstack/vue-table": "^9.1.2",
         "@unovis/vue": "^1.6.7",
         "@vueuse/core": "^14.4.0",
+        "@vueuse/integrations": "^14.4.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.4.13",
         "marked": "^18.0.9",
         "reka-ui": "^2.10.3",
+        "sortablejs": "^1.15.7",
         "tailwind-merge": "^3.6.0",
         "tailwindcss": "^4.3.3",
         "vue": "^3.5.40",
@@ -30,6 +32,7 @@
         "@biomejs/biome": "^2.5.7",
         "@iconify/vue": "^5.0.1",
         "@types/node": "^26.2.0",
+        "@types/sortablejs": "^1.15.9",
         "@vitejs/plugin-vue": "^6.0.8",
         "@vue/tsconfig": "^0.9.1",
         "tw-animate-css": "^1.4.0",
@@ -324,6 +327,8 @@
 
     "@types/pbf": ["@types/pbf@3.0.5", "", {}, "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA=="],
 
+    "@types/sortablejs": ["@types/sortablejs@1.15.9", "", {}, "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ=="],
+
     "@types/supercluster": ["@types/supercluster@5.0.3", "", { "dependencies": { "@types/geojson": "*" } }, "sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg=="],
 
     "@types/three": ["@types/three@0.135.0", "", {}, "sha512-l7WLhIHjhHMtlpyTSltPPAKLpiMwgMD1hXHj59AVUpYRoZP7Fd9NNOSRSvZBCPLpTHPYojgQvSJCoza9zoL7bg=="],
@@ -392,6 +397,8 @@
 
     "@vueuse/core": ["@vueuse/core@14.4.0", "", { "dependencies": { "@types/web-bluetooth": "^0.0.21", "@vueuse/metadata": "14.4.0", "@vueuse/shared": "14.4.0" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ=="],
 
+    "@vueuse/integrations": ["@vueuse/integrations@14.4.0", "", { "dependencies": { "@vueuse/core": "14.4.0", "@vueuse/shared": "14.4.0" }, "peerDependencies": { "async-validator": "^4", "axios": "^1", "change-case": "^5", "drauu": "^0.4", "focus-trap": "^7 || ^8", "fuse.js": "^7", "idb-keyval": "^6", "jwt-decode": "^4", "nprogress": "^0.2", "qrcode": "^1.5", "sortablejs": "^1", "universal-cookie": "^7 || ^8", "vue": "^3.5.0" }, "optionalPeers": ["async-validator", "axios", "change-case", "drauu", "focus-trap", "fuse.js", "idb-keyval", "jwt-decode", "nprogress", "qrcode", "sortablejs", "universal-cookie"] }, "sha512-oJz9qTgczvA7L1nXQFRU7h8tQbOCoiceqvMMhT9XYMyOGTqLJ2rEa09PON+nD2t48sZUfeOmg4eaWJXV4sZb/w=="],
+
     "@vueuse/metadata": ["@vueuse/metadata@14.4.0", "", {}, "sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g=="],
 
     "@vueuse/shared": ["@vueuse/shared@14.4.0", "", { "peerDependencies": { "vue": "^3.5.0" } }, "sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g=="],
@@ -692,6 +699,8 @@
 
     "scule": ["scule@1.3.0", "", {}, "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="],
 
+    "sortablejs": ["sortablejs@1.15.7", "", {}, "sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A=="],
+
     "source-map": ["source-map@0.5.7", "", {}, "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
diff --git a/client/package.json b/client/package.json
index af66873..b417168 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,11 +25,13 @@
 		"@tanstack/vue-table": "^9.1.2",
 		"@unovis/vue": "^1.6.7",
 		"@vueuse/core": "^14.4.0",
+		"@vueuse/integrations": "^14.4.0",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"dompurify": "^3.4.13",
 		"marked": "^18.0.9",
 		"reka-ui": "^2.10.3",
+		"sortablejs": "^1.15.7",
 		"tailwind-merge": "^3.6.0",
 		"tailwindcss": "^4.3.3",
 		"vue": "^3.5.40",
@@ -41,6 +43,7 @@
 		"@biomejs/biome": "^2.5.7",
 		"@iconify/vue": "^5.0.1",
 		"@types/node": "^26.2.0",
+		"@types/sortablejs": "^1.15.9",
 		"@vitejs/plugin-vue": "^6.0.8",
 		"@vue/tsconfig": "^0.9.1",
 		"tw-animate-css": "^1.4.0",
diff --git a/client/src/components/page/DataTable.vue b/client/src/components/page/DataTable.vue
index bc34fda..7c1799d 100644
--- a/client/src/components/page/DataTable.vue
+++ b/client/src/components/page/DataTable.vue
@@ -5,9 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <script setup lang="ts" generic="TData extends RowData">
-import type { ColumnDef, RowData } from "@tanstack/vue-table"
-import { FlexRender, useTable as useTanStackTable } from "@tanstack/vue-table"
 import { Columns3 } from "@lucide/vue"
+import type { Cell, ColumnDef, Header, HeaderGroup, Row, RowData } from "@tanstack/vue-table"
+import { FlexRender, useTable as useTanStackTable } from "@tanstack/vue-table"
+import { moveArrayElement, useSortable } from "@vueuse/integrations/useSortable"
+import { type ComponentPublicInstance, computed } from "vue"
 import { Button } from "@/components/ui/button"
 import {
 	DropdownMenu,
@@ -15,15 +17,8 @@ import {
 	DropdownMenuContent,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table"
-import { features, type DataTableFeatures } from "@/lib/data-table"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
+import { type DataTableFeatures, features } from "@/lib/data-table"
 
 const props = defineProps<{
 	columns: ColumnDef<DataTableFeatures, TData>[]
@@ -43,6 +38,70 @@ const table = useTanStackTable({
 		return props.manualPagination
 	},
 })
+
+const FIXED_COLUMN_IDS = new Set(["__select__", "__actions__"])
+
+type TableHeaderGroup = HeaderGroup<DataTableFeatures, TData>
+type TableHeader = Header<DataTableFeatures, TData>
+type TableRow = Row<DataTableFeatures, TData>
+
+const getHeader = (headerGroup: TableHeaderGroup, id: string): TableHeader | undefined =>
+	headerGroup.headers.find((header) => header.column.id === id)
+
+const getDataHeaders = (headerGroup: TableHeaderGroup): TableHeader[] =>
+	headerGroup.headers.filter((header) => !FIXED_COLUMN_IDS.has(header.column.id))
+
+const getCell = (row: TableRow, id: string): Cell<DataTableFeatures, TData> | undefined =>
+	row.getVisibleCells().find((cell) => cell.column.id === id)
+
+const getDataCells = (row: TableRow) =>
+	row.getVisibleCells().filter((cell) => !FIXED_COLUMN_IDS.has(cell.column.id))
+
+const onLayout = (headerGroup: TableHeaderGroup, sizes: number[]) => {
+	const dataHeaders = getDataHeaders(headerGroup)
+	table.setColumnSizing((previous) => ({
+		...previous,
+		...Object.fromEntries(dataHeaders.map((header, index) => [header.column.id, sizes[index]])),
+	}))
+}
+
+const dataColumnIds = computed<string[]>({
+	get: () => {
+		const headerGroup = table.getHeaderGroups()[0]
+		return headerGroup ? getDataHeaders(headerGroup).map((header) => header.column.id) : []
+	},
+	set: (ids) => {
+		const headerGroup = table.getHeaderGroups()[0]
+		if (!headerGroup) return
+
+		let cursor = 0
+		table.setColumnOrder(
+			headerGroup.headers.map((header) =>
+				FIXED_COLUMN_IDS.has(header.column.id) ? header.column.id : ids[cursor++],
+			),
+		)
+	},
+})
+
+let headerRowEl: HTMLElement | null = null
+
+const setHeaderRowEl = (component: ComponentPublicInstance | Element | null) => {
+	headerRowEl = ((component as ComponentPublicInstance | null)?.$el ??
+		component) as HTMLElement | null
+}
+
+useSortable(() => headerRowEl, dataColumnIds, {
+	draggable: "[data-column-header]",
+	animation: 150,
+	// The default `onUpdate` reorders using `oldIndex`/`newIndex`, which count every DOM
+	// child including the interleaved `ResizableHandle` elements. We only want the index
+	// among `[data-column-header]` items, so re-run it with the *Draggable* variants.
+	onUpdate: (event) => {
+		const { oldDraggableIndex, newDraggableIndex } = event
+		if (oldDraggableIndex == null || newDraggableIndex == null) return
+		moveArrayElement(dataColumnIds, oldDraggableIndex, newDraggableIndex, event)
+	},
+})
 </script>
 
 <template>
@@ -70,36 +129,110 @@ const table = useTanStackTable({
 			</DropdownMenu>
 		</div>
 
-		<div class="border rounded-md">
-			<Table>
-				<TableHeader>
-					<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-						<TableHead v-for="header in headerGroup.headers" :key="header.id">
-							<FlexRender v-if="!header.isPlaceholder" :header="header" />
-						</TableHead>
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					<template v-if="table.getRowModel().rows?.length">
-						<TableRow
-							v-for="row in table.getRowModel().rows"
-							:key="row.id"
-							:data-state="row.getIsSelected() && 'selected'"
+		<div class="rounded-md border overflow-hidden" role="table">
+			<div role="rowgroup">
+				<div
+					v-for="headerGroup in table.getHeaderGroups()"
+					:key="headerGroup.id"
+					role="row"
+					class="bg-muted/60 flex border-b"
+				>
+					<div
+						v-if="getHeader(headerGroup, '__select__')"
+						role="columnheader"
+						class="text-muted-foreground flex h-10 w-10 shrink-0 items-center px-4 text-xs font-semibold tracking-wide [&:has([role=checkbox])]:pr-0"
+					>
+						<FlexRender :header="getHeader(headerGroup, '__select__')!" />
+					</div>
+
+					<ResizablePanelGroup
+						:ref="setHeaderRowEl"
+						direction="horizontal"
+						class="h-10 flex-1"
+						@layout="(sizes) => onLayout(headerGroup, sizes)"
+					>
+						<template v-for="(header, index) in getDataHeaders(headerGroup)" :key="header.id">
+							<ResizableHandle
+								v-if="index > 0"
+								with-handle
+								class="opacity-0 transition-opacity focus-visible:opacity-100 data-[state=hover]:opacity-100 data-[state=drag]:opacity-100"
+							/>
+							<ResizablePanel
+								:default-size="header.getSize()"
+								:min-size="10"
+								data-column-header
+								class="min-w-0"
+							>
+								<div
+									role="columnheader"
+									class="text-muted-foreground flex h-10 min-w-0 cursor-grab items-center truncate px-4 text-xs font-semibold tracking-wide active:cursor-grabbing"
+								>
+									<FlexRender v-if="!header.isPlaceholder" :header="header" />
+								</div>
+							</ResizablePanel>
+						</template>
+					</ResizablePanelGroup>
+
+					<div
+						v-if="getHeader(headerGroup, '__actions__')"
+						role="columnheader"
+						class="flex h-10 w-14 shrink-0 items-center justify-end px-4"
+					>
+						<FlexRender
+							v-if="!getHeader(headerGroup, '__actions__')!.isPlaceholder"
+							:header="getHeader(headerGroup, '__actions__')!"
+						/>
+					</div>
+				</div>
+			</div>
+
+			<div role="rowgroup">
+				<template v-if="table.getRowModel().rows?.length">
+					<div
+						v-for="row in table.getRowModel().rows"
+						:key="row.id"
+						role="row"
+						:data-state="row.getIsSelected() && 'selected'"
+						class="data-[state=selected]:bg-muted flex border-b transition-colors last:border-0 hover:bg-muted/50"
+					>
+						<div
+							v-if="getCell(row, '__select__')"
+							role="cell"
+							class="flex w-10 shrink-0 items-center px-4 py-3 [&:has([role=checkbox])]:pr-0"
 						>
-							<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+							<FlexRender :cell="getCell(row, '__select__')!" />
+						</div>
+
+						<div class="flex min-w-0 flex-1">
+							<div
+								v-for="cell in getDataCells(row)"
+								:key="cell.id"
+								role="cell"
+								class="flex min-w-0 items-center truncate px-4 py-3"
+								:style="{ width: `${cell.column.getSize()}%` }"
+							>
 								<FlexRender :cell="cell" />
-							</TableCell>
-						</TableRow>
-					</template>
-					<template v-else>
-						<TableRow>
-							<TableCell :colspan="columns.length" class="h-24 text-center">
-								No results.
-							</TableCell>
-						</TableRow>
-					</template>
-				</TableBody>
-			</Table>
+							</div>
+						</div>
+
+						<div
+							v-if="getCell(row, '__actions__')"
+							role="cell"
+							class="flex w-14 shrink-0 items-center justify-end px-4 py-3"
+						>
+							<FlexRender :cell="getCell(row, '__actions__')!" />
+						</div>
+					</div>
+				</template>
+				<template v-else>
+					<div
+						role="row"
+						class="flex h-24 items-center justify-center text-sm text-muted-foreground"
+					>
+						No results.
+					</div>
+				</template>
+			</div>
 		</div>
 
 		<div class="text-sm text-muted-foreground">
diff --git a/client/src/components/ui/resizable/ResizableHandle.vue b/client/src/components/ui/resizable/ResizableHandle.vue
index a804c38..ff488dc 100644
--- a/client/src/components/ui/resizable/ResizableHandle.vue
+++ b/client/src/components/ui/resizable/ResizableHandle.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :class="cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)"
   >
     <template v-if="props.withHandle">
-      <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+      <div class="bg-accent z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
         <slot>
           <GripVertical class="size-2.5" />
         </slot>
diff --git a/client/src/composables/openadmin-table.ts b/client/src/composables/openadmin-table.ts
index c8d766f..15ab330 100644
--- a/client/src/composables/openadmin-table.ts
+++ b/client/src/composables/openadmin-table.ts
@@ -142,6 +142,8 @@ export const useTable = ({
 
 				return columnHelper.value.accessor((row) => row[key], {
 					id: key,
+					size: 100 / (columnKeys.value.length || 1),
+					minSize: 10,
 					header: () =>
 						h("div", { class: "flex items-center gap-1.5" }, [
 							column?.icon
diff --git a/client/src/lib/data-table.ts b/client/src/lib/data-table.ts
index f90fe72..a94c6d0 100644
--- a/client/src/lib/data-table.ts
+++ b/client/src/lib/data-table.ts
@@ -4,6 +4,8 @@
 
 import {
 	columnFilteringFeature,
+	columnOrderingFeature,
+	columnSizingFeature,
 	columnVisibilityFeature,
 	createExpandedRowModel,
 	createFilteredRowModel,
@@ -21,6 +23,8 @@ import {
 
 export const features = tableFeatures({
 	columnFilteringFeature,
+	columnOrderingFeature,
+	columnSizingFeature,
 	columnVisibilityFeature,
 	rowExpandingFeature,
 	rowPaginationFeature,

From ec2ff2247835761be7698db14b07e30363be8172 Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Tue, 18 Aug 2026 23:09:38 +0200
Subject: [PATCH 2/6] ref

---
 client/src/components/page/DataTable.vue | 31 +++++++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/components/page/DataTable.vue b/client/src/components/page/DataTable.vue
index 7c1799d..71136f2 100644
--- a/client/src/components/page/DataTable.vue
+++ b/client/src/components/page/DataTable.vue
@@ -9,7 +9,7 @@ import { Columns3 } from "@lucide/vue"
 import type { Cell, ColumnDef, Header, HeaderGroup, Row, RowData } from "@tanstack/vue-table"
 import { FlexRender, useTable as useTanStackTable } from "@tanstack/vue-table"
 import { moveArrayElement, useSortable } from "@vueuse/integrations/useSortable"
-import { type ComponentPublicInstance, computed } from "vue"
+import { type ComponentPublicInstance, computed, ref } from "vue"
 import { Button } from "@/components/ui/button"
 import {
 	DropdownMenu,
@@ -54,8 +54,15 @@ const getDataHeaders = (headerGroup: TableHeaderGroup): TableHeader[] =>
 const getCell = (row: TableRow, id: string): Cell<DataTableFeatures, TData> | undefined =>
 	row.getVisibleCells().find((cell) => cell.column.id === id)
 
-const getDataCells = (row: TableRow) =>
-	row.getVisibleCells().filter((cell) => !FIXED_COLUMN_IDS.has(cell.column.id))
+const previewOrder = ref<string[] | null>(null)
+
+const getDataCells = (row: TableRow) => {
+	const cells = row.getVisibleCells().filter((cell) => !FIXED_COLUMN_IDS.has(cell.column.id))
+	if (!previewOrder.value) return cells
+
+	const cellsById = new Map(cells.map((cell) => [cell.column.id, cell]))
+	return previewOrder.value.map((id) => cellsById.get(id)).filter((cell) => cell != null)
+}
 
 const onLayout = (headerGroup: TableHeaderGroup, sizes: number[]) => {
 	const dataHeaders = getDataHeaders(headerGroup)
@@ -90,9 +97,25 @@ const setHeaderRowEl = (component: ComponentPublicInstance | Element | null) =>
 		component) as HTMLElement | null
 }
 
+// While a header is being dragged, SortableJS already moves the header's own DOM node
+// live. Mirror that same live position into the row cells below by reading the current
+// drag order straight off the DOM (each panel carries its column id in `data-column-header`).
+const readDraggedOrder = (): string[] =>
+	headerRowEl
+		? Array.from(headerRowEl.querySelectorAll<HTMLElement>("[data-column-header]")).map(
+				(el) => el.dataset.columnHeader ?? "",
+			)
+		: []
+
 useSortable(() => headerRowEl, dataColumnIds, {
 	draggable: "[data-column-header]",
 	animation: 150,
+	onChange: () => {
+		previewOrder.value = readDraggedOrder()
+	},
+	onEnd: () => {
+		previewOrder.value = null
+	},
 	// The default `onUpdate` reorders using `oldIndex`/`newIndex`, which count every DOM
 	// child including the interleaved `ResizableHandle` elements. We only want the index
 	// among `[data-column-header]` items, so re-run it with the *Draggable* variants.
@@ -160,7 +183,7 @@ useSortable(() => headerRowEl, dataColumnIds, {
 							<ResizablePanel
 								:default-size="header.getSize()"
 								:min-size="10"
-								data-column-header
+								:data-column-header="header.column.id"
 								class="min-w-0"
 							>
 								<div

From 3601571c47869f61be5b2617de37f1f4836daebe Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Tue, 18 Aug 2026 23:12:18 +0200
Subject: [PATCH 3/6] ref

---
 client/src/components/page/DataTable.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/components/page/DataTable.vue b/client/src/components/page/DataTable.vue
index 71136f2..b8ab06a 100644
--- a/client/src/components/page/DataTable.vue
+++ b/client/src/components/page/DataTable.vue
@@ -55,6 +55,7 @@ const getCell = (row: TableRow, id: string): Cell<DataTableFeatures, TData> | un
 	row.getVisibleCells().find((cell) => cell.column.id === id)
 
 const previewOrder = ref<string[] | null>(null)
+const draggedColumnId = ref<string | null>(null)
 
 const getDataCells = (row: TableRow) => {
 	const cells = row.getVisibleCells().filter((cell) => !FIXED_COLUMN_IDS.has(cell.column.id))
@@ -110,11 +111,15 @@ const readDraggedOrder = (): string[] =>
 useSortable(() => headerRowEl, dataColumnIds, {
 	draggable: "[data-column-header]",
 	animation: 150,
+	onStart: (event) => {
+		draggedColumnId.value = event.item.dataset.columnHeader ?? null
+	},
 	onChange: () => {
 		previewOrder.value = readDraggedOrder()
 	},
 	onEnd: () => {
 		previewOrder.value = null
+		draggedColumnId.value = null
 	},
 	// The default `onUpdate` reorders using `oldIndex`/`newIndex`, which count every DOM
 	// child including the interleaved `ResizableHandle` elements. We only want the index
@@ -189,6 +194,7 @@ useSortable(() => headerRowEl, dataColumnIds, {
 								<div
 									role="columnheader"
 									class="text-muted-foreground flex h-10 min-w-0 cursor-grab items-center truncate px-4 text-xs font-semibold tracking-wide active:cursor-grabbing"
+									:class="{ 'bg-muted': header.column.id === draggedColumnId }"
 								>
 									<FlexRender v-if="!header.isPlaceholder" :header="header" />
 								</div>
@@ -232,6 +238,7 @@ useSortable(() => headerRowEl, dataColumnIds, {
 								:key="cell.id"
 								role="cell"
 								class="flex min-w-0 items-center truncate px-4 py-3"
+								:class="{ 'bg-muted': cell.column.id === draggedColumnId }"
 								:style="{ width: `${cell.column.getSize()}%` }"
 							>
 								<FlexRender :cell="cell" />

From 83350097ce760cfcc6873a04c3d0ff752d4e8665 Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Tue, 18 Aug 2026 23:19:37 +0200
Subject: [PATCH 4/6] ref

---
 client/src/components/page/DataTable.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/page/DataTable.vue b/client/src/components/page/DataTable.vue
index b8ab06a..fcb438b 100644
--- a/client/src/components/page/DataTable.vue
+++ b/client/src/components/page/DataTable.vue
@@ -57,12 +57,14 @@ const getCell = (row: TableRow, id: string): Cell<DataTableFeatures, TData> | un
 const previewOrder = ref<string[] | null>(null)
 const draggedColumnId = ref<string | null>(null)
 
+// `row.getVisibleCells()` is always built from the columns' original definition order —
+// unlike headers, cells don't follow `table.setColumnOrder(...)` on their own. Reorder
+// them ourselves against the same order the headers use (or the live drag preview).
 const getDataCells = (row: TableRow) => {
 	const cells = row.getVisibleCells().filter((cell) => !FIXED_COLUMN_IDS.has(cell.column.id))
-	if (!previewOrder.value) return cells
-
 	const cellsById = new Map(cells.map((cell) => [cell.column.id, cell]))
-	return previewOrder.value.map((id) => cellsById.get(id)).filter((cell) => cell != null)
+	const order = previewOrder.value ?? dataColumnIds.value
+	return order.map((id) => cellsById.get(id)).filter((cell) => cell != null)
 }
 
 const onLayout = (headerGroup: TableHeaderGroup, sizes: number[]) => {

From 95e55411a8b9f321c59fb31ca87c8180f118c792 Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Tue, 18 Aug 2026 23:19:44 +0200
Subject: [PATCH 5/6] ref

---
 client/src/components/page/DataTable.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/client/src/components/page/DataTable.vue b/client/src/components/page/DataTable.vue
index fcb438b..4fe5143 100644
--- a/client/src/components/page/DataTable.vue
+++ b/client/src/components/page/DataTable.vue
@@ -57,9 +57,6 @@ const getCell = (row: TableRow, id: string): Cell<DataTableFeatures, TData> | un
 const previewOrder = ref<string[] | null>(null)
 const draggedColumnId = ref<string | null>(null)
 
-// `row.getVisibleCells()` is always built from the columns' original definition order —
-// unlike headers, cells don't follow `table.setColumnOrder(...)` on their own. Reorder
-// them ourselves against the same order the headers use (or the live drag preview).
 const getDataCells = (row: TableRow) => {
 	const cells = row.getVisibleCells().filter((cell) => !FIXED_COLUMN_IDS.has(cell.column.id))
 	const cellsById = new Map(cells.map((cell) => [cell.column.id, cell]))
@@ -100,9 +97,6 @@ const setHeaderRowEl = (component: ComponentPublicInstance | Element | null) =>
 		component) as HTMLElement | null
 }
 
-// While a header is being dragged, SortableJS already moves the header's own DOM node
-// live. Mirror that same live position into the row cells below by reading the current
-// drag order straight off the DOM (each panel carries its column id in `data-column-header`).
 const readDraggedOrder = (): string[] =>
 	headerRowEl
 		? Array.from(headerRowEl.querySelectorAll<HTMLElement>("[data-column-header]")).map(
@@ -123,9 +117,7 @@ useSortable(() => headerRowEl, dataColumnIds, {
 		previewOrder.value = null
 		draggedColumnId.value = null
 	},
-	// The default `onUpdate` reorders using `oldIndex`/`newIndex`, which count every DOM
-	// child including the interleaved `ResizableHandle` elements. We only want the index
-	// among `[data-column-header]` items, so re-run it with the *Draggable* variants.
+
 	onUpdate: (event) => {
 		const { oldDraggableIndex, newDraggableIndex } = event
 		if (oldDraggableIndex == null || newDraggableIndex == null) return

From 9ff41250245dc77f517c87fac6159e1f088d3e2b Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Tue, 18 Aug 2026 23:22:06 +0200
Subject: [PATCH 6/6] ref

---
 client/src/components/page/DataTable.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/client/src/components/page/DataTable.vue b/client/src/components/page/DataTable.vue
index 4fe5143..732a532 100644
--- a/client/src/components/page/DataTable.vue
+++ b/client/src/components/page/DataTable.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 import { Columns3 } from "@lucide/vue"
 import type { Cell, ColumnDef, Header, HeaderGroup, Row, RowData } from "@tanstack/vue-table"
 import { FlexRender, useTable as useTanStackTable } from "@tanstack/vue-table"
-import { moveArrayElement, useSortable } from "@vueuse/integrations/useSortable"
+import { useSortable } from "@vueuse/integrations/useSortable"
 import { type ComponentPublicInstance, computed, ref } from "vue"
 import { Button } from "@/components/ui/button"
 import {
@@ -114,15 +114,20 @@ useSortable(() => headerRowEl, dataColumnIds, {
 		previewOrder.value = readDraggedOrder()
 	},
 	onEnd: () => {
+		// Commit whatever order the DOM actually ended up in, rather than replaying
+		// SortableJS's oldIndex/newIndex math ourselves — that counts every sibling
+		// (including the interleaved `ResizableHandle`s) and drifted out of sync with
+		// `dataColumnIds`, producing the wrong final order.
+		const finalOrder = readDraggedOrder()
+		if (finalOrder.length === dataColumnIds.value.length) {
+			dataColumnIds.value = finalOrder
+		}
 		previewOrder.value = null
 		draggedColumnId.value = null
 	},
-
-	onUpdate: (event) => {
-		const { oldDraggableIndex, newDraggableIndex } = event
-		if (oldDraggableIndex == null || newDraggableIndex == null) return
-		moveArrayElement(dataColumnIds, oldDraggableIndex, newDraggableIndex, event)
-	},
+	// The default `onUpdate` would also try to commit a reorder using the mismatched
+	// oldIndex/newIndex above; disable it so only the `onEnd` commit above applies.
+	onUpdate: () => {},
 })
 </script>