Fix datatable header showing duplicate column names

This commit is contained in:
pa
2026-03-07 21:11:14 +09:00
parent 8f16685ffd
commit baf50d8a62
4 changed files with 19 additions and 12 deletions

View File

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

View File

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

View File

@@ -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 () => {

View File

@@ -539,7 +539,8 @@ export function useVrcxVueTable(options) {
function resetAll() {
columnSizing.value = {};
columnOrder.value = [];
removePersisted(['columnSizing', 'columnOrder']);
columnVisibility.value = {};
removePersisted(['columnSizing', 'columnOrder', 'columnVisibility']);
}
return {