mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 22:33:50 +02:00
Fix datatable header showing duplicate column names
This commit is contained in:
@@ -786,7 +786,7 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@container (max-width: 250px) {
|
||||
@container (max-width: 220px) {
|
||||
.nav-shortcut-hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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 () => {
|
||||
|
||||
@@ -539,7 +539,8 @@ export function useVrcxVueTable(options) {
|
||||
function resetAll() {
|
||||
columnSizing.value = {};
|
||||
columnOrder.value = [];
|
||||
removePersisted(['columnSizing', 'columnOrder']);
|
||||
columnVisibility.value = {};
|
||||
removePersisted(['columnSizing', 'columnOrder', 'columnVisibility']);
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user