feat: ✨ Ajoute la possibilité de mettre des valeurs par défaut dans la pagination

Author: Bigrounours

src/components/DsfrTable/DsfrTable.stories.ts

@@ -44,6 +44,14 @@ export default {
       action: 'clicked on row',
       description: 'Fonction pour montrer le clic sur une ligne (Ici seulement la 2e ligne)',
     },
+    defaultCurrentPage: {
+      control: 'number',
+      description: 'Le numéro de la page dans la pagination',
+    },
+    defaultOptionSelected: {
+      control: 'number',
+      description: 'La sélection du nombre d\'enregistrements par page',
+    },
   },
 }
 
@@ -53,7 +61,7 @@ const rows = [
   [
     'EGAUD',
     'Pierre-Louis',
-    'pierre.egaud@gmail.com',
+    'pierre.egaud@castor.fr',
     '02 04 06 08 10',
     '06 05 04 03 02',
     {
@@ -70,7 +78,7 @@ const rows = [
     rowData: [
       'DEBROIZE',
       'Clément',
-      'clement.debroize@gmail.com',
+      'clement.debroize@exile.com',
       '02 44 66 55 99',
       '07 88 77 22 33',
       {
@@ -245,6 +253,8 @@ const rows = [
 ]
 const noCaption = false
 const pagination = true
+const defaultCurrentPage = 2
+const defaultOptionSelected = 5
 
 export const TableauEntier = (args) => ({
   components: {
@@ -270,6 +280,8 @@ export const TableauEntier = (args) => ({
         :rows="rows"
         :no-caption="noCaption"
         :pagination="pagination"
+        :defaultCurrentPage="defaultCurrentPage"
+        :defaultOptionSelected="defaultOptionSelected"
       />
   `,
 
@@ -280,4 +292,6 @@ TableauEntier.args = {
   rows,
   noCaption,
   pagination,
+  defaultCurrentPage,
+  defaultOptionSelected,
 }

src/components/DsfrTable/DsfrTable.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, watch, computed, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import DsfrTableRow, { type DsfrTableRowProps } from './DsfrTableRow.vue'
 import DsfrTableHeaders from './DsfrTableHeaders.vue'
 import { type DsfrTableHeaderProps } from './DsfrTableHeader.vue'
@@ -10,19 +10,23 @@ const props = withDefaults(defineProps<{
   rows?: (DsfrTableRowProps | string)[]
   noCaption?: boolean
   pagination?: boolean
+  defaultCurrentPage?: number
+  defaultOptionSelected?: number
 }>(), {
   title: undefined,
   headers: () => [],
   rows: () => [],
+  defaultCurrentPage: 1,
+  defaultOptionSelected: 10,
 })
 
 const getRowData = (row: (DsfrTableRowProps | string | ({component: string} & Record<string, any>))) => {
   // @ts-ignore TODO: find a way to improve types here
   return row.rowData || row
 }
 
-const currentPage = ref(1)
-const optionSelected = ref(10)
+const currentPage = ref(props.defaultCurrentPage)
+const optionSelected = ref(props.defaultOptionSelected)
 const pageCount = ref(props.rows.length > optionSelected.value ? Math.ceil(props.rows.length / optionSelected.value) : 1)
 const paginationOptions = [5, 10, 25, 50, 100]
 const returnLowestLimit = () => currentPage.value * optionSelected.value - optionSelected.value
@@ -39,9 +43,17 @@ watch(() => currentPage.value, (newVal, OldVal) => {
 })
 
 const goFirstPage = () => { currentPage.value = 1 }
-const goPreviousPage = () => { currentPage.value > 1 ? currentPage.value -= 1 : currentPage.value }
-const goNextPage = () => { currentPage.value < pageCount.value ? currentPage.value += 1 : currentPage.value }
-const goLastPage = () => { currentPage.value = pageCount.value  }
+const goPreviousPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value -= 1
+  }
+}
+const goNextPage = () => {
+  if (currentPage.value < pageCount.value) {
+    currentPage.value += 1
+  }
+}
+const goLastPage = () => { currentPage.value = pageCount.value }
 
 </script>
 
@@ -87,17 +99,20 @@ const goLastPage = () => { currentPage.value = pageCount.value  }
                   <option
                     v-for="(option, idx) in paginationOptions"
                     :key="idx"
-                    :value="option">
+                    :value="option"
+                  >
                     {{ option }}
                   </option>
                 </select>
               </div>
-              <div class="flex  ml-1"><span class="self-center">Page {{ currentPage }} sur {{ pageCount }}</span></div>
+              <div class="flex  ml-1">
+                <span class="self-center">Page {{ currentPage }} sur {{ pageCount }}</span>
+              </div>
               <div class="flex   ml-1">
                 <button
                   class="fr-icon-arrow-left-s-first-line"
                   @click="goFirstPage()"
-                  />
+                />
                 <button
                   class="fr-icon-arrow-left-s-line-double"
                   @click="goPreviousPage()"