docs(datatable) : démo gros volume (31 pages) pour le saut de page

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

@@ -47,6 +47,20 @@ const paginatedItems = computed(() => {
 function onRowClick(item: Record<string, unknown>) {
   alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
 }
+
+const bigPage = ref(1)
+const bigPerPage = ref(10)
+const bigItems = Array.from({ length: 310 }, (_, i) => ({
+  id: i + 1,
+  nom: `Nom ${i + 1}`,
+  prenom: `Prénom ${i + 1}`,
+  ville: ['Paris', 'Lyon', 'Marseille'][i % 3],
+  montant: 500 + i * 7,
+}))
+const bigPaginated = computed(() => {
+  const start = (bigPage.value - 1) * bigPerPage.value
+  return bigItems.slice(start, start + bigPerPage.value)
+})
 </script>
 
 <template>
@@ -88,5 +102,21 @@ function onRowClick(item: Record<string, unknown>) {
         </template>
       </MalioDataTable>
     </div>
+
+    <div class="rounded-lg border p-6">
+      <h2 class="mb-6 text-xl font-bold">Gros volume (31 pages) — saut de page</h2>
+      <MalioDataTable
+        :columns="columns"
+        :items="bigPaginated"
+        :total-items="bigItems.length"
+        v-model:page="bigPage"
+        v-model:per-page="bigPerPage"
+      >
+        <template #cell-montant="{ item }">
+          <strong>{{ item.montant }} €</strong>
+        </template>
+      </MalioDataTable>
+      <p class="mt-3 text-sm text-gray-500">Page courante : {{ bigPage }} / {{ Math.ceil(bigItems.length / bigPerPage) }}</p>
+    </div>
   </div>
 </template>

app/story/datatable/datatable.story.vue

@@ -49,6 +49,22 @@
       </div>
     </Variant>
 
+    <Variant title="Gros volume (saut de page)">
+      <div class="p-4">
+        <MalioDataTable
+          :columns="columns"
+          :items="bigPaginated"
+          :total-items="bigItems.length"
+          v-model:page="bigPage"
+          v-model:per-page="bigPerPage"
+        >
+          <template #cell-montant="{ item }">
+            <strong>{{ item.montant }} €</strong>
+          </template>
+        </MalioDataTable>
+      </div>
+    </Variant>
+
     <Variant title="État vide">
       <div class="p-4">
         <MalioDataTable
@@ -192,4 +208,18 @@ const paginatedItems = computed(() => {
 function onRowClick(item: Record<string, unknown>) {
   alert(`Clic sur ${item.nom} ${item.prenom}`)
 }
+
+const bigPage = ref(1)
+const bigPerPage = ref(10)
+const bigItems = Array.from({ length: 310 }, (_, i) => ({
+  id: i + 1,
+  nom: `Nom ${i + 1}`,
+  prenom: `Prénom ${i + 1}`,
+  ville: ['Paris', 'Lyon', 'Marseille'][i % 3],
+  montant: 500 + i * 7,
+}))
+const bigPaginated = computed(() => {
+  const start = (bigPage.value - 1) * bigPerPage.value
+  return bigItems.slice(start, start + bigPerPage.value)
+})
 </script>