Vue Daisy Components – Biblioteca de componentes UI por Boulteu

Comenzar

Introducción

Vue Daisy Components es una colección completa de componentes Vue 3 estilizados con Tailwind CSS y DaisyUI. Construidos con TypeScript, estos componentes están diseñados para rendimiento, accesibilidad y experiencia de desarrollador.

🚀

Rendimiento

Optimizado para velocidad con carga diferida y renderizado eficiente

🎨

Diseño

Estilizado con DaisyUI, y se adapta a tu tema para una integración perfecta

⚡

TypeScript

Soporte completo de TypeScript con definiciones de tipos exhaustivas

Instalación

Guía de instalación y configuración

Prerrequisitos

Asegúrate de tener las siguientes dependencias instaladas:

npm install vue@^3.5.21 tailwindcss@^4.1.12 daisyui@^5.0.50

Instalación

npm install vue-daisy-components

Configuración

Configuración basada en tu versión de Tailwind CSS:

Tailwind V4

/* Añade a tu archivo CSS principal */
@import "tailwindcss";
@plugin "daisyui";

@source "./node_modules/vue-daisy-components";

Tailwind V3

// Añade a tu archivo de configuración de Tailwind (tailwind.config.js)
export default {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/vue-daisy-components/**/*.{vue,js,ts}"
  ],
  plugins: [require("daisyui")]
}

Internacionalización (i18n)

Todos los componentes se adaptan automáticamente al idioma de la página (basado en el atributo HTML lang) si hay traducciones disponibles (si no, la lang predeterminada es inglés). Traducciones disponibles: Inglés 🇬🇧, Francés 🇫🇷, Español 🇪🇸

Componentes

DataTable

Tabla de datos avanzada con paginación, ordenamiento, filtrado, exportación y más.

Importar

import { DataTable } from 'vue-daisy-components'

Uso básico

Una tabla de datos simple con funcionalidad básica. Todas las propiedades anteriores son requeridas.

Propiedad	Tipo	Descripción
`data`	Object[] \| String	Array de objetos de datos (representa las filas de la tabla), ver Uso avanzado para más información sobre el uso de tipo String
`columns`	Object[]	Array de definiciones de columnas (representa las columnas de la tabla)
└─ `key`	String	Identificador único de la columna (será capitalizada y usada como encabezado de columna si no hay etiqueta, ej: 'email' se convierte en 'Email')

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id' },
    { key: 'nombre' },
    { key: 'email' }
  ];
</script>

Paginación

Tabla de datos con controles de paginación.

Propiedad	Tipo	Valor predeterminado	Descripción
`paginationConfig`	Object		Configuración de paginación
└─ `maxVisiblePages`	Number	5	Número de botones de página a mostrar
└─ `showFirstLast`	Boolean	true	Mostrar botones de navegación primera/última página
└─ `showPageInfo`	Boolean	true	Mostrar información de página actual
└─ `perPageOptions`	Number[]	[5, 10, 25, 50]	Array de opciones de elementos por página
└─ `perPage`	Number	10	Número predeterminado de elementos por página

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id' },
    { key: 'nombre' },
    { key: 'email' }
  ];

  const paginationConfig = {
    maxVisiblePages: 2,
    showFirstLast: false,
    showPageInfo: false,
    perPageOptions: [4, 8, 12, 16, 20],
    perPage: 4
  };
</script>

Estilo

Personaliza la apariencia de tu tabla de datos.

