Skip to content

Commit 8da2d8b

Browse files
laruisslaruiss
committed
feat(DsfrDataTable): ✨ permet de sélectionner les colonnes triables
1 parent 7620472 commit 8da2d8b

File tree

3 files changed

+49
-18
lines changed

3 files changed

+49
-18
lines changed

‎src/components/DsfrDataTable/DsfrDataTable.md‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ Le composant `DsfrDataTable` est un élément puissant et polyvalent pour affich
66

77
🏅 La documentation sur le tableau sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tableau/)
88

9-
<VIcon name="vi-file-type-storybook" /> La story sur le tableau sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrdatatable--docs)
9+
<VIcon name="vi-file-type-storybook" /> La story sur le tableau de données sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrdatatable--docs)
10+
11+
## 📐 Structure
12+
13+
Le composant `DsfrDataTable` s'utilise pour afficher des données structurées sous forme de tableau. Il prend en charge le tri des colonnes, la pagination des lignes, et l'ajout de boutons ou d'icônes pour effectuer des actions spécifiques sur les données.
1014

1115
## Props 🛠️
1216

@@ -17,18 +21,45 @@ Le composant `DsfrDataTable` est un élément puissant et polyvalent pour affich
1721
| `rows` | `Array<DsfrDataTableRowProps \| string[] \| DsfrDataTableCellProps[]>` | `[]` | | Les données de chaque rangée dans le tableau. |
1822
| `rowKey` | `string \| Function` | `undefined`| | Une clé unique pour chaque rangée, utilisée pour optimiser la mise à jour du DOM. |
1923
| `currentPage` | `number` | `1` | | La page actuelle dans la pagination du tableau. |
20-
| `resultsDisplayed`| `number` | `10` | | Le nombre de résultats affichés par page dans la pagination. |
24+
| `selectableRows` | `boolean` | `false` | Si `true`, permet la sélection des lignes via des cases à cocher. |
25+
| `sortableRows` | `boolean \| string[]` | `false` | Si `true`, permet le tri des lignes selon chaque colonne du header. Peut être un tableau de clés pour spécifier les colonnes triables. |
26+
| `sorted` | `string` | **Obligatoire** | Clé de la colonne actuellement triée. |
27+
| `sortFn` | `(a: unknown, b: unknown) => number` | `defaultSortFn` | Fonction de tri personnalisée pour les lignes du tableau. |
28+
| `verticalBorders` | `boolean` | `false` | Si `true`, affiche des bordures verticales entre les colonnes. |
29+
| `bottomCaption` | `boolean` | `false` | Si `true`, affiche une légende en bas du tableau. |
30+
| `noCaption` | `boolean` | `false` | Si `true`, supprime la légende du tableau. |
31+
| `pages` | `Page[]` | `undefined` | Liste des pages pour la pagination. Si non définie, les pages sont générées automatiquement. |
32+
| `pagination` | `boolean` | `false` | Si `true`, active la pagination des lignes du tableau. |
33+
| `paginationOptions` | `number[]` | `[5, 10, 20]` | Options disponibles pour le nombre de lignes par page. |
34+
| `currentPage` | `number` | `1` | Numéro de la page actuellement affichée. |
35+
| `rowsPerPage` | `number` | `10` | Nombre de lignes à afficher par page. |
36+
| `bottomActionBarClass` | `string \| Record<string, boolean> \| string[]` | `undefined` | Classe CSS pour la barre d'actions en bas du tableau. |
37+
| `paginationWrapperClass` | `string \| Record<string, boolean> \| string[]` | `undefined` | Classe CSS pour l'élément englobant la pagination. |
2138

2239
## Events 📡
2340

24-
| Nom | Description |
25-
|----------------------|-------------------------------------------------|
26-
| `update:currentPage` | Émis lors du changement de la page actuelle. |
41+
| Nom | Payload | Description |
42+
|----------------------|---------|----------------------------------------|
43+
| `update:current-page` | | Émis lors du changement du numéro de page (dans le composant pagination intégré). |
44+
| `update:rows-per-page` | | Émis lors du changement du nombre de lignes à afficher par page (dans le composant pagination intégré). |
45+
| `update:selection` | | Émis lors du changement de la sélection de lignes. |
46+
| `update:sorted-by` | | Émis lors du changement de l’identifiant de la colonne à trier. |
47+
| `update:sorted-desc` | | Émis lors du changement du sens de tri. |
48+
49+
Vous pouvez donc utiliser `v-model` pour :
50+
51+
- selection
52+
- rowsPerPage
53+
- currentPage
54+
- sortedBy
55+
- sortedDesc
2756

2857
## 🧩 Slots
2958

