Que rechercher lors du choix d'un composant de la grille de données React

Le choix d'une grille React est une tâche que beaucoup d'entre nous devront éventuellement faire en tant que développeur au niveau de l'entreprise. Dans cet article, j'essaie de vous donner une idée des fonctionnalités que je recherche dans une grille de données.

La recherche d'une grille de référence pour les données tabulaires dans vos applications est quelque chose que vous devez régulièrement faire en tant que développeur frontend pour le développement d'un secteur d'activité. applications dans l'entreprise ou dans une grande entreprise. Pour choisir une grille de données React, il est indispensable de connaître les éléments à rechercher et les fonctionnalités dont vous aurez besoin.

Lorsque vous réfléchissez aux caractéristiques indispensables d’un composant de grille solide, vous devez en sélectionner une qui convient à tous les besoins. critères que vous avez en ce moment et en anticipant l’avenir de votre projet. Avec cet article, j'ai essayé de compiler une liste de critères clés que la plupart des développeurs devront prendre en compte lors de la recherche d'une solution de grille. J'espère que vous pourrez prendre ce guide et le développer avec vos propres recherches et trouver la grille idéale pour votre projet.

Performance

La plupart des bibliothèques de composants majeurs semblent bien fonctionner dans les démonstrations d'applications et au cours de votre développement. phase. Cependant, vous pouvez rencontrer des problèmes de performances lorsque vous commencez à utiliser des données réelles et que les utilisateurs commencent à interagir avec celles-ci dans un environnement de test ou de production. Pour cette raison, avant de prendre une décision finale concernant une bibliothèque particulière, vous devez utiliser les outils de performance React Performance pour analyser ses performances et essayer de reproduire un cas d'utilisation réel ou un scénario similaire à celui-ci.

Nous avons des informations sur les Telerik Blogs sur la mesure des performances, notamment un article sur Profiling React Components qui explique comment utiliser l’API User Timing . En combinaison avec le blog de React, présentant le React Profiler ces informations constituent d'excellentes ressources pour mesurer les performances d'un composant React. Tout comme vous profileriez les composants que vous avez créés et mis en production, lorsque vous recherchez une bibliothèque de composants à intégrer à votre projet, vous devez les tester avec vos propres données spécifiques à l'application.

Prise en charge des paquets

Toutes les bibliothèques de composants React devraient vous permettre d'installer npm ou GitHub . Vous trouverez ci-dessous un exemple d'importation et d'utilisation d'un composant Grid dans votre projet. La plupart des bibliothèques auront une expérience similaire pour incorporer facilement leur bibliothèque dans votre projet.

[19659003] Nous faisons en sorte que nos packages soient facilement consommables via npm afin de vous assurer que si vous avez besoin de tester une idée et de construire une démonstration, vous n'êtes plus qu'une installation de npm!

Les fonctions indispensables d'une grille React

La liste de fonctionnalités suivante est largement basée sur mon expérience dans la création d'applications métier pour un grand constructeur automobile.

Tri, filtrage et paging

Nous devons nous assurer que tout réseau que nous décidons d'utiliser a options for basic Tri Filtrage et Paging . C’est le minimum que j’aurais eu besoin pour n’importe quelle grille que nous aurions utilisée pour notre système d’inventaire. le développeur doit trop se préoccuper des détails de mise en œuvre de ho w Pour effectuer ces tâches, ils ne disposent pas de leur argent dans une grille.

Exemples de tri

Dans React, nous avons généralement une enveloppe autour de notre composant qui nous permet de suivre l'état de notre composant.
Nous pouvons utiliser cet état local pour stocker des informations sur notre tri, sur le champ sur lequel nous voulons trier et la direction (croissante ou décroissante), ainsi que sur les paramètres par défaut.
Nous pouvons les transmettre à notre composant à l'aide d'accessoires. Une démo de StackBlitz que j'ai créée montre une configuration très basique dans laquelle nous voulons trier nos données en fonction d'un productName. La valeur par défaut est true et, comme vous pouvez l'imaginer, si vous transmettez une valeur false à cet accessoire, vous désactivez la fonction de tri.

Un bon bonus dans toute bibliothèque est aidez-nous à interroger les données. Si la bibliothèque que vous consultez a quelque chose qui ressemble de loin à notre paquet Data Query cela devrait aider énormément lors de l'application du tri, du filtrage, du groupement et d'autres opérations de données agrégées. Des méthodes comme process () orderBy () et filterBy () sont disponibles. Ces méthodes sont également utiles dans les zones extérieures à votre composant de grille. C'est juste une bibliothèque d'utilitaires, mais un autre gros bonus.

Dans React, nous avons également le concept d'un composant conteneur. Ces composants de conteneur peuvent être utilisés pour envelopper et stocker notre état pour le composant de grille. Nous pouvons importer orderBy () et l’utiliser pour trier les données que nous avons importées à partir d’un fichier json qui contient à son tour une colonne intitulée NomProduit . Cela facilite le chargement de nos données avec le tri par défaut déjà en place. Peut-être que nous voulons toujours commencer dans un état où les données sont dans l'ordre alphabétique inverse? Nous aurions la configuration suivante dans notre objet state:

 state = {
  trier: [
    { field: 'ProductName', dir: 'desc' }
  ]
}

