feat : wip ajout du composant Datatable

.playground/pages/composant/datatable/datatable.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const page = ref(1)
+const perPage = ref(10)
+const filtreNom = ref('')
+const filtreVille = ref<string | number | null>(null)
+
+const columns = [
+  { key: 'nom', label: 'Nom' },
+  { key: 'prenom', label: 'Prénom' },
+  { key: 'ville', label: 'Ville' },
+  { key: 'montant', label: 'Montant' },
+]
+
+const allItems = [
+  { id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
+  { id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
+  { id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
+  { id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
+  { id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
+  { id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
+  { id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
+  { id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
+  { id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
+  { id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
+  { id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
+  { id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
+  { id: 13, nom: 'Roux', prenom: 'Hugo', ville: 'Paris', montant: 2800 },
+  { id: 14, nom: 'David', prenom: 'Léa', ville: 'Lyon', montant: 670 },
+  { id: 15, nom: 'Bertrand', prenom: 'Lucas', ville: 'Marseille', montant: 1950 },
+]
+
+const filteredItems = computed(() => {
+  return allItems.filter((item) => {
+    if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
+    if (filtreVille.value && item.ville !== filtreVille.value) return false
+    return true
+  })
+})
+
+const paginatedItems = computed(() => {
+  const start = (page.value - 1) * perPage.value
+  return filteredItems.value.slice(start, start + perPage.value)
+})
+
+function onRowClick(item: Record<string, unknown>) {
+  alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">DataTable avec filtres et pagination</h2>
+      <MalioDataTable
+        :columns="columns"
+        :items="paginatedItems"
+        :total-items="filteredItems.length"
+        v-model:page="page"
+        v-model:per-page="perPage"
+        @row-click="onRowClick"
+      >
+        <template #header-nom>
+          <input
+            v-model="filtreNom"
+            type="text"
+            placeholder="Nom"
+            class="w-full border-0 border-b border-black bg-transparent px-0 py-1 outline-none text-[20px]"
+          >
+        </template>
+
+        <template #header-ville>
+          <select
+            :value="filtreVille ?? ''"
+            class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-[20px] outline-none"
+            @change="filtreVille = ($event.target as HTMLSelectElement).value || null"
+          >
+            <option value="">Ville</option>
+            <option value="Paris">Paris</option>
+            <option value="Lyon">Lyon</option>
+            <option value="Marseille">Marseille</option>
+          </select>
+        </template>
+
+        <template #cell-montant="{ item }">
+          <strong>{{ item.montant }} €</strong>
+        </template>
+      </MalioDataTable>
+    </div>
+  </div>
+</template>