30-
- **`header`**: Ce slot permet de personnaliser les en-têtes du tableau. Par défaut, il utilise [`DsfrDataTableHeaders`](./DsfrDataTableHeader.md) avec les props `headers`.
3159
- **Slot par défaut**: Utilisé pour le corps du tableau. Par défaut, il affiche les rangées de données via `DsfrDataTableRow`.
60+
- **`header`** : Permet de personnaliser le rendu des en-têtes de colonne.
61+
- **`cell`** : Permet de personnaliser le contenu des cellules.
62+
- **`pagination`** : Permet de personnaliser la pagination affichée sous le tableau.
3263

3364
## Exemples 📝
3465

‎src/components/DsfrDataTable/DsfrDataTable.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export type DsfrDataTableProps = {
2222
topActionsRow?: string[]
2323
bottomActionsRow?: string[]
2424
selectableRows?: boolean
25-
sortableRows?: boolean
25+
sortableRows?: boolean | string[]
2626
sorted: string
2727
sortFn?: (a: unknown, b: unknown) => number
2828
verticalBorders?: boolean
@@ -75,26 +75,26 @@ function defaultSortFn (a, b) {
7575
return 0
7676
}
7777
78-
const sorted = defineModel<string | undefined>('sorted', { default: undefined })
78+
const sortedBy = defineModel<string | undefined>('sortedBy', { default: undefined })
7979
const sortedDesc = defineModel('sortedDesc', { default: false })
8080
function sortBy (key: string) {
81-
if (!props.sortableRows) {
81+
if (!props.sortableRows || (Array.isArray(props.sortableRows) && !props.sortableRows.includes(key))) {
8282
return
8383
}
84-
if (sorted.value === key) {
84+
if (sortedBy.value === key) {
8585
if (sortedDesc.value) {
86-
sorted.value = undefined
86+
sortedBy.value = undefined
8787
sortedDesc.value = false
8888
return
8989
}
9090
sortedDesc.value = true
9191
return
9292
}
9393
sortedDesc.value = false
94-
sorted.value = key
94+
sortedBy.value = key
9595
}
9696
const sortedRows = computed(() => {
97-
const _sortedRows = sorted.value ? props.rows.slice().sort(props.sortFn ?? defaultSortFn) : props.rows.slice()
97+
const _sortedRows = sortedBy.value ? props.rows.slice().sort(props.sortFn ?? defaultSortFn) : props.rows.slice()
9898
if (sortedDesc.value) {
9999
_sortedRows.reverse()
100100
}
@@ -140,7 +140,7 @@ function onPaginationOptionsChange () {
140140
selection.value.length = 0
141141
}
142142
143-
function copyToClipboard (text) {
143+
function copyToClipboard (text: string) {
144144
navigator.clipboard.writeText(text)
145145
}
146146
</script>
@@ -190,21 +190,21 @@ function copyToClipboard (text) {
190190
@keydown.space="sortBy((header as DsfrDataTableHeaderCellObject).key ?? header)"
191191
>
192192
<div
193-
:class="{ 'sortable-header': sortableRows }"
193+
:class="{ 'sortable-header': sortableRows === true || (Array.isArray(sortableRows) && sortableRows.includes((header as DsfrDataTableHeaderCellObject).key ?? header)) }"
194194
>
195195
<slot
196196
name="header"
197197
v-bind="typeof header === 'object' ? header : { key: header, label: header }"
198198
>
199199
{{ typeof header === 'object' ? header.label : header }}
200200
</slot>
201-
<span v-if="sorted !== ((header as DsfrDataTableHeaderCellObject).key ?? header) && sortableRows">
201+
<span v-if="sortedBy !== ((header as DsfrDataTableHeaderCellObject).key ?? header) && (sortableRows === true || (Array.isArray(sortableRows) && sortableRows.includes((header as DsfrDataTableHeaderCellObject).key ?? header)))">
202202
<VIcon
203203
name="ri-sort-asc"
204204
color="var(--grey-625-425)"
205205
/>
206206
</span>
207-
<span v-else-if="sorted === ((header as DsfrDataTableHeaderCellObject).key ?? header)">
207+
<span v-else-if="sortedBy === ((header as DsfrDataTableHeaderCellObject).key ?? header)">
208208
<VIcon :name="sortedDesc ? 'ri-sort-desc' : 'ri-sort-asc'" />
209209
</span>
210210
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const currentPage = ref<number>(0)
4545
bottom-action-bar-class="bottom-action-bar-class"
4646
pagination-wrapper-class="pagination-wrapper-class"
4747
sorted="id"
48-
sortable-rows
48+
:sortable-rows="['id']"
4949
>
5050
<template #header="{ label }">
5151
<em>{{ label }}</em>

0 commit comments

Comments
 (0)