fix: corregir formato de columnas UTable para compatibilidad con Nuxt UI v4
Some checks failed
build-and-deploy / deploy (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled

- 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:
2025-10-14 04:16:55 -06:00
parent 3c795404cf
commit 2f6331e809

View File

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