@innertia-solutions/innertia-nuxt 0.1.11 → 0.1.13

package/components/Table/index.vue

@@ -1,13 +1,12 @@
 <script setup>
 import { useVueTable, getCoreRowModel } from '@tanstack/vue-table'
 import {
-  IconSelector,
-  IconChevronUp,
-  IconChevronDown,
   IconReload,
   IconBolt,
-  IconPin,
 } from '@tabler/icons-vue'
+import ViewTable from './views/ViewTable.vue'
+import ViewCards from './views/ViewCards.vue'
+import ViewDatabase from './views/ViewDatabase.vue'
 
 const props = defineProps({
   endpoint: { type: String, required: true },
@@ -18,12 +17,20 @@ const props = defineProps({
   name: { type: String, required: true },
   cached: { type: Boolean, default: false },
   showReloadButton: { type: Boolean, default: true },
-  viewMode: { type: String, default: 'table' }, // 'table' | 'grid'
+  /** 'bottom' (default) | 'top' — posición de la barra de paginación + reload + total + instant. */
+  infoPosition:     { type: String, default: 'bottom' },
+  /** Mostrar el selector "Filas: 10/25/50/100/Otro...". Default false. */
+  showPerPage:      { type: Boolean, default: false },
+  /** 'table' | 'cards' | 'database' | 'grid' (legacy → maps to cards) */
+  viewMode: { type: String, default: 'table' },
   gridClass: { type: String, default: 'grid grid-cols-2 lg:grid-cols-3 gap-4' },
   clickRowToOpen:  { type: Boolean, default: false },
   previewRowId:    { type: [String, Number], default: null },
   previewMode:     { type: Boolean, default: false },
   pinnedColumns:   { type: Object, default: null }, // { left?: string[], right?: string[] }
+  /** Mutation function for database inline editing: async (row, colKey, value) => void */
+  updateMutation:  { type: Function, default: null },
+  bordered:        { type: Boolean, default: true },
 })
 
 const emit = defineEmits(['update:search', 'row-click', 'loaded', 'page-change', 'per-page-change'])
@@ -40,13 +47,54 @@ const loading = ref(false)
 const isDataFromCache = ref(false)
 const lastDataLength = ref(-1)
 const lastRowHeight = ref(48)
-const tableBodyRef = ref(null)
+const viewTableRef = ref(null)
 const paginationBarRef = ref(null)
 const skeletonRows = computed(() => {
   const count = lastDataLength.value < 0 ? pagination.value.pageSize : lastDataLength.value
   return Array.from({ length: count })
 })
-const isGridView = computed(() => props.viewMode === 'grid')
+
+// Backward compat: 'grid' maps to 'cards'
+const currentView = computed(() => {
+  const v = props.viewMode
+  if (v === 'grid') return 'cards'
+  return v // 'table' | 'cards' | 'database'
+})
+
+// ─── Inline editing state (used by ViewDatabase) ──────────────────────────────
+const editingCell = ref(null)   // { rowId, colKey } | null
+const editingValue = ref('')
+const savingCell = ref(null)    // { rowId, colKey } | null
+const cellError = ref(null)     // { rowId, colKey, message } | null
+
+const startEdit = (row, col) => {
+  editingCell.value = { rowId: row.id, colKey: col.column.id }
+  editingValue.value = String(col.getValue() ?? '')
+  cellError.value = null
+}
+
+const cancelEdit = () => {
+  editingCell.value = null
+  editingValue.value = ''
+  cellError.value = null
+}
+
+const saveEdit = async (row, col) => {
+  if (!props.updateMutation || !editingCell.value) return
+  const { rowId, colKey } = editingCell.value
+  const value = editingValue.value
+  editingCell.value = null
+  editingValue.value = ''
+  savingCell.value = { rowId, colKey }
+  cellError.value = null
+  try {
+    await props.updateMutation(row.original, colKey, value)
+  } catch (e) {
+    cellError.value = { rowId, colKey, message: e?.message ?? 'Error al guardar' }
+  } finally {
+    savingCell.value = null
+  }
+}
 
 // ─── TanStack state ───────────────────────────────────────────────────────────
 const pagination = ref({ pageIndex: 0, pageSize: 10 })
@@ -90,7 +138,13 @@ const buildColumnDefs = () => {
       size: col.size ?? 200,
       minSize: 60,
       maxSize: 800,
-      meta: { class: col.class ?? '', label: col.label },
+      meta: {
+        class: col.class ?? '',
+        label: col.label,
+        editable: col.editable ?? false,
+        type: col.type ?? 'text',
+        options: col.options ?? [],
+      },
     })
   }
   return defs
