React Daisy Components – Bibliothèque de composants UI par Boulteu

Commencer

Introduction

React Daisy Components est une collection complète de composants React mis en forme avec Tailwind CSS et DaisyUI. Conçus avec TypeScript, ces composants offrent des performances optimales, une accessibilité renforcée et une expérience développeur de qualité.

🚀

Performance

Optimisé pour la vitesse avec le chargement différé et un rendu efficace

🎨

Design

Mis en forme avec DaisyUI, et s'adapte à votre thème pour une intégration transparente

⚡

TypeScript

Support complet TypeScript avec des définitions de types exhaustives

Mise en place

Guide d'installation et de configuration

Pré-requis

Assurez-vous d'avoir les dépendances suivantes installées :

npm install react@^19.1.1 tailwindcss@^4.1.12 daisyui@^5.0.50

Installation

npm install react-daisy-components

Configuration

Configuration basée sur votre version de Tailwind CSS :

Tailwind V4

/* Ajoutez à votre fichier CSS principal */
@import "tailwindcss";
@plugin "daisyui";

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

Tailwind V3

// Ajoutez à votre fichier de configuration Tailwind (tailwind.config.js)
export default {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/react-daisy-components/**/*.{vue,js,ts}"
  ],
  plugins: [require("daisyui")]
}

Internationalisation (i18n)

Tous les composants s'adaptent automatiquement à la langue de la page (basée sur l'attribut HTML lang) si des traductions sont disponibles (sinon, la langue par défaut est l'anglais). Traductions disponibles: Anglais 🇬🇧, Français 🇫🇷, Espagnol 🇪🇸

Composants

DataTable

Table de données avancée avec pagination, tri, filtrage, export et plus encore.

Import

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

Usage de base

Une table de données simple avec des fonctionnalités de base. Toutes les propriétés ci-dessus sont requises.

Propriété	Type	Description
`data`	Object[] \| String	Tableau d'objets de données (représente les lignes de la table), voir Usage avancé pour plus d'infos sur l'utilisation de type String
`columns`	Object[]	Tableau de définitions de colonnes (représente les colonnes de la table)
└─ `key`	String	Identifiant unique de la colonne (sera capitalisée et utilisée comme en-tête de colonne si pas de label, ex: 'email' devient 'Email')

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id' },
    { key: 'nom' },
    { key: 'email' }
  ];
  
  return (
    <DataTable
      data={data}
      columns={columns}
    />
  );
};

export default MyTable;

Pagination

Table de données avec contrôles de pagination.

Propriété	Type	Valeur par défaut	Description
`paginationConfig`	Object		Configuration de pagination
└─ `maxVisiblePages`	Number	5	Nombre de boutons de page à afficher
└─ `showFirstLast`	Boolean	true	Afficher les boutons de navigation première/dernière page
└─ `showPageInfo`	Boolean	true	Afficher les informations de page actuelle
└─ `perPageOptions`	Number[]	[5, 10, 25, 50]	Tableau d'options d'éléments par page
└─ `perPage`	Number	10	Nombre par défaut d'éléments par page

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id' },
    { key: 'nom' },
    { 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;

Style

Personnalisez l'apparence de votre table de données.

Propriété	Type	Valeur par défaut	Description
`tableClass`	String	table-zebra	Définit les classes de la table, peuvent être des classes tailwind/daisyui mais les classes personnalisées sont aussi supportées

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nom' },
    { key: 'email' },
    { key: 'rôle' },
    { key: 'créé_le', label: 'Créé le' }
  ];

  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;

Label

Personnalisez les en-têtes de colonnes avec des labels descriptifs.

