Création de tableaux triables avec React

Le tri de table a toujours été un problème assez difficile à résoudre. Il existe de nombreuses interactions à suivre, de nombreuses mutations DOM à effectuer et même des algorithmes de tri complexes. Ce n’est qu’un de ces défis difficiles à relever.

Au lieu de faire appel à des bibliothèques externes, essayons de créer nous-mêmes des choses. Dans cet article, nous allons créer un moyen réutilisable de trier vos données tabulaires dans React. Nous allons parcourir chaque étape en détail et apprendre un tas de techniques utiles en cours de route.

Nous ne passerons pas par React ou la syntaxe JavaScript de base, mais vous n'avez pas besoin d'être un expert en React pour suivre

Création d'une table avec React

Commençons par créer un exemple de composant de table. Il accepte une gamme de produits et génère un tableau très basique, répertoriant une ligne par produit.

 function ProductTable (props) {
  const {produits} = accessoires;
  revenir (
    
         {products.map (product => (
          
        ))}}
      

      
 Nos produits 
      

        

          
 Nom 
          
 Prix 
          
 En stock 
        
      
      

            
 {product.name} 
            
 {product.price} 
            
 {product.stock} 
          
    
  );
} 

Ici, nous acceptons une gamme de produits et les bouclons dans notre table. C'est statique et non triable pour le moment, mais ça va pour le moment.

Tri des données

Si vous croyez tous les enquêteurs du tableau blanc, vous penseriez que le développement de logiciels était presque tous des algorithmes de tri. Heureusement, nous ne chercherons pas ici un tri rapide ou un tri à bulles.

Le tri des données en JavaScript est assez simple, grâce à la fonction de tableau intégrée sort () . Il triera les tableaux de nombres et de chaînes sans argument supplémentaire:

 const array = ['mozzarella', 'gouda', 'cheddar'];
array.sort ();
console.log (tableau); // ['cheddar', 'gouda', 'mozzarella'] 

Si vous voulez quelque chose d'un peu plus intelligent, vous pouvez lui passer une fonction de tri. Cette fonction se voit attribuer deux éléments dans la liste en tant qu'arguments, et placera l'un devant l'autre en fonction de ce que vous déciderez.

Commençons par trier les données que nous obtenons par ordre alphabétique par nom.

 function ProductTable (props) {
  const {produits} = accessoires;
  laissez sortedProducts = [...products];
  sortedProducts.sort ((a, b) => {
    if (a.name  b.name) {
      retour 1;
    }
    retourner 0;
  });
  revenir (
    
      {/* comme avant */}
    
  );
} 

Alors, que se passe-t-il ici? Tout d'abord, nous créons une copie de l'accessoire des produits, que nous pouvons modifier et changer à notre guise. Nous devons le faire car la fonction Array.prototype.sort modifie le tableau d'origine au lieu de renvoyer une nouvelle copie triée.

Ensuite, nous appelons sortedProducts.sort et passons c'est une fonction de tri . Nous vérifions si la propriété nom du premier argument a est antérieure au deuxième argument b et si c'est le cas, renvoyons une valeur négative. Cela indique que a devrait précéder b dans la liste. Si le nom du premier argument est après le nom du deuxième argument, nous renvoyons un nombre positif, indiquant que nous devons placer b avant a . Si les deux sont égaux (c'est-à-dire que les deux ont le même nom), nous renvoyons 0 pour conserver l'ordre.

Rendre notre table triable

Nous pouvons donc maintenant nous assurer que la table est triée par nom – mais comment pouvons-nous changer l'ordre de tri nous-mêmes?

Pour changer le champ par lequel nous trions, nous devons nous souvenir du champ actuellement trié. Nous le ferons avec le crochet useState .

Un crochet est un type spécial de fonction qui nous permet de «nous accrocher» à certaines des fonctionnalités de base de React, comme la gestion de l'état et le déclenchement d'effets secondaires. Ce crochet particulier nous permet de maintenir un morceau d'état interne dans notre composant et de le changer si nous le voulons. Voici ce que nous ajouterons:

 const [sortedField, setSortedField] = React.useState (null); 

Nous commençons par ne rien trier du tout. Ensuite, modifions les en-têtes de table pour inclure un moyen de changer le champ par lequel nous voulons trier.

 const ProductsTable = (props) => {
  const {produits} = accessoires;
  const [sortedField, setSortedField] = React.useState (null);
  revenir (
    
       {/ * Comme précédemment * /}
    

      

        

          

              setSortedField ('nom')}>
              Nom
            
          
          

             setSortedField ('prix')}>
              Prix
            
          
          

             setSortedField ('stock')}>
              En stock
            
          
        
      
  );
}; 

Désormais, chaque fois que nous cliquons sur un en-tête de tableau, nous mettons à jour le champ selon lequel nous voulons trier. Neat-o!

Cependant, nous ne faisons pas encore de tri réel, alors corrigeons cela. Rappelez-vous l'algorithme de tri d'avant? Le voici, légèrement modifié pour fonctionner avec n'importe lequel de nos noms de champs.

 const ProductsTable = (props) => {
  const {produits} = accessoires;
  const [sortedField, setSortedField] = React.useState (null);
  laissez sortedProducts = [...products];
  if (sortedField! == null) {
    sortedProducts.sort ((a, b) => {
      si (a [sortedField]   b [sortedField]) {
        retour 1;
      }
      retourner 0;
    });
  }
  revenir (
    
 Nous nous assurons d'abord que nous avons choisi un champ de tri, et si c'est le cas, nous trions les produits par ce champ. 
 Croissant vs Décroissant 
 La prochaine fonctionnalité que nous voulons voir est un façon de basculer entre l'ordre croissant et décroissant. Nous allons basculer entre l'ordre croissant et décroissant en cliquant une nouvelle fois sur l'en-tête du tableau. 
 Pour implémenter cela, nous devons introduire un deuxième élément d'état – l'ordre de tri. Nous allons refactoriser notre variable d'état  sortedField  actuelle pour conserver à la fois le nom du champ et sa direction. Au lieu de contenir une chaîne, cette variable d'état contiendra un objet avec une clé (le nom du champ) et une direction. Nous allons le renommer en  sortConfig  pour être un peu plus clair. 
 Voici la nouvelle fonction de tri: 
 sortedProducts.sort ((a, b) => {
  if (a [sortConfig.key]   b [sortConfig.key]) {
    retourner sortConfig.direction === 'croissant'? 1: -1;
  }
  retourner 0;
}); 
 Maintenant, si la direction est "ascendante", nous ferons comme nous l'avons fait précédemment. Si ce n'est pas le cas, nous ferons le contraire, en nous donnant un ordre décroissant.
 Ensuite, nous allons créer une nouvelle fonction –  requestSort  – qui acceptera le nom du champ et mettra à jour l'état en conséquence .
 const requestSort = key => {
  let direction = 'ascendant';
  if (sortConfig.key === key && sortConfig.direction === 'ascendant') {
    direction = 'descendant';
  }
  setSortConfig ({clé, direction});
} 
 Nous devrons également modifier nos gestionnaires de clics pour utiliser cette nouvelle fonction!
 return (
  

   {/ * comme avant * /}
  

    

      

        

            requestSort ('nom')}>
            Nom
          
        
        

            requestSort ('prix')}>
            Prix
          
        
        

            requestSort ('stock')}>
            En stock