Comment créer une table triable et filtrable dans la réaction

Cet article montre la construction d'un composant de table dynamique, triable et filtrable dans React à l'aide de VITE. Ramovions l'explication et améliorons la clarté.

Caractéristiques de clé:

• Configuration rapide avec VITE: Levier VITE pour la création de projets rapides et un environnement de développement rationalisé.
• Gestion des données dynamiques: Utiliser le crochet de React useState pour gérer les données de la table, permettant un tri et un filtrage efficaces.
• LICIBILITÉ ALIGNÉE: Améliorer l'expérience utilisateur en formatant les valeurs booléennes (✅ / ❌) et en capitalisant les en-têtes de table.
• Contrôles interactifs: Implémentez les champs d'entrée intuitifs et les boutons pour la gestion des données transparentes.
• Feedback Overfilter: Fournir une messagerie claire lorsqu'aucun résultat ne correspond aux critères du filtre.

Construire le tableau:

Ce tutoriel assume la familiarité avec les concepts HTML, CSS, JavaScript et Basic. Nous utiliserons TypeScript pour la sécurité de type, mais la logique de base reste adaptable à JavaScript.

1. Configuration du projet: Créez un nouveau projet React en utilisant VITE:

   npm create vite@latest my-react-table -- --template react-ts

2. Structure des composants: Organisez votre projet avec la structure suivante:

   <code>src
   ├── components
   │   └── Table
   │       ├── index.ts
   │       ├── table.css
   │       └── Table.tsx
   └── App.tsx</code>

3. Données simulées: Générer des exemples de données à l'aide d'un générateur JSON (par exemple, https://www.php.cn/link/8a1df180ea2c0d298aa1d739fe720a0c ). Enregistrez ces données dans src/data.ts.

4. Implémentation des composants (Table.tsx):

   Le composant central rend dynamiquement le tableau en fonction des données fournies. Il comprend des fonctions pour la mise en forme des valeurs booléennes et la capitalisation des en-têtes. Le style est géré dans table.css.

5. Ajout de contrôles: Améliorez le composant avec des champs d'entrée pour le filtrage et une liste déroulante pour sélectionner la colonne de tri. Un bouton fait basculer l'ordre de tri (ascendant / descendant).

6. Logique de filtrage: La fonction filtrante met dynamiquement les lignes affichées en fonction de la valeur d'entrée. Il convertit les données en minuscules pour la recherche insensible à la caisse.

7. Logique de tri: La fonction de tri utilise la colonne sélectionnée et l'ordre de tri pour organiser les données.

8. Manipulation de surfiltrage: Affichez un message en cas de résultats correspondant aux critères du filtre.

Résultat final:

Le code source complet est disponible sur GitHub (lien à fournir). Ce tutoriel fournit une approche concise et efficace pour créer des composants de table puissants et conviviaux dans React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!