fix(DsfrDataTable): 🐛 prise en compte de noCaption

fixes #992

Author: laruiss

src/components/DsfrDataTable/DsfrDataTable.md

@@ -8,7 +8,7 @@ Le composant `DsfrDataTable` est un élément puissant et polyvalent pour affich
 
 Ce composant est tout neuf et a besoin de vos retours. Son API ne devrait pas changer, elle devrait s’étoffer dans les prochaines semaines ou les prochains mois.
 
-Si vous avez des propositions, lancer une [**discussion**](https://github.com/dnum-mi/vue-dsfr/discussions) avant d’ouvrir une issue.
+Si vous avez des propositions, veuillez lancer une [**discussion**](https://github.com/dnum-mi/vue-dsfr/discussions) avant d’ouvrir une issue.
 
 :::
 

src/components/DsfrDataTable/DsfrDataTable.vue

@@ -155,7 +155,7 @@ function copyToClipboard (text: string) {
       <div class="fr-table__container">
         <div class="fr-table__content">
           <table :id="id">
-            <caption>
+            <caption v-if="!noCaption">
               {{ title }}
             </caption>
             <thead>

src/components/DsfrDataTable/docs-demo/DsfrDataTableDemoSimple.vue

@@ -18,6 +18,7 @@ const rows = [
     <DsfrDataTable
       title="Titre du tableau (caption)"
       :headers-row="headers"
+      no-caption
       :rows="rows"
     />
   </div>

src/components/DsfrTable/DsfrTable.md

@@ -8,6 +8,12 @@ Le composant `DsfrTable` est un élément puissant et polyvalent pour afficher d
 
 <VIcon name="vi-file-type-storybook" /> La story sur le tableau sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrtable--docs)
 
+::: warning
+
+Pour des tableaux complexes, nous vous recommandons d’utiliser [DsfrDataTable](/composants/DsfrDataTable)
+
+:::
+
 ## 🛠️ Props
 
 | Nom               | Type                                           | Défaut    | Obligatoire | Description                                                                                         |

src/components/DsfrTable/docs-demo/DsfrTableDemoComplexe.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance, ref } from 'vue'
 
 import DsfrTag from '../../DsfrTag/DsfrTag.vue'
 import DsfrTable from '../DsfrTable.vue'
@@ -61,6 +61,10 @@ const rows: (string | DsfrTableRowProps | DsfrTableCellProps | { component: stri
     },
   ],
 ]
+
+const noCaption = true
+const currentPage = ref(1)
+const resultsDisplayed = 5
 </script>
 
 <template>
@@ -69,7 +73,6 @@ const rows: (string | DsfrTableRowProps | DsfrTableCellProps | { component: stri
     :headers="headers"
     :rows="rows"
     :no-caption="noCaption"
-    :pagination="pagination"
     :current-page="currentPage"
     :results-displayed="resultsDisplayed"
   />