@@ -147,10 +201,6 @@ const getPinnedStyles = (column, isHeader = false) => {
   if (!pinned) return {}
   const z = isHeader ? 2 : 1
   const w = column.getSize() + 'px'
-  // Headers always use the solid card background.
-  // Body cells use --row-bg, which is set to solid colors only (normal + hover) via <style scoped>.
-  // Selected/preview rows intentionally don't set --row-bg so sticky cells fall back to --card,
-  // which prevents semi-transparent tints from bleeding through the sticky cell.
   const bg = isHeader ? 'var(--card, #fff)' : 'var(--row-bg, var(--card, #fff))'
   const base = {
     position: 'sticky',
@@ -160,14 +210,11 @@ const getPinnedStyles = (column, isHeader = false) => {
     minWidth: w,
     maxWidth: w,
   }
-  // inset box-shadow: paints inside the cell so it can't be covered by adjacent cells
-  // and always follows the visual sticky position (unlike border or outset box-shadow)
   if (pinned === 'left') return { ...base, left: column.getStart('left') + 'px', boxShadow: 'inset -1px 0 0 0 var(--card-line, #e5e7eb)' }
   if (pinned === 'right') return { ...base, right: column.getAfter('right') + 'px', boxShadow: 'inset 1px 0 0 0 var(--card-line, #e5e7eb)' }
   return {}
 }
 
-
 // Initialize pinning from prop if provided
 onMounted(() => {
   if (props.pinnedColumns) {
@@ -179,7 +226,6 @@ onMounted(() => {
 })
 
 // Keep 'select' always first in the left pinning array.
-// Fires synchronously so the colgroup/headers never render in wrong order.
 watch(() => columnPinning.value.left, (left) => {
   if (props.checkable && left.includes('select') && left[0] !== 'select') {
     columnPinning.value = {
@@ -228,7 +274,7 @@ const fetchData = async () => {
   }
 }
 
-// ─── Scheduled fetch (deduplicates concurrent state changes) ─────────────────
+// ─── Scheduled fetch ──────────────────────────────────────────────────────────
 let fetchTimeout = null
 const scheduleFetch = (delay = 0) => {
   if (fetchTimeout) clearTimeout(fetchTimeout)
@@ -281,7 +327,7 @@ const clearCache = () => {
   if (cacheKey.value) sessionStorage.removeItem(cacheKey.value)
 }
 
-// ─── Restore guard (prevents watchers from triggering fetch during restore) ───
+// ─── Restore guard ────────────────────────────────────────────────────────────
 const isRestoring = ref(false)
 
 const loadFromCacheOnMount = async () => {
@@ -312,8 +358,8 @@ const loadFromCacheOnMount = async () => {
 
 // ─── Watchers ─────────────────────────────────────────────────────────────────
 watch(tableData, (newData) => {
-  if (newData.length > 0 && tableBodyRef.value) {
-    const firstDataRow = Array.from(tableBodyRef.value.children).find(el => el.dataset.rowType === 'data')
+  if (newData.length > 0 && viewTableRef.value?.tableBodyEl) {
+    const firstDataRow = Array.from(viewTableRef.value.tableBodyEl.children).find(el => el.dataset.rowType === 'data')
     if (firstDataRow) {
       const h = firstDataRow.getBoundingClientRect().height
       if (h > 0) lastRowHeight.value = h
@@ -370,10 +416,20 @@ onBeforeUnmount(() => {
 // ─── Column settings panel ────────────────────────────────────────────────────
 const setColumnOrder = (order) => { columnOrder.value = order }
 
-// ─── Header drag reorder ──────────────────────────────────────────────────────
-let draggedHeaderId = null
-const dragOverHeaderId = ref(null)
-const resizeHoverId = ref(null)
+// ─── Header drag reorder (handler called from ViewTable) ──────────────────────
+const onHeaderDrop = (fromId, toId) => {
+  if (!fromId || fromId === toId) return
+  if (toId === 'select') return
+  const order = [...columnOrder.value]
+  const from = order.indexOf(fromId)
+  const to = order.indexOf(toId)
+  if (from < 0 || to < 0) return
+  order.splice(from, 1)
+  order.splice(to, 0, fromId)
+  const selIdx = order.indexOf('select')
+  if (selIdx > 0) { order.splice(selIdx, 1); order.unshift('select') }
+  columnOrder.value = order
+}
 
 // ─── Column auto-size on double click ─────────────────────────────────────────
 const _canvas = typeof document !== 'undefined' ? document.createElement('canvas') : null
@@ -385,15 +441,16 @@ const measureText = (text, font) => {
   return _ctx.measureText(String(text ?? '')).width
 }
 
-const autoSizeColumn = (header) => {
+const onAutoSizeColumn = (header) => {
   const colId = header.column.id
   const pad = 32
+  const tbody = viewTableRef.value?.tableBodyEl
 
   const label = header.column.columnDef.meta?.label ?? header.id
   let max = measureText(label, '500 12px ui-sans-serif,system-ui,sans-serif') + pad + 20
 
-  if (tableBodyRef.value) {
-    tableBodyRef.value.querySelectorAll(`td[data-col-id="${colId}"]`).forEach(td => {
+  if (tbody) {
+    tbody.querySelectorAll(`td[data-col-id="${colId}"]`).forEach(td => {
       const w = measureText(td.textContent?.trim(), '14px ui-sans-serif,system-ui,sans-serif') + pad
       if (w > max) max = w
     })
@@ -402,26 +459,6 @@ const autoSizeColumn = (header) => {
   table.setColumnSizing(prev => ({ ...prev, [colId]: Math.ceil(max) }))
 }
 
-const onHeaderDragStart = (colId) => { draggedHeaderId = colId }
-const onHeaderDragOver = (e, colId) => { e.preventDefault(); dragOverHeaderId.value = colId }
-const onHeaderDragLeave = () => { dragOverHeaderId.value = null }
-const onHeaderDrop = (colId) => {
-  if (!draggedHeaderId || draggedHeaderId === colId) return
-  if (colId === 'select') return
-  const order = [...columnOrder.value]
-  const from = order.indexOf(draggedHeaderId)
-  const to = order.indexOf(colId)
-  if (from < 0 || to < 0) return
-  order.splice(from, 1)
-  order.splice(to, 0, draggedHeaderId)
-  // keep 'select' pinned first
-  const selIdx = order.indexOf('select')
-  if (selIdx > 0) { order.splice(selIdx, 1); order.unshift('select') }
-  columnOrder.value = order
-  draggedHeaderId = null
-  dragOverHeaderId.value = null
-}
-
 // ─── Row selection ────────────────────────────────────────────────────────────
 const getSelectedRows = () => {
   const selected = table.getSelectedRowModel().rows.map(r => r.original)
@@ -515,18 +552,11 @@ const handleRowKeydown = (row, e) => {
   emit('row-click', row.original, e)
 }
 
-// Compute --row-bg for pinned (sticky) cells.
-// Non-pinned cells get background from Tailwind classes on <tr>.
-// Pinned cells inherit --row-bg which must be a solid opaque color (no transparency → no bleed-through).
-// color-mix() blends the Tailwind tint with the card color to produce an opaque equivalent.
-// For normal/hover rows the <style scoped> CSS rule handles it; selected/preview override via inline style.
 const pinnedRowStyle = (row) => {
   if (props.previewRowId && row.original.id === props.previewRowId) {
-    // !bg-indigo-50 → solid indigo-50
     return { '--row-bg': 'color-mix(in srgb, #eef2ff 100%, var(--card, #fff))' }
   }
   if (row.getIsSelected()) {
-    // bg-indigo-50/40 → 40% indigo-50 blended with card
     return { '--row-bg': 'color-mix(in srgb, #eef2ff 40%, var(--card, #fff))' }
   }
   return {}
@@ -539,6 +569,11 @@ const reloadTable = () => {
   fetchData()
 }
 
+const setPageSize = (size) => {
+  pagination.value = { pageIndex: 0, pageSize: size }
+  table.setPageSize(size)
+}
+
 defineExpose({
   getSelectedRows,
   loading,
@@ -547,318 +582,98 @@ defineExpose({
   clearCache,
   table,
   setColumnOrder,
+  setPageSize,
   isDataFromCache,
   cached: computed(() => props.cached),
   paginationBarRef,
   columnPinning,
   pinColumn,
+  editingCell,
+  cancelEdit,
 })
 </script>
 
 <template>
-  <div class="relative">
+  <div class="relative flex flex-col">
 
     <!-- Table view -->
-    <div v-if="!isGridView" class="overflow-x-auto relative">
-      <table
-        class="relative divide-y divide-card-line"
-        :style="{ tableLayout: 'fixed', width: table.getTotalSize() + 'px', minWidth: '100%' }"
-      >
-        <colgroup>
-          <!-- Must use pinning order (left|center|right) — same as getHeaderGroups() and row.getVisibleCells() -->
-          <col
-            v-for="col in [...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getRightVisibleLeafColumns()]"
-            :key="col.id"
-            :style="{ width: col.getSize() + 'px' }"
-          >
-        </colgroup>
-        <thead class="relative z-20 bg-card">
-          <template v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-            <!-- Main header row -->
-            <tr class="bg-card">
-              <th
-                v-for="header in headerGroup.headers"
-                :key="header.id"
-                scope="col"
-                :draggable="header.id !== 'select' && resizeHoverId !== header.id && !header.column.getIsPinned()"
-                @dragstart="header.id !== 'select' && resizeHoverId !== header.id && !header.column.getIsPinned() && onHeaderDragStart(header.id)"
-                @dragover="header.id !== 'select' && onHeaderDragOver($event, header.id)"
-                @dragleave="onHeaderDragLeave"
-                @drop="header.id !== 'select' && onHeaderDrop(header.id)"
-                class="relative"
-                :class="[
-                  header.id === 'select' ? 'text-center' : '',
-                  dragOverHeaderId === header.id ? 'bg-indigo-50 dark:bg-indigo-900/20' : '',
-                  header.column.getCanSort() ? 'cursor-pointer select-none' : '',
-                ]"
-                :style="getPinnedStyles(header.column, true)"
-                @click="header.column.getCanSort() && header.column.toggleSorting()"
-              >
-                <!-- Select all checkbox -->
-                <template v-if="header.id === 'select'">
-                  <input
-                    type="checkbox"
-                    :checked="table.getIsAllRowsSelected()"
-                    :indeterminate="table.getIsSomeRowsSelected()"
-                    @change="table.getToggleAllRowsSelectedHandler()($event)"
-                    class="mx-2 shrink-0 border-card-line rounded-control text-blue-900 focus:ring-0 focus:ring-offset-0 dark:bg-card"
-                  />
-                </template>
-                <!-- Regular column header -->
-                <template v-else>
-                  <div
-                    class="px-4 py-3 flex items-center gap-x-1 text-xs font-medium w-full overflow-hidden"
-                    :class="header.column.getIsPinned() ? 'text-foreground' : 'text-muted-foreground'"
-                  >
-                    <IconPin v-if="header.column.getIsPinned()" class="size-3 shrink-0 text-indigo-400 dark:text-indigo-500" />
-                    <span class="truncate">{{ header.column.columnDef.meta?.label ?? header.id }}</span>
-                    <span v-if="header.column.getCanSort()">
-                      <IconSelector v-if="!header.column.getIsSorted()" class="size-4 opacity-40" />
-                      <IconChevronDown v-else-if="header.column.getIsSorted() === 'desc'" class="size-4" />
-                      <IconChevronUp v-else class="size-4" />
-                    </span>
-                  </div>
-                  <!-- Resize handle -->
-                  <div
-                    v-if="header.column.getCanResize()"
-                    class="absolute right-0 top-0 h-full w-3 cursor-col-resize group/rz flex items-center justify-center select-none touch-none"
-                    @mouseenter="resizeHoverId = header.id"
-                    @mouseleave="resizeHoverId = null"
-                    @mousedown.stop="header.getResizeHandler()?.($event)"
-                    @touchstart.passive.stop="header.getResizeHandler()?.($event)"
-                    @dblclick.stop="autoSizeColumn(header)"
-                    @dragstart.stop.prevent
-                    @click.stop
-                  >
-                    <div
-                      class="h-4 w-px transition-all"
-                      :class="header.column.getIsResizing()
-                        ? 'bg-indigo-400 dark:bg-indigo-500 !w-0.5'
-                        : 'bg-surface-1 group-hover/rz:bg-indigo-300 dark:group-hover/rz:bg-indigo-600 group-hover/rz:w-0.5'"
-                    />
-                  </div>
-                </template>
-              </th>
-            </tr>
-
-            <!-- Column filter row -->
-            <tr
-              v-if="hasFilterableColumns"
-              class="border-b border-card-line bg-muted/50"
-            >
-              <th
-                v-for="header in headerGroup.headers"
-                :key="'f-' + header.id"
-                :class="[
-                  header.id === 'select' ? 'w-12' : 'px-3 py-1.5',
-                ]"
-                :style="getPinnedStyles(header.column, true)"
-              >
-                <input
-                  v-if="header.column.getCanFilter()"
-                  :value="header.column.getFilterValue() ?? ''"
-                  @input="(e) => header.column.setFilterValue(e.target.value || undefined)"
-                  :placeholder="`Filtrar ${header.column.columnDef.meta?.label ?? ''}...`"
-                  class="w-full bg-card border border-card-line rounded-control text-xs text-muted-foreground-1 px-2.5 py-1 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400 dark:focus:border-indigo-500 outline-none transition-all"
-                />
-              </th>
-            </tr>
-          </template>
-        </thead>
-
-        <tbody ref="tableBodyRef" class="divide-y divide-card-line">
-          <!-- Loading skeleton rows -->
-          <tr
-            v-if="loading"
-            v-for="(_, i) in skeletonRows"
-            :key="'sk-' + i"
-            class="animate-pulse bg-card"
-          >
-            <td
-              v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
-              :key="'skc-' + header.id"
-              :class="[
-                header.id === 'select' ? 'text-center w-12' : 'px-4 overflow-hidden',
-              ]"
-              :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
-            >
-              <div v-if="header.id === 'select'" class="w-4 h-4 bg-surface-1 rounded mx-auto"></div>
-              <div v-else class="h-4 w-[50%] rounded bg-surface-1"></div>
-            </td>
-          </tr>
-
-          <!-- Loading filler rows: pad to pageSize so table height doesn't change -->
-          <tr
-            v-if="loading && skeletonRows.length < pagination.pageSize"
-            v-for="i in (pagination.pageSize - skeletonRows.length)"
-            :key="'lf-' + i"
-            class="bg-card"
-          >
-            <td
-              v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
-              :key="'lfc-' + header.id"
-              :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
-            />
-          </tr>
-
-          <!-- Empty filler rows: maintain table height when no results -->
-          <tr
-            v-if="!loading && tableData.length === 0"
-            v-for="i in pagination.pageSize"
-            :key="'esk-' + i"
-            class="bg-card"
-          >
-            <td
-              v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
-              :key="'eskc-' + header.id"
-              :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
-            />
-          </tr>
-
-          <!-- Data rows -->
-          <tr
-            v-else
-            v-for="row in table.getRowModel().rows"
-            :key="row.id"
-            data-row-type="data"
-            @click="(e) => handleRowClick(row, e)"
-            @keydown="(e) => handleRowKeydown(row, e)"
-            :tabindex="isRowClickEnabled ? 0 : undefined"
-            class="bg-card hover:bg-layer-hover transition-colors"
-            :class="{
-              'cursor-pointer': isRowClickEnabled,
-              'bg-indigo-50/40 dark:bg-indigo-900/10 hover:bg-indigo-50/60': row.getIsSelected(),
-              '!bg-indigo-50 dark:!bg-indigo-900/20 ring-1 ring-inset ring-indigo-200 dark:ring-indigo-700': previewRowId && row.original.id === previewRowId,
-            }"
-            :style="pinnedRowStyle(row)"
-          >
-            <td
-              v-for="cell in row.getVisibleCells()"
-              :key="cell.id"
-              :data-col-id="cell.column.id"
-              :class="[
-                cell.column.id === 'select'
-                  ? 'text-center w-12 overflow-hidden'
-                  : 'px-4 py-3 text-sm text-muted-foreground-1 overflow-hidden',
-                cell.column.id !== 'select' ? cell.column.columnDef.meta?.class ?? '' : '',
-              ]"
-              :style="getPinnedStyles(cell.column)"
-            >
-              <!-- Select checkbox -->
-              <template v-if="cell.column.id === 'select'">
-                <div @click.stop>
-                  <input
-                    type="checkbox"
-                    :checked="row.getIsSelected()"
-                    :disabled="!row.getCanSelect()"
-                    @change="row.getToggleSelectedHandler()($event)"
-                    class="rounded border-card-line focus:ring-0 focus:ring-offset-0 dark:bg-card"
-                  />
-                </div>
-              </template>
-              <!-- Data cell with slot -->
-              <template v-else>
-                <slot :name="cell.column.id" :row="row.original" :value="cell.getValue()">
-                  {{ cell.getValue() }}
-                </slot>
-              </template>
-            </td>
-          </tr>
-
-          <!-- Filler rows: pad table to full page height when data < perPage -->
-          <tr
-            v-if="!loading && tableData.length > 0 && tableData.length < pagination.pageSize"
-            v-for="i in (pagination.pageSize - tableData.length)"
-            :key="'fill-' + i"
-            class="bg-card"
-          >
-            <td
-              v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
-              :key="'fillc-' + header.id"
-              :style="{ height: lastRowHeight + 'px', ...getPinnedStyles(header.column) }"
-            />
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- Empty state overlays -->
-      <div
-        v-if="!loading && tableData.length === 0 && !search && !columnFilters.length"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 rounded-card"
-      >
-        <slot name="empty">
-          <p class="text-muted-foreground text-lg font-medium italic">No hay registros</p>
-        </slot>
-      </div>
-
-      <div
-        v-if="!loading && tableData.length === 0 && (search || columnFilters.length)"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 rounded-card"
-      >
-        <slot name="empty-search">
-          <p class="text-muted-foreground text-lg font-medium italic">No hay registros en la búsqueda</p>
-        </slot>
-      </div>
-    </div>
-
-    <!-- Grid view -->
-    <div v-else class="relative">
-      <div v-if="loading" :class="gridClass">
-        <div v-for="(_, i) in skeletonRows" :key="'gsk-' + i" class="animate-pulse">
-          <slot name="grid-skeleton">
-            <div class="bg-card rounded-card border border-card-line p-4">
-              <div class="space-y-3">
-                <div class="h-4 bg-surface-1 rounded w-3/4"></div>
-                <div class="h-4 bg-surface-1 rounded w-1/2"></div>
-                <div class="h-6 bg-surface-1 rounded w-1/4"></div>
-              </div>
-            </div>
-          </slot>
-        </div>
-      </div>
-
-      <div v-else-if="tableData.length > 0" :class="gridClass">
-        <slot
-          name="grid-item"
-          v-for="row in table.getRowModel().rows"
-          :key="row.id"
-          :row="row.original"
-          :tanstack-row="row"
-          :is-selected="row.getIsSelected()"
-          :checkable="checkable"
-          :toggle-row="() => row.toggleSelected()"
-        >
-          <div class="bg-card rounded-card border border-card-line p-4 hover:shadow-md transition-shadow relative"
-            :class="{ 'ring-2 ring-indigo-400 dark:ring-indigo-600': row.getIsSelected() }">
-            <div v-if="checkable" class="absolute top-2 left-2 z-10">
-              <input type="checkbox" :checked="row.getIsSelected()" @change="row.toggleSelected()"
-                class="rounded border-card-line dark:bg-card" />
-            </div>
-            <div class="space-y-2" :class="{ 'pt-6': checkable }">
-              <div v-for="cell in row.getVisibleCells().filter(c => c.column.id !== 'select')" :key="cell.id" class="flex justify-between">
-                <span class="text-sm text-muted-foreground">{{ cell.column.columnDef.meta?.label ?? cell.column.id }}:</span>
-                <span class="text-sm text-foreground">
-                  <slot :name="cell.column.id" :row="row.original" :value="cell.getValue()">{{ cell.getValue() }}</slot>
-                </span>
-              </div>
-            </div>
-          </div>
-        </slot>
-      </div>
-
-      <div v-else class="flex items-center justify-center py-12">
-        <slot v-if="!search && !columnFilters.length" name="empty">
-          <p class="text-muted-foreground text-lg">No hay registros</p>
-        </slot>
-        <slot v-else name="empty-search">
-          <p class="text-muted-foreground text-lg">No hay registros en la búsqueda</p>
-        </slot>
-      </div>
-    </div>
+    <ViewTable
+      v-if="currentView === 'table'"
+      ref="viewTableRef"
+      :table="table"
+      :loading="loading"
+      :skeleton-rows="skeletonRows"
+      :last-row-height="lastRowHeight"
+      :checkable="checkable"
+      :preview-row-id="previewRowId"
+      :is-row-click-enabled="isRowClickEnabled"
+      :search="search"
+      :column-filters="columnFilters"
+      :has-filterable-columns="hasFilterableColumns"
+      :pagination="pagination"
+      :get-pinned-styles="getPinnedStyles"
+      :pinned-row-style="pinnedRowStyle"
+      :on-header-drop="onHeaderDrop"
+      :on-auto-size-column="onAutoSizeColumn"
+      @row-click="handleRowClick"
+      @row-keydown="handleRowKeydown"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps ?? {}" />
+      </template>
+    </ViewTable>
+
+    <!-- Cards / grid view -->
+    <ViewCards
+      v-else-if="currentView === 'cards'"
+      :table="table"
+      :loading="loading"
+      :skeleton-rows="skeletonRows"
+      :checkable="checkable"
+      :grid-class="gridClass"
+      :search="search"
+      :column-filters="columnFilters"
+      :bordered="bordered"
+      @row-click="handleRowClick"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps ?? {}" />
+      </template>
+    </ViewCards>
+
+    <!-- Database inline-edit view -->
+    <ViewDatabase
+      v-else-if="currentView === 'database'"
+      :table="table"
+      :loading="loading"
+      :skeleton-rows="skeletonRows"
+      :last-row-height="lastRowHeight"
+      :checkable="checkable"
+      :editing-cell="editingCell"
+      :editing-value="editingValue"
+      :saving-cell="savingCell"
+      :cell-error="cellError"
+      @row-click="handleRowClick"
+      @start-edit="startEdit"
+      @save-edit="saveEdit"
+      @cancel-edit="cancelEdit"
+      @editing-value-change="(v) => editingValue = v"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps ?? {}" />
+      </template>
+    </ViewDatabase>
 
     <!-- Pagination & controls bar -->
-    <div ref="paginationBarRef" class="flex flex-col sm:flex-row items-center justify-between gap-y-4 sm:gap-y-0 px-4 py-3 border-t border-card-line">
-      <!-- Left: reload, total, cache, columns button -->
+    <div
+      v-if="infoPosition !== 'none'"
+      ref="paginationBarRef"
+      :class="[
+        'flex flex-col sm:flex-row items-center justify-between gap-y-4 sm:gap-y-0 px-4 py-3',
+        infoPosition === 'top' ? 'order-first border-b border-card-line' : 'border-t border-card-line',
+      ]"
+    >
+      <!-- Left: reload, total, cache -->
       <div class="flex items-center gap-x-4 flex-wrap gap-y-2">
         <!-- Reload button -->
         <div v-if="showReloadButton" class="flex items-center gap-x-2">
@@ -892,13 +707,12 @@ defineExpose({
             <div class="absolute top-full left-4 -mt-1 border-4 border-transparent border-t-slate-900"></div>
           </div>
         </div>
-
       </div>
 
       <!-- Right: per-page + pagination -->
       <div class="flex items-center gap-x-8">
         <!-- Per page selector -->
-        <div class="flex items-center gap-x-2">
+        <div v-if="showPerPage" class="flex items-center gap-x-2">
           <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Filas:</label>
           <select
             v-if="!isCustomPerPage"
@@ -958,17 +772,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style scoped>
-/* --row-bg drives the background of sticky (pinned) body cells.
-   Only solid, opaque values here — semi-transparent tints for selected/preview
-   rows intentionally do NOT override --row-bg, so pinned cells stay opaque
-   and text from scrolling content can't bleed through. */
-tbody tr {
-  --row-bg: var(--card, #fff);
-}
-tbody tr:hover {
-  --row-bg: var(--layer-hover, #f8fafc);
-}
-</style>
-