Skip to content

Commit 527ece5

Browse files
laruisslaruiss
committed
feat(data-table): ✨ crée le fichier stories CSF3 pour DsfrDataTable
## Pourquoi les changements ont été faits : - Ajouter une couverture Storybook complète pour le composant DsfrDataTable - Documenter les différentes utilisations en s'inspirant des démos existantes - Permettre aux développeurs de visualiser tous les modes (tri, pagination, sélection) ## Quelles modifications ont été apportées : - Création du fichier DsfrDataTable.stories.ts avec format CSF3 - 3 stories démontrant les différentes utilisations: - Simple: Tableau basique avec données en tableaux imbriqués - Complexe: Tableau avec sélection, tri et slots personnalisés - PlusComplexe: Tableau complet avec pagination, sélection et données en objets - Documentation complète des argTypes pour toutes les propriétés - Utilisation de ref pour gérer l'état de sélection et pagination dans les stories
1 parent 34d9c20 commit 527ece5

File tree

2 files changed

+279
-1
lines changed

2 files changed

+279
-1
lines changed

‎src/components/DsfrDataTable/DsfrDataTable.stories.ts‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
import type { Meta, StoryObj } from '@storybook/vue3'
2+
3+
import { ref } from 'vue'
4+
5+
import DsfrDataTable from './DsfrDataTable.vue'
6+
7+
const meta = {
8+
component: DsfrDataTable,
9+
title: 'Composants/DsfrDataTable',
10+
argTypes: {
11+
id: {
12+
control: 'text',
13+
description: 'Identifiant unique du tableau (généré aléatoirement par défaut)',
14+
},
15+
title: {
16+
control: 'text',
17+
description: 'Titre du tableau affiché dans la caption',
18+
},
19+
headersRow: {
20+
description: 'En-têtes des colonnes du tableau',
21+
},
22+
rows: {
23+
description: 'Données du tableau (tableaux ou objets)',
24+
},
25+
selectableRows: {
26+
control: 'boolean',
27+
description: 'Afficher des cases à cocher pour sélectionner les lignes',
28+
},
29+
sortableRows: {
30+
description: 'Rendre les lignes triables (true pour toutes, ou tableau de clés)',
31+
},
32+
verticalBorders: {
33+
control: 'boolean',
34+
description: 'Afficher les bordures verticales du tableau',
35+
},
36+
bottomCaption: {
37+
control: 'boolean',
38+
description: 'Placer la caption en bas du tableau',
39+
},
40+
noCaption: {
41+
control: 'boolean',
42+
description: 'Masquer complètement la caption',
43+
},
44+
pagination: {
45+
control: 'boolean',
46+
description: 'Activer la pagination',
47+
},
48+
paginationOptions: {
49+
description: 'Options de nombre de lignes par page',
50+
},
51+
paginationAriaLabel: {
52+
control: 'text',
53+
description: 'Label aria pour la pagination',
54+
},
55+
rowsPerPage: {
56+
control: { type: 'number', min: 1 },
57+
description: 'Nombre de lignes par page',
58+
},
59+
sortedBy: {
60+
control: 'text',
61+
description: 'Clé de la colonne par laquelle le tableau est trié',
62+
},
63+
sortedDesc: {
64+
control: 'boolean',
65+
description: 'Indique si le tri est descendant (true) ou ascendant (false)',
66+
},
67+
},
68+
} satisfies Meta<typeof DsfrDataTable>
69+
70+
export default meta
71+
72+
type Story = StoryObj<typeof meta>
73+
74+
export const Simple: Story = {
75+
render: (args) => ({
76+
components: { DsfrDataTable },
77+
78+
setup () {
79+
return {
80+
...args,
81+
}
82+
},
83+
84+
template: `
85+
<div class="fr-container fr-my-2v">
86+
<DsfrDataTable
87+
title="Titre du tableau (caption)"
88+
:headers-row="headersRow"
89+
no-caption
90+
:rows="rows"
91+
/>
92+
</div>
93+
`,
94+
}),
95+
args: {
96+
headersRow: [
97+
'ID',
98+
'Name',
99+
'Email',
100+
],
101+
rows: [
102+
[1, 'John Doe', 'john.doe@gmail.com'],
103+
[2, 'Jane Doe', 'jane.doe@gmail.com'],
104+
[3, 'James Bond', 'james.bond@mi6.gov.uk'],
105+
[4, 'Alice Johnson', 'alice.johnson@example.com'],
106+
[5, 'Bob Smith', 'bob.smith@example.com'],
107+
[6, 'Carol Williams', 'carol.williams@example.com'],
108+
[7, 'David Brown', 'david.brown@example.com'],
109+
[8, 'Emma Davis', 'emma.davis@example.com'],
110+
[9, 'Frank Miller', 'frank.miller@example.com'],
111+
[10, 'Grace Wilson', 'grace.wilson@example.com'],
112+
[11, 'Henry Moore', 'henry.moore@example.com'],
113+
[12, 'Iris Taylor', 'iris.taylor@example.com'],
114+
],
115+
},
116+
}
117+
118+
export const Complexe: Story = {
119+
render: (args) => ({
120+
components: { DsfrDataTable },
121+
122+
setup () {
123+
const selection = ref([])
124+
return {
125+
...args,
126+
selection,
127+
}
128+
},
129+
130+
template: `
131+
<div class="fr-container fr-my-2v">
132+
<DsfrDataTable
133+
v-model:selection="selection"
134+
title="Titre du tableau (caption)"
135+
:headers-row="headersRow"
136+
:rows="rows"
137+
selectable-rows
138+
sortable-rows
139+
row-key="id"
140+
>
141+
<template #header="{ key, label }">
142+
<div>
143+
<em>{{ label }}</em>
144+
</div>
145+
</template>
146+
147+
<template #cell="{ colKey, cell }">
148+
<template v-if="colKey === 'email'">
149+
<a :href="'mailto:' + cell">{{ cell }}</a>
150+
</template>
151+
<template v-else>
152+
{{ cell }} <em>({{ colKey }})</em>
153+
</template>
154+
</template>
155+
</DsfrDataTable>
156+
<p>IDs sélectionnées : {{ selection }}</p>
157+
</div>
158+
`,
159+
}),
160+
args: {
161+
headersRow: [
162+
{
163+
key: 'id',
164+
label: 'ID',
165+
},
166+
{
167+
key: 'name',
168+
label: 'Name',
169+
},
170+
{
171+
key: 'email',
172+
label: 'Email',
173+
},
174+
],
175+
rows: [
176+
[1, 'John Doe', 'john.doe@gmail.com'],
177+
[2, 'Jane Doe', 'jane.doe@gmail.com'],
178+
[3, 'James Bond', 'james.bond@mi6.gov.uk'],
179+
[4, 'Alice Johnson', 'alice.johnson@example.com'],
180+
[5, 'Bob Smith', 'bob.smith@example.com'],
181+
[6, 'Carol Williams', 'carol.williams@example.com'],
182+
[7, 'David Brown', 'david.brown@example.com'],
183+
[8, 'Emma Davis', 'emma.davis@example.com'],
184+
[9, 'Frank Miller', 'frank.miller@example.com'],
185+
[10, 'Grace Wilson', 'grace.wilson@example.com'],
186+
[11, 'Henry Moore', 'henry.moore@example.com'],
187+
[12, 'Iris Taylor', 'iris.taylor@example.com'],
188+
],
189+
rowKey: 'key',
190+
},
191+
}
192+
193+
export const PlusComplexe: Story = {
194+
render: (args) => ({
195+
components: { DsfrDataTable },
196+
197+
setup () {
198+
return args
199+
},
200+
201+
template: `
202+
<div class="fr-container fr-my-2v" style="width: 800px;">
203+
<DsfrDataTable
204+
v-model:selection="selection"
205+
v-model:current-page="currentPage"
206+
:headers-row
207+
:rows
208+
:selectable-rows
209+
row-key="id"
210+
:title
211+
:pagination
212+
:rows-per-page
213+
:pagination-options
214+
:sorted
215+
:sorted-by
216+
:sorted-desc
217+
:sortable-rows
218+
>
219+
<template #header="{ label }">
220+
<em>{{ label }}</em>
221+
</template>
222+
223+
<template #cell="{ colKey, cell }">
224+
<template v-if="colKey === 'email'">
225+
<a :href="'mailto:' + cell">{{ cell }}</a>
226+
</template>
227+
<template v-else>
228+
{{ cell }} <em>({{ colKey }})</em>
229+
</template>
230+
</template>
231+
</DsfrDataTable>
232+
<p>IDs sélectionnées : {{ selection }}</p>
233+
</div>
234+
`,
235+
}),
236+
args: {
237+
headersRow: [
238+
{
239+
key: 'id',
240+
label: 'ID',
241+
},
242+
{
243+
key: 'name',
244+
label: 'Name',
245+
},
246+
{
247+
key: 'email',
248+
label: 'Email',
249+
},
250+
],
251+
rows: [
252+
{ id: 2, name: 'Jane Doe', email: 'jane.doe@gmail.com' },
253+
{ id: 1, name: 'John Doe', email: 'john.doe@gmail.com' },
254+
{ id: 3, name: 'James Bond', email: 'james.bond@mi6.gov.uk' },
255+
{ id: 4, name: 'Alice Johnson', email: 'alice.johnson@example.com' },
256+
{ id: 5, name: 'Bob Smith', email: 'bob.smith@example.com' },
257+
{ id: 6, name: 'Carol Williams', email: 'carol.williams@example.com' },
258+
{ id: 7, name: 'David Brown', email: 'david.brown@example.com' },
259+
{ id: 8, name: 'Emma Davis', email: 'emma.davis@example.com' },
260+
{ id: 9, name: 'Frank Miller', email: 'frank.miller@example.com' },
261+
{ id: 10, name: 'Grace Wilson', email: 'grace.wilson@example.com' },
262+
{ id: 11, name: 'Henry Moore', email: 'henry.moore@example.com' },
263+
{ id: 12, name: 'Iris Taylor', email: 'iris.taylor@example.com' },
264+
],
265+
currentPage: 0,
266+
selection: [],
267+
pagination: true,
268+
paginationOptions: [3, 5, 10],
269+
rowsPerPage: 5,
270+
title: 'Titre du tableau (caption)',
271+
selectable: true,
272+
sorted: 'id',
273+
sortedBy: 'id',
274+
sortedDesc: false,
275+
sortableRows: ['id', 'name', 'email'],
276+
selectableRows: true,
277+
},
278+
}

‎src/components/DsfrDataTable/docs-demo/DsfrDataTableDemoComplexe.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const selection = ref<string[]>([])
4242
:rows="rows"
4343
selectable-rows
4444
sortable-rows
45-
:row-key="0"
45+
row-key="id"
4646
>
4747
<template #header="{ key, label }">
4848
<div @click="click($event, key)">

0 commit comments

Comments
 (0)