Propriété	Type	Valeur par défaut	Description
`columns`	Object[]		Voir Usage de base pour plus d'infos
└─ `label`	String		Définit le label de l'en-tête de colonne (par défaut: clé de colonne capitalisée)

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: '1. ID' },
    { key: 'nom', label: '2. Nom' },
    { key: 'email', label: '3. Email' },
    { key: 'créé_le', label: '4. Créé le' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Tri

Activez le tri des colonnes pour aider les utilisateurs à trouver et organiser les données.

Propriété	Type	Valeur par défaut	Description
`columns`	Object[]		Voir Usage de base pour plus d'infos
└─ `sortable`	Boolean	true	Définit si la colonne peut être triée

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID', sortable: 'true' },
    { key: 'nom', sortable: 'true' },
    { key: 'email', sortable: 'false' },
    { key: 'rôle', sortable: 'true' },
    { key: 'créé_le', label: 'Créé le', sortable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Filtre

Ajoutez des capacités de filtrage pour affiner les données.

Cliquez sur le bouton filtre à gauche de la barre de recherche pour utiliser les filtres.

Propriété	Type	Valeur par défaut	Description
`columns`	Object[]		Voir Usage de base pour plus d'infos
└─ `filterable`	Boolean	true	Définit si la colonne peut être filtrée, si toutes les colonnes ne sont pas filtrables, le bouton filtre disparaîtra

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID', filterable: 'false' },
    { key: 'nom', filterable: 'true' },
    { key: 'email', filterable: 'false' },
    { key: 'rôle', filterable: 'true' },
    { key: 'créé_le', label: 'Créé le', filterable: 'true' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Recherche

Fonctionnalité de recherche dans toutes les colonnes en utilisant la barre de recherche.

Propriété	Type	Valeur par défaut	Description
`columns`	Object[]		Voir Usage de base pour plus d'infos
└─ `searchable`	Boolean	true	Définit si la colonne peut être recherchée, si toutes les colonnes ne sont pas recherchables, la barre de recherche disparaîtra

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID', sortable: 'false', filterable: 'false', searchable: 'false' },
    { key: 'nom', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'email', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'rôle', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'créé_le', label: 'Créé le', sortable: 'false', filterable: 'false', searchable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Export

Exportez les données vers un fichier CSV, JSON ou Excel.

Propriété	Type	Valeur par défaut	Description
`exportFilename`	String \| Boolean	table-export	Définit le nom du fichier exporté. Si false, le bouton d'export disparaîtra.

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID', searchable: 'false' },
    { key: 'nom', searchable: 'false' },
    { key: 'email', searchable: 'false' },
    { key: 'rôle', searchable: 'false' },
    { key: 'créé_le', label: 'Créé le', searchable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      exportFilename="mon-tableau-export"
    />
  );
};

export default MyTable;

Cellules personnalisées

Personnalisez les cellules en fonction des valeurs des données en utilisant le slot cell-<column.key>.

Propriété	Type	Valeur par défaut	Description
`cellRenderer`	Function		Définit la fonction pour rendre la cellule

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nom' },
    { key: 'email' },
    { key: 'rôle' },
    { key: 'créé_le', label: 'Créé le' }
  ];

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

  const cellRenderer = (value, row, column) => {
    if (column.key !== "rôle") return value;

    const getBadgeClass = (val) => {
      if (val === "Admin") return "badge-primary";
      if (val === "Utilisateur") return "badge-secondary";
      if (val === "Modérateur") 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;

Actions personnalisées

Ajoutez des boutons d'action personnalisés à la table.

Vous pouvez utiliser l'événement @action pour gérer les clics sur les actions.

Propriété	Type	Valeur par défaut	Description
`actionsConfig`	Object		Définit les boutons d'action à afficher dans la table
└─ `actions`	Object[]		Tableau d'actions
└─ `action`	String		Identifiant de l'action (requis, sera utilisée pour gérer le clic sur l'action)
└─ `variant`	String		Variante de l'action (primary, secondary, success, warning, error, info, ghost, link, neutral)
└─ `icon`	String \| Component		Icône de l'action (add, edit, delete, refresh, ou utilisez votre propre composant)
└─ `tooltip`	String		Info-bulle de l'action (texte à afficher au survol)
└─ `disabled`	Boolean	false	Définit si l'action est désactivée
`onAction`	Function		Définit la fonction pour gérer le clic sur l'action

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nom' },
    { key: 'email' },
    { key: 'rôle' },
    { key: 'créé_le', label: 'Créé le' }
  ];

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

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

  const handleAction = (action) => {
    if (action === 'add') alert('Ajouter nouveau')
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      actionsConfig={actionsConfig}
      onAction={handleAction}
    />
  );
};

export default MyTable;

Sélection de lignes

Sélectionnez plusieurs lignes avec des cases à cocher.

Vous pouvez utiliser l'événement @bulk-action pour gérer les clics sur les actions en masse.

Propriété	Type	Valeur par défaut	Description
`selectionConfig`	Object		Définit les boutons de sélection à afficher dans la table
└─ `actions`	Object[]		Voir Actions personnalisées pour plus d'infos
└─ `clearSelection`	Boolean	true	Définit si le bouton d'effacement de sélection est affiché
`onBulkAction`	Function		Définit la fonction pour gérer le clic sur l'action en masse

Démo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', nom: 'Alice', email: 'alice@exemple.com', rôle: 'Admin', créé_le: '2024-01-15' },
    { id: '2', nom: 'Bob', email: 'bob@exemple.com', rôle: 'Utilisateur', créé_le: '2024-01-20' },
    { id: '3', nom: 'Carol', email: 'carol@exemple.com', rôle: 'Modérateur', créé_le: '2024-02-01' },
    { id: '4', nom: 'David', email: 'david@exemple.com', rôle: 'Utilisateur', créé_le: '2024-02-10' },
    { id: '5', nom: 'Eva', email: 'eva@exemple.com', rôle: 'Admin', créé_le: '2024-02-15' },
    { id: '6', nom: 'Frank', email: 'frank@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '7', nom: 'George', email: 'george@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '8', nom: 'Hannah', email: 'hannah@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '9', nom: 'Isaac', email: 'isaac@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' },
    { id: '10', nom: 'James', email: 'james@exemple.com', rôle: 'Utilisateur', créé_le: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nom' },
    { key: 'email' },
    { key: 'rôle' },
    { key: 'créé_le', label: 'Créé le' }
  ];

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

  const selectionConfig = {
    actions: [
      { action: 'edit', variant: 'warning', icon: 'edit', tooltip: 'Modifier sélectionné' }, 
      { action: 'delete', variant: 'error', icon: 'delete', tooltip: 'Supprimer sélectionné' }
    ]
  };

  const handleBulkAction = (action, selectedData) => {
    if (action === 'edit') alert(`Modifier sélectionné: ${selectedData.length}`);
    else if (action === 'delete') alert(`Supprimer sélectionné: ${selectedData.length}`);
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      selectionConfig={selectionConfig}
      onBulkAction={handleBulkAction}
    />
  );
};

export default MyTable;

Usage avancé

Charge les données depuis un endpoint API (POST uniquement).

L'état de chargement est géré automatiquement par le composant. Les données sont mises en cache par défaut.

Vous pouvez également utiliser la méthode reloadData() pour effacer la mise en cache et recharger les données (mode API uniquement).

Propriété	Type	Valeur par défaut	Description
`data`	String \| Object[]		Définit l'endpoint API pour récupérer les données (URL complète ou chemin relatif), voir Usage de base pour plus d'infos sur l'utilisation de type Object[]
`customParameters`	Object		Définit les paramètres additionnels à envoyer à l'API

Paramètres de la requête :

Propriété	Type	Description
`filters`	Object	Valeurs de filtres à appliquer à la requête
`page`	Number	Numéro de page
`perPage`	Number	Éléments par page
`search`	String	Terme de recherche à appliquer à la requête
`sort`	Object	Ordre de tri à appliquer à la requête
└─ `column`	String	Colonne à trier
└─ `ascending`	Boolean	Ordre de tri (true pour ascendant, false pour descendant)
`customParameters`	Object	Définit les paramètres additionnels à envoyer à l'API

Structure de la réponse :

Propriété	Type	Description
`data`	Object[]	Données retournées par la requête
`distinctValues`	Object	Valeurs distinctes des colonnes (pour les filtres)
`page`	Number	Numéro de page
`perPage`	Number	Éléments par page
`total`	Number	Nombre total d'éléments
`totalPages`	Number	Nombre total de pages

Démo

Code

import React, { useRef } from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'nom' },
    { key: 'email' },
    { key: 'rôle' },
    { key: 'créé_le', label: 'Créé le' }
  ];

  const customParameters = { lang: 'fr' }

  const dataTableRef = useRef(null);

  const actionsConfig = {
    actions: [
      { action: 'add', variant: 'success', icon: 'add', tooltip: 'Ajouter nouveau' }, 
      { action: 'reload', variant: 'info', icon: 'refresh', tooltip: 'Recharger les données' }
    ]
  };

  const handleAction = (action) => {
    if (action === 'add') alert('Ajouter nouveau');
    else if (action === 'reload') dataTableRef.current.reloadData();
  };

  const selectionConfig = {
    actions: [
      { action: 'edit', variant: 'warning', icon: 'edit', tooltip: 'Modifier sélectionné' }, 
      { action: 'delete', variant: 'error', icon: 'delete', tooltip: 'Supprimer sélectionné' }
    ],
    clearSelection: false
  };

  const handleBulkAction = (action, selectedData) => {
    if (action === 'edit') alert(`Modifier sélectionné: ${selectedData.length}`);
    else if (action === 'delete') alert(`Supprimer sélectionné: ${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

Composant de sélection multiple avec recherche.

Import

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

Usage de base

Sélection multiple simple avec des options prédéfinies.

Démo

Code

import React, { useState } from 'react';
import { MultiSelect } from 'react-daisy-components';

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

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