Fix datatable header showing duplicate column names

src/components/NavMenu.vue

@@ -786,7 +786,7 @@
         transform: translateY(-50%);
     }
 
-    @container (max-width: 250px) {
+    @container (max-width: 220px) {
         .nav-shortcut-hint {
             display: none;
         }

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';

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 () => {
+    it('resetAll clears columnSizing, columnOrder, and columnVisibility', async () => {
-        const { columnSizing, columnOrder, resetAll } = useVrcxVueTable({
+        const { columnSizing, columnOrder, columnVisibility, resetAll } =
-            data: [],
+            useVrcxVueTable({
-            columns: makeColumns('name', 'date'),
+                data: [],
-            persistKey: 'test-reset-all',
+                columns: makeColumns('name', 'date'),
-            enableColumnResizing: true,
+                persistKey: 'test-reset-all',
-            enableColumnReorder: true
+                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 () => {

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 {