MUST | Data table
![datatable_thumbnail_laptop](https://flavienkreidi.design/wp-content/uploads/2020/07/datatable_thumbnail_laptop.png)
UX/UI Design
Conception d’un data table
Conception d’un data table conformément aux besoins fonctionnels du client dans le cadre d’un projet de refonte d’applications web.
![datatable_example Présentation d'un exemple de tableau.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_example.png)
Conception d’un data Table
Les tableaux de données affichent les informations sous la forme d’une grille de lignes et de colonnes. Ils organisent un jeu de données afin que les utilisateurs puissent rechercher facilement des informations. Les tableaux de données peuvent contenir :- Des éléments non interactifs (tels que des badges),
- Des composants interactifs (tels que des puces, boutons ou menus),
- Des outils pour interroger et manipuler les données.
![datatable_skeleton Exemple d'un squelette de tableau de données.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_skeleton.png)
Composants de ligne
Plusieurs types d’éléments peuvent être présentés en tableau.Data
Les éléments de base dans un tableau sont généralement de type alphanumérique.
![datatable_data Exemple d'un élément texte de tableau de données.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_data.png)
Label
Le label peut définir un état ou une appartenance à une catégorie.![datatable_state Exemple d'une ligne de tableau de données contenant un label.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_state.png)
Bouton
Un bouton permet de réaliser une action au niveau de la ligne.![datatable_button Exemple d'une ligne de tableau de données contenant un bouton.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_button.png)
Pastille et icône
Les pastilles et icônes apportent des signifiants et/ou informations à propos d’une donnée.![datatable_icons Exemple d'une ligne de tableau de données contenant des pastilles et icônes.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_icons.png)
Fonctionnalités principales
Présentation de quelques fonctionnalités principales.
Pagination
La pagination permet à l’utilisateur l’accès rapide au jeu de données.![datatable_pagination Exemple d'une pagination de tableau de données.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_pagination.png)
En-tête et colonnes fixes
L’en-tête et les colonnes peuvent dans certains cas rester figés au scroll afin de garder visibles certains éléments du jeu de données et en faciliter ainsi sa compréhension.![datatable_fixed_row_column Exemple de tableau de données contenant l'en-tête et des colonnes fixes.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_fixed_row_column.png)
Tri
Cette fonctionnalité permet le tri ascendant ou descendant du jeu de données.![datatable_sorting Exemple de tableau de données présentant un label triable.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_sorting.png)
Filtres
Les filtres permettent le tri par colonne en offrant à l’utilisateur la possibilité de saisir du texte ou de sélectionner parmi les choix d’une liste déroulante.![datatable_input_filters Exemple de tableau de données contenant des filtres.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_input_filters.png)
Sélection de données et traitement par lots
L’utilisation de checkboxes permet la sélection d’une ou de plusieurs lignes. Une barre d’outils peut être associée à la fonctionnalité de sélection multiple afin de permettre le traitement par lots du jeu de données.![datatable_toolbar Exemple de tableau de données avec les fonctionnalités de sélection multiple et de traitement par lots.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_toolbar.png)
Edition d’un champ
Les champs sont rendus directement éditables par l’utilisateur. Une fonctionnalité d’auto-complétion peut y être associée.![datatable_edit Exemple de champ éditable d'un tableau de données.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_edit.png)
![datatable_auto_completion_1 Exemple d'auto-complétion d'un champ éditable.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_auto_completion_1.png)
Ajout de données
Un bouton facilite l’ajout de nouvelles lignes dans le jeu de données.![datatable_add_row Exemple de fonctionnalité permettant l'ajout de ligne dans un tableau de données.](https://flavienkreidi.design/wp-content/uploads/2021/02/datatable_add_row.png)
Tâches
- Prototypage du data table
- Production d’un livrable de présentation
Environnement technique
- Adobe XD
- material.io