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

Commencer

Introduction

Vue Daisy Components est une collection complète de composants Vue 3 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 vue@^3.5.21 tailwindcss@^4.1.12 daisyui@^5.0.50

Installation

npm install vue-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/vue-daisy-components";

Tailwind V3

// Ajoutez à votre fichier de configuration Tailwind (tailwind.config.js)
export default {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/vue-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 'vue-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

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

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

  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' }
  ];
</script>

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

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

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

  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
  };
</script>

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

<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', 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
  };
</script>

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

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

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

  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
  };
</script>

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

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

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

  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
  };
</script>

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

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

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

  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
  };
</script>

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

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

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

  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
  };
</script>

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

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    exportFilename="mon-tableau-export"
  />
</template>

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

  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
  };
</script>

Cellules personnalisées

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

Par exemple, pour personnaliser les cellules de rôle, utilisez le slot cell-rôle.

Démo

Code

<template>
  <DataTable
    :data="data"
    :columns="columns"
    :paginationConfig="paginationConfig"
    :exportFilename="false"
  >
    <template #cell-rôle="{ value, row, column }">
      <span class="badge badge-sm badge-outline" :class="{
        'badge-primary': value === 'Admin',
        'badge-secondary': value === 'Utilisateur',
        'badge-success': value === 'Modérateur'
      }">
        {{ value }}
      </span>
    </template>
  </DataTable>
</template>

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

  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
  };
</script>

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

Démo

Code

<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', 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')
  };
</script>

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é

Démo

Code

<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', 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}`);
  };
</script>

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

<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: 'nom' },
    { key: 'email' },
    { key: 'rôle' },
    { key: 'créé_le', label: 'Créé le' }
  ];

  const customParameters = { lang: 'fr' }

  const dataTableRef = ref();

  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.value.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}`);
  };
</script>

MultiSelect

Composant de sélection multiple avec recherche.

Import

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

Usage de base

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

Démo

Code

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

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

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