From 2f6331e809679a80b676bed58a80f14783b61345 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 14 Oct 2025 04:16:55 -0600
Subject: [PATCH] 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
---
 nuxt4-app/app/pages/explorer.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/nuxt4-app/app/pages/explorer.vue b/nuxt4-app/app/pages/explorer.vue
index 4b0b1ba..8feacfe 100644
--- a/nuxt4-app/app/pages/explorer.vue
+++ b/nuxt4-app/app/pages/explorer.vue
@@ -122,23 +122,23 @@
           <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
             <label
               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)]"
             >
               <input
                 type="checkbox"
-                :checked="visibleColumns.includes(column.key)"
-                @change="toggleColumn(column.key)"
+                :checked="visibleColumns.includes(column.id)"
+                @change="toggleColumn(column.id)"
                 class="rounded"
               />
-              <span>{{ column.label }}</span>
+              <span>{{ column.header }}</span>
             </label>
           </div>
         </div>
 
         <!-- Table -->
         <UTable
-          :rows="paginatedData"
+          :data="paginatedData"
           :columns="displayColumns"
           :loading="loadingData"
         />
@@ -252,8 +252,9 @@ const tableColumns = computed(() => {
 
   const firstRow = tableData.value[0]
   const cols = Object.keys(firstRow).map(key => ({
-    key,
-    label: upperFirst(key)
+    accessorKey: key,
+    header: upperFirst(key),
+    id: key
   }))
   console.log('📊 tableColumns computed:', cols.length, 'columns')
   return cols
@@ -261,10 +262,11 @@ const tableColumns = computed(() => {
 
 const displayColumns = computed(() => {
   const filtered = tableColumns.value
-    .filter(col => visibleColumns.value.includes(col.key))
+    .filter(col => visibleColumns.value.includes(col.id))
     .map(col => ({
-      key: col.key,
-      label: col.label
+      accessorKey: col.accessorKey,
+      header: col.header,
+      id: col.id
     }))
   console.log('📊 displayColumns computed:', filtered.length, 'visible columns')
   return filtered