da-table (BaseTable)

Componente reutilizable de tabla Quasar (QTable) para Vue 3 con:

• Paginación
• Soporte de ordenación
• Acciones dinámicas por fila
• Selección (none | single | multiple)
• (refresh, getSelection)

Pensado para el 80% de casos típicos: paginación, carga desde API y acciones comunes (ver/editar/eliminar/etc).

Requisitos

• Vue 3
• Quasar v2 (el proyecto padre debe tener Quasar configurado)

Instalación

npm i da-table

Importación

<template>
  <div class="q-pa-md">
    <BaseTable
      ref="tableRef"
      :columns="columns"
      :loadAction="loadData"
      :actions="tableActions"
      selection="multiple"
      class="dt-table"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { BaseTable } from 'da-table'

const tableRef = ref(null)

const columns = [
  { name: 'name', label: 'Nombre', field: 'name', align: 'left', sortable: true },
  { name: 'age', label: 'Edad', field: 'age', align: 'left', sortable: true }
]

// La tabla llama a loadAction pasando paginación/sort
// Debe devolver:
//  A) { rows: Array, total: number } (recomendado)
//  B) Array (sin total)
const loadData = async ({ page, rowsPerPage, sortBy, descending }) => {
  // Ejemplo:
  return {
    rows: [
      { id: 1, name: 'José', age: 35 },
      { id: 2, name: 'Ana', age: 28 }
    ],
    total: 2
  }
}

const tableActions = [
  {
    name: 'edit',
    icon: 'edit',
    tooltip: 'Editar',
    handler: (row) => console.log('edit', row)
  },
  {
    name: 'delete',
    icon: 'delete',
    tooltip: 'Eliminar',
    handler: (row) => console.log('delete', row)
  }
]
</script>

<style scoped>
/* Estilos desde el proyecto padre (scoped) usando :deep */
:deep(.dt-table .q-table__container) {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: white;
}

:deep(.dt-table .q-table__top),
:deep(.dt-table .q-table__bottom) {
  background: #f6f7f9 !important;
}
</style>

Acciones dinámicas

Cada acción puede incluir:

{
  name: 'uniqueName',              // obligatorio
  icon: 'edit',                    // obligatorio
  tooltip: 'Editar',               // opcional
  handler: (row) => {},            // obligatorio
  visible: (row) => true,          // opcional
  disabled: (row) => false         // opcional
}

Ejemplo avanzado:

{
  name: 'activate',
  icon: 'toggle_on',
  tooltip: 'Activar usuario',
  handler: (row) => activateUser(row),
  visible: (row) => !row.active,
  disabled: (row) => row.locked
}

Puedes acceder al componente mediante ref.

<BaseTable ref="tableRef" />

// Refrescar tabla
await tableRef.value.refresh()

// Refrescar e ir a página 1
await tableRef.value.refresh({ page: 1 })

// Obtener selección
const selectedRows = tableRef.value.getSelection()

Props

| Prop | Tipo | Descripción | | -------------------- | -------- | -------------------------------- | | columns | Array | Columnas en formato QTable | | loadAction | Function | Función async que devuelve datos | | actions | Array | Acciones dinámicas por fila | | selection | String | none | single | multiple | | initialPagination | Object | Configuración inicial | | rowsPerPageOptions | Array | Opciones de filas por página | | rowKey | String | Campo identificador único |

loadAction

La función loadAction recibe:

{
  page: Number,
  rowsPerPage: Number,
  sortBy: String | null,
  descending: Boolean
}