From baf50d8a62495d9e502bc989982e76788d3d100f Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sat, 7 Mar 2026 21:11:14 +0900
Subject: [PATCH] Fix datatable header showing duplicate column names

---
 src/components/NavMenu.vue                    |  2 +-
 .../ui/data-table/DataTableLayout.vue         |  6 ++++--
 .../table/__tests__/useVrcxVueTable.test.js   | 20 +++++++++++--------
 src/lib/table/useVrcxVueTable.js              |  3 ++-
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 8289af05..35250706 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -786,7 +786,7 @@
         transform: translateY(-50%);
     }
 
-    @container (max-width: 250px) {
+    @container (max-width: 220px) {
         .nav-shortcut-hint {
             display: none;
         }
diff --git a/src/components/ui/data-table/DataTableLayout.vue b/src/components/ui/data-table/DataTableLayout.vue
index 12072142..c6efc9c1 100644
--- a/src/components/ui/data-table/DataTableLayout.vue
+++ b/src/components/ui/data-table/DataTableLayout.vue
@@ -15,7 +15,7 @@
                             <TableHeader>
                                 <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                                     <template v-if="effectiveColumnReorder">
-                                        <DragDropProvider @dragEnd="onHeaderDragEnd">
+                                        <DragDropProvider :key="dndContextKey" @dragEnd="onHeaderDragEnd">
                                             <template v-for="(header, hIdx) in headerGroup.headers" :key="header.id">
                                                 <SortableTableHead
                                                     v-if="isReorderable(header)"
@@ -97,7 +97,7 @@
                             <TableHeader>
                                 <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                                     <template v-if="effectiveColumnReorder">
-                                        <DragDropProvider @dragEnd="onHeaderDragEnd">
+                                        <DragDropProvider :key="dndContextKey" @dragEnd="onHeaderDragEnd">
                                             <template v-for="(header, hIdx) in headerGroup.headers" :key="header.id">
                                                 <SortableTableHead
                                                     v-if="isReorderable(header)"
@@ -421,6 +421,8 @@
 
     const effectiveColumnReorder = computed(() => props.enableColumnReorder && tcColumnOrderLocked.value !== true);
 
+    const dndContextKey = computed(() => (props.table?.getVisibleLeafColumns?.() ?? []).map((c) => c.id).join(','));
+
     const emptyType = computed(() => {
         const totalRows = props.table?.getCoreRowModel?.().rows?.length ?? 0;
         return totalRows === 0 ? 'nodata' : 'nomatch';
diff --git a/src/lib/table/__tests__/useVrcxVueTable.test.js b/src/lib/table/__tests__/useVrcxVueTable.test.js
index fb5ff71c..9600fa51 100644
--- a/src/lib/table/__tests__/useVrcxVueTable.test.js
+++ b/src/lib/table/__tests__/useVrcxVueTable.test.js
@@ -333,29 +333,33 @@ describe('useVrcxVueTable persistence', () => {
         expect(stored?.pageSize).toBeUndefined();
     });
 
-    it('resetAll clears both columnSizing and columnOrder', async () => {
-        const { columnSizing, columnOrder, resetAll } = useVrcxVueTable({
-            data: [],
-            columns: makeColumns('name', 'date'),
-            persistKey: 'test-reset-all',
-            enableColumnResizing: true,
-            enableColumnReorder: true
-        });
+    it('resetAll clears columnSizing, columnOrder, and columnVisibility', async () => {
+        const { columnSizing, columnOrder, columnVisibility, resetAll } =
+            useVrcxVueTable({
+                data: [],
+                columns: makeColumns('name', 'date'),
+                persistKey: 'test-reset-all',
+                enableColumnResizing: true,
+                enableColumnReorder: true
+            });
 
         columnSizing.value = { name: 200 };
         columnOrder.value = ['date', 'name'];
+        columnVisibility.value = { name: false };
         await new Promise((r) => setTimeout(r, 300));
 
         resetAll();
 
         expect(columnSizing.value).toEqual({});
         expect(columnOrder.value).toEqual([]);
+        expect(columnVisibility.value).toEqual({});
 
         const stored = JSON.parse(
             localStorage.getItem('vrcx:table:test-reset-all')
         );
         expect(stored?.columnSizing).toBeUndefined();
         expect(stored?.columnOrder).toBeUndefined();
+        expect(stored?.columnVisibility).toBeUndefined();
     });
 
     it('persists columnOrderLocked to localStorage', async () => {
diff --git a/src/lib/table/useVrcxVueTable.js b/src/lib/table/useVrcxVueTable.js
index 683cbd00..71fc7c69 100644
--- a/src/lib/table/useVrcxVueTable.js
+++ b/src/lib/table/useVrcxVueTable.js
@@ -539,7 +539,8 @@ export function useVrcxVueTable(options) {
     function resetAll() {
         columnSizing.value = {};
         columnOrder.value = [];
-        removePersisted(['columnSizing', 'columnOrder']);
+        columnVisibility.value = {};
+        removePersisted(['columnSizing', 'columnOrder', 'columnVisibility']);
     }
 
     return {