🇪🇸

React Daisy Components

Comenzar

Introducción

React Daisy Components es una colección completa de componentes React 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 react@^19.1.1 tailwindcss@^4.1.12 daisyui@^5.0.50

Instalación

npm install react-daisy-components

Configuración

Configuración basada en tu versión de Tailwind CSS: 
/* Añade a tu archivo CSS principal */
@import "tailwindcss";
@plugin "daisyui";

@source "./node_modules/react-daisy-components";
// Añade a tu archivo de configuración de Tailwind (tailwind.config.js)
export default {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/react-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 'react-daisy-components'

Uso básico

Una tabla de datos simple con funcionalidad básica. Todas las propiedades anteriores son requeridas.
Propiedad Tipo Valor predeterminado 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') 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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' }
  ];
  
  return (
    <DataTable
      data={data}
      columns={columns}
    />
  );
};

export default MyTable;

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 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

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 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      tableClass="table-xs border-1 border-gray-300"
    />
  );
};

export default MyTable;

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) 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

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 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

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á 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

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á. 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      exportFilename="mi-tabla-export"
    />
  );
};

export default MyTable;

Celdas personalizadas

Personaliza las celdas basándose en los valores de los datos usando el slot cell-<column.key>.
Propiedad Tipo Valor predeterminado Descripción
cellRenderer Function Define la función para renderizar la celda 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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 cellRenderer = (value, row, column) => {
    if (column.key !== "rol") return value;

    const getBadgeClass = (val) => {
      if (val === "Admin") return "badge-primary";
      if (val === "Usuario") return "badge-secondary";
      if (val === "Moderador") return "badge-success";
      return "";
    };

    return (
      <span className={`badge badge-sm badge-outline ${getBadgeClass(value)}`}>
        {value}
      </span>
    );
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      exportFilename={false}
      cellRenderer={cellRenderer}
    />
  );
};

export default MyTable;

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
onAction Function Define la función para manejar el clic en la acción 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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')
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      actionsConfig={actionsConfig}
      onAction={handleAction}
    />
  );
};

export default MyTable;

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
onBulkAction Function Define la función para manejar el clic en la acción en masa 
import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  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}`);
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      selectionConfig={selectionConfig}
      onBulkAction={handleBulkAction}
    />
  );
};

export default MyTable;

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 
import React, { useRef } from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nombre' },
    { key: 'email' },
    { key: 'rol' },
    { key: 'creado_el', label: 'Creado el' }
  ];

  const customParameters = { lang: 'es' }

  const dataTableRef = useRef(null);

  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.current.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}`);
  };
  
  return (
    <DataTable
      data="/api/data.json"
      columns={columns}
      customParameters={customParameters}
      actionsConfig={actionsConfig}
      selectionConfig={selectionConfig}
      onAction={handleAction}
      onBulkAction={handleBulkAction}
      ref={dataTableRef}
    />
  );
};

export default MyTable;

MultiSelect

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

Importar

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

Uso básico

Selección múltiple simple con opciones predefinidas. 
import React, { useState } from 'react';
import { MultiSelect } from 'react-daisy-components';

const options = ['Opción 1', 'Opción 2', 'Opción 3'];
const [selected, setSelected] = useState([]);

return (
  <MultiSelect
    options={options}
    selected={selected}
    setSelected={setSelected}
  />
);