Propiedad	Tipo	Valor predeterminado	Descripción
`tableClass`	String	table-zebra	Define las clases de la tabla, pueden ser clases tailwind/daisyui pero las clases personalizadas también son compatibles

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    tableClass="table-xs border-1 border-gray-300"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nombre' },
    { key: 'email' },
    { key: 'rol' },
    { key: 'creado_el', label: 'Creado el' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Etiqueta

Personaliza los encabezados de columna con etiquetas descriptivas.

Propiedad	Tipo	Valor predeterminado	Descripción
`columns`	Object[]		Ver Uso básico para más información
└─ `label`	String		Define la etiqueta del encabezado de columna (predeterminado: clave de columna capitalizada)

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: '1. ID' },
    { key: 'nombre', label: '2. Nombre' },
    { key: 'email', label: '3. Email' },
    { key: 'creado_el', label: '4. Creado el' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Ordenar

Habilita el ordenamiento de columnas para ayudar a los usuarios a encontrar y organizar datos.

Propiedad	Tipo	Valor predeterminado	Descripción
`columns`	Object[]		Ver Uso básico para más información
└─ `sortable`	Boolean	true	Define si la columna es ordenable

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID', sortable: 'true' },
    { key: 'nombre', sortable: 'true' },
    { key: 'email', sortable: 'false' },
    { key: 'rol', sortable: 'true' },
    { key: 'creado_el', label: 'Creado el', sortable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Filtro

Añade capacidades de filtrado para refinar los datos.

Haz clic en el botón de filtro a la izquierda de la barra de búsqueda para usar los filtros.

Propiedad	Tipo	Valor predeterminado	Descripción
`columns`	Object[]		Ver Uso básico para más información
└─ `filterable`	Boolean	true	Define si la columna es filtrable, si todas las columnas no son filtrables, el botón de filtro desaparecerá

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID', filterable: 'false' },
    { key: 'nombre', filterable: 'true' },
    { key: 'email', filterable: 'false' },
    { key: 'rol', filterable: 'true' },
    { key: 'creado_el', label: 'Creado el', filterable: 'true' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Búsqueda

Funcionalidad de búsqueda en todas las columnas usando la barra de búsqueda.

Propiedad	Tipo	Valor predeterminado	Descripción
`columns`	Object[]		Ver Uso básico para más información
└─ `searchable`	Boolean	true	Define si la columna es buscable, si todas las columnas no son buscables, la barra de búsqueda desaparecerá

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID', sortable: 'false', filterable: 'false', searchable: 'false' },
    { key: 'nombre', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'email', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'rol', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'creado_el', label: 'Creado el', sortable: 'false', filterable: 'false', searchable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Exportar

Exporta los datos a un archivo CSV, JSON o Excel.

Propiedad	Tipo	Valor predeterminado	Descripción
`exportFilename`	String \| Boolean	table-export	Define el nombre del archivo exportado. Si es false, el botón de exportar desaparecerá.

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    exportFilename="mi-tabla-export"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID', searchable: 'false' },
    { key: 'nombre', searchable: 'false' },
    { key: 'email', searchable: 'false' },
    { key: 'rol', searchable: 'false' },
    { key: 'creado_el', label: 'Creado el', searchable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Celdas personalizadas

Personaliza las celdas basándose en los valores de los datos usando el slot cell-<column.key>.

Por ejemplo, para personalizar las celdas de rol, usa el slot cell-rol.

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    :exportFilename="false"
  >
    <template #cell-rol="{ value, row, column }">
      <span class="badge badge-sm badge-outline" :class="{
        'badge-primary': value === 'Admin',
        'badge-secondary': value === 'Usuario',
        'badge-success': value === 'Moderador'
      }">
        {{ value }}
      </span>
    </template>
  </DataTable>
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nombre' },
    { key: 'email' },
    { key: 'rol' },
    { key: 'creado_el', label: 'Creado el' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
</script>

Acciones personalizadas

Añade botones de acción personalizados a la tabla.

Puedes usar el evento @action para manejar los clics en las acciones.

Propiedad	Tipo	Valor predeterminado	Descripción
`actionsConfig`	Object		Define los botones de acción a mostrar en la tabla
└─ `actions`	Object[]		Array de acciones
└─ `action`	String		Identificador de la acción (requerido, será usada para manejar el clic en la acción)
└─ `variant`	String		Variante de la acción (primary, secondary, success, warning, error, info, ghost, link, neutral)
└─ `icon`	String \| Component		Icono de la acción (add, edit, delete, refresh, o usa tu propio componente)
└─ `tooltip`	String		Tooltip de la acción (texto a mostrar al pasar el mouse)
└─ `disabled`	Boolean	false	Define si la acción está deshabilitada

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    :actionsConfig="actionsConfig"
    @action="handleAction"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nombre' },
    { key: 'email' },
    { key: 'rol' },
    { key: 'creado_el', label: 'Creado el' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };

  const actionsConfig = {
    actions: [
      { action: 'add', variant: 'success', icon: 'add', tooltip: 'Agregar nuevo' }
    ]
  };

  const handleAction = (action) => {
    if (action === 'add') alert('Agregar nuevo')
  };
</script>

Selección de filas

Selecciona múltiples filas con casillas de verificación.

Puedes usar el evento @bulk-action para manejar los clics en las acciones en masa.

Propiedad	Tipo	Valor predeterminado	Descripción
`selectionConfig`	Object		Define los botones de selección a mostrar en la tabla
└─ `actions`	Object[]		Ver Acciones personalizadas para más información
└─ `clearSelection`	Boolean	true	Define si el botón de limpiar selección se muestra

Demo

Código

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    :selectionConfig="selectionConfig"
    @bulk-action="handleBulkAction"
  />
</template>

<script setup>
  import { DataTable } from 'vue-daisy-components';

  const data = [
    { id: '1', nombre: 'Alice', email: 'alice@ejemplo.com', rol: 'Admin', creado_el: '2024-01-15' },
    { id: '2', nombre: 'Bob', email: 'bob@ejemplo.com', rol: 'Usuario', creado_el: '2024-01-20' },
    { id: '3', nombre: 'Carol', email: 'carol@ejemplo.com', rol: 'Moderador', creado_el: '2024-02-01' },
    { id: '4', nombre: 'David', email: 'david@ejemplo.com', rol: 'Usuario', creado_el: '2024-02-10' },
    { id: '5', nombre: 'Eva', email: 'eva@ejemplo.com', rol: 'Admin', creado_el: '2024-02-15' },
    { id: '6', nombre: 'Frank', email: 'frank@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '7', nombre: 'George', email: 'george@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '8', nombre: 'Hannah', email: 'hannah@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '9', nombre: 'Isaac', email: 'isaac@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' },
    { id: '10', nombre: 'James', email: 'james@ejemplo.com', rol: 'Usuario', creado_el: '2024-03-01' }
  ];
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nombre' },
    { key: 'email' },
    { key: 'rol' },
    { key: 'creado_el', label: 'Creado el' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };

  const selectionConfig = {
    actions: [
      { action: 'edit', variant: 'warning', icon: 'edit', tooltip: 'Editar seleccionado' }, 
      { action: 'delete', variant: 'error', icon: 'delete', tooltip: 'Eliminar seleccionado' }
    ]
  };

  const handleBulkAction = (action, selectedData) => {
    if (action === 'edit') alert(`Editar seleccionado: ${selectedData.length}`);
    else if (action === 'delete') alert(`Eliminar seleccionado: ${selectedData.length}`);
  };
</script>

Uso avanzado

Carga los datos desde un endpoint API (solo POST).

El estado de carga se maneja automáticamente por el componente. Los datos se almacenan en caché por defecto.

También puedes usar el método reloadData() para limpiar la caché y recargar los datos (solo en modo API).

Propiedad	Tipo	Valor predeterminado	Descripción
`data`	String \| Object[]		Define el endpoint de la API para obtener los datos (URL completa o ruta relativa), ver Uso básico para más información sobre el uso de tipo Object[]
`customParameters`	Object		Define los parámetros adicionales a enviar a la API

Parámetros de la solicitud:

Propiedad	Tipo	Descripción
`filters`	Object	Valores de filtros a aplicar a la solicitud
`page`	Number	Número de página
`perPage`	Number	Elementos por página
`search`	String	Término de búsqueda a aplicar a la solicitud
`sort`	Object	Orden de clasificación a aplicar a la solicitud
└─ `column`	String	Columna a ordenar
└─ `ascending`	Boolean	Orden de clasificación (true para ascendente, false para descendente)
`customParameters`	Object	Define los parámetros adicionales a enviar a la API

Estructura de la respuesta:

Propiedad	Tipo	Descripción
`data`	Object[]	Datos devueltos por la solicitud
`distinctValues`	Object	Valores distintos de las columnas (para los filtros)
`page`	Number	Número de página
`perPage`	Number	Elementos por página
`total`	Number	Número total de elementos
`totalPages`	Number	Número total de páginas

Demo

Código

<template>
  <DataTable
    data="/api/data.json"
    :columns="columns"
    :customParameters="customParameters"
    :actionsConfig="actionsConfig"
    :selectionConfig="selectionConfig"
    @action="handleAction"
    @bulk-action="handleBulkAction"
    ref="dataTableRef"
  />
</template>

<script setup>
  import { ref } from 'vue';
  import { DataTable } from 'vue-daisy-components';
  
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nombre' },
    { key: 'email' },
    { key: 'rol' },
    { key: 'creado_el', label: 'Creado el' }
  ];

  const customParameters = { lang: 'es' }

  const dataTableRef = ref();

  const actionsConfig = {
    actions: [
      { action: 'add', variant: 'success', icon: 'add', tooltip: 'Agregar nuevo' }, 
      { action: 'reload', variant: 'info', icon: 'refresh', tooltip: 'Recargar datos' }
    ]
  };

  const handleAction = (action) => {
    if (action === 'add') alert('Agregar nuevo');
    else if (action === 'reload') dataTableRef.value.reloadData();
  };

  const selectionConfig = {
    actions: [
      { action: 'edit', variant: 'warning', icon: 'edit', tooltip: 'Editar seleccionado' }, 
      { action: 'delete', variant: 'error', icon: 'delete', tooltip: 'Eliminar seleccionado' }
    ],
    clearSelection: false
  };

  const handleBulkAction = (action, selectedData) => {
    if (action === 'edit') alert(`Editar seleccionado: ${selectedData.length}`);
    else if (action === 'delete') alert(`Eliminar seleccionado: ${selectedData.length}`);
  };
</script>

MultiSelect

Componente de selección múltiple con búsqueda.

Importar

import { MultiSelect } from 'vue-daisy-components'

Uso básico

Selección múltiple simple con opciones predefinidas.

Demo

Código

<template>
  <MultiSelect
    :options="options"
    v-model="selected"
  />
</template>

<script setup>
  import { ref } from 'vue'
  import { MultiSelect } from 'vue-daisy-components'

  const options = ['Opción 1', 'Opción 2', 'Opción 3']
  const selected = ref([])
</script>