Tableau de données
Il s'agit d'un tableau de données construit avec des composants d'interface utilisateur Shadcn et une table Tanstack .
Le tableau a été construit à la suite de l'excellent tutoriel et des exemples trouvés sur la documentation Shadcn et étendu.
Configuration
Le projet est construit sur React-vite et utilise TypeScript .
- Installer React Vite et Suivre Instructions Créez le projet:
$ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button
Données
Le tableau montre une liste fictive d'employés.
Les données sont simplement des données fausses dans un tableau du projet lui-même, plutôt que de récupérer à partir d'une base de données réelle.
Caractéristiques
Ce sont des caractéristiques de la table:
Barre d'outils:
- Champ de recherche: recherche dynamique par nom.
- Filtres à facettes: filtrage par valeurs de colonne ( emplacement , statut ); Les valeurs sont répertoriées dynamiquement en fonction des valeurs de colonne.
- Tags de filtre pour afficher les filtres actifs et effacer les filtres - bouton.
- Visibilité de la colonne: un bouton pour choisir les colonnes visibles.
- Réinitialiser: efface tous les filtres et sélections.
TABLEAU:
- Tri: les colonnes sélectionnées peuvent être triées en ascendant ou en descendant.
- Sélectionnez la ligne: la case à cocher de la première colonne sélectionne la ligne.
- Actions supplémentaires Dropdown: chaque ligne affiche des actions supplémentaires à la fin de la ligne. Seul le premier est actuellement fonctionnel, et il copie l'ID de l'employé dans le presse-papiers et affiche un pain grillé.
- Réorganisation de la colonne: la dernière ligne propose des flèches qui déplacent les colonnes à droite ou à gauche.
Pied de page:
- Informations sur les lignes sélectionnées : montre combien de lignes ont été sélectionnées.
- Bouton Dynamic Rows par page : L'utilisation peut augmenter ou diminuer les lignes par page par pas de 5.
- Boutons de pagination : aller de l'avant, en arrière, pour durer ou la première page.
Visibilité de la colonne: 
Dropdown-filter à facettes:
Tags de filtre et bouton Effacer:
Plus d'actions:
Pied de page:
Structure ?
La table est composée de 3 pièces principales:
- Composant de page qui récupère les données et le composant de la table.
- Composant de table.
- Variable des colonnes qui contient la structure et le style du contenu des colonnes individuelles.
Composants réutilisables:
- La pagination est sur le composant et peut être réutilisée pour d'autres tables.
- Les filtres à facettes nécessitent un code long et il est séparé en son propre composant. Il peut être réutilisé pour d'autres tables.
- Le petit toast pop-up est sa propre composante réutilisable.
Étapes suivantes?
➡️ Résumé le composant de la table en un composant réutilisable et le diviser en composants plus petits.
➡️ Introduire le contexte pour éviter de passer les données de la table en tant que PROP -> plus facile à gérer les méthodes de manipulation des données car elles peuvent se produire dans différents composants.
Technologie
- React-vite
- Shadcn ui
- Tanstack
- Icônes de réaction
- Vent arrière
- Manuscrit
