fix: corregir formato de columnas UTable para compatibilidad con Nuxt UI v4
- Cambiar estructura de columnas de {key, label} a {accessorKey, header, id}
- Cambiar prop :rows a :data en componente UTable
- Actualizar referencias en selector de columnas
This commit is contained in:
@@ -122,23 +122,23 @@
|
|||||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||||
<label
|
<label
|
||||||
v-for="column in tableColumns"
|
v-for="column in tableColumns"
|
||||||
:key="column.key"
|
:key="column.id"
|
||||||
class="flex items-center gap-2 text-sm cursor-pointer hover:text-[var(--brand-text)]"
|
class="flex items-center gap-2 text-sm cursor-pointer hover:text-[var(--brand-text)]"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:checked="visibleColumns.includes(column.key)"
|
:checked="visibleColumns.includes(column.id)"
|
||||||
@change="toggleColumn(column.key)"
|
@change="toggleColumn(column.id)"
|
||||||
class="rounded"
|
class="rounded"
|
||||||
/>
|
/>
|
||||||
<span>{{ column.label }}</span>
|
<span>{{ column.header }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Table -->
|
<!-- Table -->
|
||||||
<UTable
|
<UTable
|
||||||
:rows="paginatedData"
|
:data="paginatedData"
|
||||||
:columns="displayColumns"
|
:columns="displayColumns"
|
||||||
:loading="loadingData"
|
:loading="loadingData"
|
||||||
/>
|
/>
|
||||||
@@ -252,8 +252,9 @@ const tableColumns = computed(() => {
|
|||||||
|
|
||||||
const firstRow = tableData.value[0]
|
const firstRow = tableData.value[0]
|
||||||
const cols = Object.keys(firstRow).map(key => ({
|
const cols = Object.keys(firstRow).map(key => ({
|
||||||
key,
|
accessorKey: key,
|
||||||
label: upperFirst(key)
|
header: upperFirst(key),
|
||||||
|
id: key
|
||||||
}))
|
}))
|
||||||
console.log('📊 tableColumns computed:', cols.length, 'columns')
|
console.log('📊 tableColumns computed:', cols.length, 'columns')
|
||||||
return cols
|
return cols
|
||||||
@@ -261,10 +262,11 @@ const tableColumns = computed(() => {
|
|||||||
|
|
||||||
const displayColumns = computed(() => {
|
const displayColumns = computed(() => {
|
||||||
const filtered = tableColumns.value
|
const filtered = tableColumns.value
|
||||||
.filter(col => visibleColumns.value.includes(col.key))
|
.filter(col => visibleColumns.value.includes(col.id))
|
||||||
.map(col => ({
|
.map(col => ({
|
||||||
key: col.key,
|
accessorKey: col.accessorKey,
|
||||||
label: col.label
|
header: col.header,
|
||||||
|
id: col.id
|
||||||
}))
|
}))
|
||||||
console.log('📊 displayColumns computed:', filtered.length, 'visible columns')
|
console.log('📊 displayColumns computed:', filtered.length, 'visible columns')
|
||||||
return filtered
|
return filtered
|
||||||
|
|||||||
Reference in New Issue
Block a user