Et maintenant, lorsque nous créons notre composant Grid dans React, il suffit de transférer les données dans la grille à l'aide de l'hélice de données . Le produit de cette valeur est un orderBy appliqué aux données json et, en tant que second argument, nous pouvons passer dans nos paramètres à partir de notre objet d'état:

 render () {
  revenir (
    
      
      
      
    
  );
}

Déjà, et avec un effort minimal, nous avons trié nos produits par productName par ordre décroissant. Afin de rendre la colonne individuelle triable, nous pouvons utiliser onSortChange () un événement qui se déclenche lorsque le tri de la grille est modifié. Nous traitons cet événement nous-mêmes et trions les données à l'aide d'une simple fonction de flèche mettant à jour notre état à l'aide de la méthode setState () dans React.

Par défaut, lorsque le filtrage est activé, la grille affiche une ligne de filtre. dans son en-tête. En fonction du type de données que contiennent les colonnes, la ligne de filtre affiche des zones de texte dans chaque en-tête de colonne dans lesquelles l'utilisateur peut filtrer les entrées de chaîne, numériques ou de date.

Exemples de filtrage et de pagination

La plupart des filtres que je souhaite utiliser. à faire peut être obtenu avec une Custom Filter Cell . Cette technique est facile à comprendre et puissante. Le filtrage peut être effectué de manière similaire à notre exemple de tri précédent. En utilisant un composant d'ordre supérieur en association avec la méthode Data Query process () nous pouvons gérer les données locales. Il a son propre état et ajoute le filtre, le tri, le total et le saut d'accessoires à la grille pour gérer un événement onDataStateChange () . Nous pouvons, si nécessaire, nous lier à plusieurs grilles en utilisant différents ensembles de données, sans qu'il soit nécessaire d'écrire une logique pour le filtrage, le tri ou la pagination. Voici une description de cette fonctionnalité dans une grille:

J'ai préparé un Démonstration de StackBlitz pour montrer également quelques techniques de base de filtrage et de pagination.

Virtual Scrolling

Nous avons parfois une grande quantité de données dans nos grilles, lorsque nous travaillons avec un grand nombre de colonnes ou de lignes. nous voulons implémenter le défilement virtuel. Pendant que l'utilisateur fait défiler le tableau, la grille doit uniquement afficher les données visibles. La virtualisation des colonnes garantit que les colonnes situées en dehors de la zone actuellement visible de la grille ne seront pas restituées.

La grille possède également un mode de défilement spécial appelé Défilement virtuel . C'est ce mode de défilement qui est le plus utile avec les grands ensembles de données. Vous pouvez définir un accessoire sur la grille appelé pageSize

Dans cette démo si vous ouvrez la grille dans un Dans la nouvelle fenêtre du navigateur et inspectez la grille (comme indiqué dans le gif animé ci-dessous) au fur et à mesure que vous faites défiler l'écran, vous remarquerez que les seules lignes affichées à la fois dans la vue sont celles que vous voyez. Une fois que vous avez fait défiler des enregistrements plus anciens, ceux-ci sont supprimés et les nouveaux enregistrements sont rendus. Avoir ce type de fonctionnalité peut améliorer les performances du réseau.

Jeu à long jeu

Lorsque vous recherchez une bonne grille ou une bibliothèque de composants générale, vous voulez savoir que si vous investissez dans l'utilisation de la bibliothèque, celle-ci continuera de croître et d'être prise en charge. Certaines bibliothèques ont été de courte durée, soit parce que Le contributeur principal passe moins de temps sur le projet ou parce que la société ne l'a pas pu continuer. Dans la plupart des cas, un développement actif sur le projet garantit au minimum la résolution des bogues et la maintenance.

Sachant qu'une bibliothèque existe déjà Pendant un certain temps et que de nouvelles saveurs et de nouveaux produits sont construits à ce jour dans React, votre infrastructure frontale préférée devrait vous donner l'assurance qu'il restera dans cette région pendant dix ans, qu'il se développera et que les bugs seront corrigés rapidement. e sont des choses que vous voulez dans une bibliothèque. Avoir ces caractéristiques vous assurera une longévité avec les outils et que vos compétences peuvent être transférables ou exploitées en tant que développeur dans un autre travail. Vous ne l'obtenez que dans les plus grandes bibliothèques dotées d'une longue durée de vie.

Soutien au niveau de l'entreprise

En clair, les bibliothèques qui ne possèdent pas de licence bénéficient rarement d'un type de soutien autre que celui de la communauté. La plupart des grands magasins de développement Web et des entreprises sont soumis à des délais serrés et leurs développeurs repoussent les limites de la technologie. Parfois, il est utile d’avoir un interlocuteur expérimenté qui travaille avec la bibliothèque. Avec KendoReact nous pouvons vous rendre ces personnes accessibles – elles gèrent en fait nos canaux d'assistance à la clientèle.

Bien que nous ayons vu quelques exemples dans notre démo de grille, nous vous suggérons de rechercher d'autres solutions. là-bas qui concourt à ce niveau élevé. Si vous croyez qu'il est impossible de vous passer de certaines fonctionnalités, mettez-les dans les commentaires et indiquez-nous quelles sont vos fonctionnalités de grille préférées.