Boostez votre productivité avec 5 fonctionnalités de grille React intégrée

Voir cinq des fonctionnalités que la grille de données de Kendoreact offre pour vous aider à élaborer une merveilleuse expérience en un rien de temps.

Le React Data Grid de la progression Bibliothèque de l’interface utilisateur de Kendoreact est plus que ce qu’il semble en surface. Non seulement une grille de données hautement performante (y compris les capacités du serveur), il est également livré avec des tonnes de fonctionnalités intégrées qui en font un rêve d’expérience utilisateur. Et, bien sûr, puisque toutes ces fonctionnalités Nifty sont incluses par la boîte, il est super facile et rapide pour les développeurs à mettre en œuvre. Jetons un coup d’œil à cinq de mes fonctionnalités intégrées préférées de la grille de données Kendoreact:

1. Colonne s’étalant

Pour rendre une grille de données super soignée et propre, la colonne est un incontournable. Lorsque vous avez affaire à des sous-catégories ou à d’autres informations imbriquées, la colonne qui s’ajoute à la colonne nous permet de communiquer clairement des informations complexes. Pour la grille de données de Kendoreact, tout ce dont nous avons besoin est le colSpan Prop pour que tout ressemble à ce que nous voulons.

<Column colSpan={2} field="UnitPrice" title="Unit Price" />

2. Réorganiser la ligne

Pour nos utilisateurs, l’un des principaux objectifs d’une grille de données est de comparer et de contraster des informations. Combien de ventes avons-nous réalisé pour ce produit par rapport à celui-ci? Comment ce classement est-il par rapport à un autre? Parfois, les fonctions de tri et de filtrage peuvent aider à cela, mais parfois nous voulons juste un ensemble spécifique de lignes toutes alignées – sans importance de leur organisation typique.

La réorganisation des lignes est parfaite pour cela car elle permet à nos utilisateurs de saisir une ligne et de le faire glisser où ils le souhaitent! En activant rowReorderable Dans notre composant de grille parent, nous pouvons facilement ajouter cette fonction (très pratique) pour nos utilisateurs.

 <Grid
      rowReorderable={{ enabled: true }}
      onRowReorder={handleRowReorder}
      style={{ height: '400px' }}
      data={data}
  >

3. Indicateur de chargement

Comme nous l’avons déjà mentionné (et, honnêtement, comme vous le saviez probablement déjà): les grilles de données peuvent contenir un parcelle de contenu. Parfois, cela signifie qu’il y a un peu de retard lorsque toutes ces informations sont récupérées ou mises à jour.

Dans ce cas, un indicateur de chargement est le moyen poli de faire savoir à nos utilisateurs que tout fonctionne comme prévu – ils ont juste besoin d’attendre une seconde! C’est une de ces petites touches qui semble sans importance, mais peut vraiment augmenter le professionnalisme et le poli de notre application. Tout ce que nous devons faire est de tirer parti du showLoader propriété.

const [showLoader, setShowLoader] = React.useState<boolean>(true);

React.useEffect(() => {
    setShowLoader(true);

    setTimeout(() => {
        setShowLoader(false);
        setData(products);
    }, 2000);
}, []);

return (
  <Grid showLoader={showLoader} data={data}>
 )

Parfois, vous souhaitez offrir aux utilisateurs des fonctionnalités supplémentaires aux conseils de leurs doigts – un menu contextuel est parfait pour cela. Avec cela, la sélection des lignes et le tri des colonnes sont à un clic droit! Et pour les développeurs, juste un accessoire avec contextMenu.

<Grid
    contextMenu={true}
    sortable={true}
    selectable={{ enabled: true }}
>

5. Presse-papiers

Soyons honnêtes: pour beaucoup de gens, les raccourcis clavier communs sont si profondément ancrés, nous ne réalisons même pas toujours lorsque nous les utilisons. Ctrl + C et Ctrl + V sont essentiellement automatiques pour moi à ce stade – ce qui le rend super frustrant quand je ne peux pas les utiliser! Ne faites pas cela à vos utilisateurs; Laissez-les tirer parti de toutes les habitudes qui les rendent plus rapides et plus efficaces en permettant les fonctions de presse-papiers intégrées dans la grille de données de Kendoreact.

Celui-ci implique un peu plus de code que nous ne pouvons nous tenir dans un extrait ici sur le blog, mais bonne nouvelle, nous avons construit Une démo entièrement fonctionnelle dans nos documents Avec le code, vous pouvez voler référence! 😉

Vous y allez: cinq excellentes façons de faire passer votre grille de données Kendoreact au niveau supérieur avec des fonctionnalités intégrées! Lequel allez-vous ajouter à votre application, ensuite?

Vous n’utilisez pas encore Kendoreact? Commencez avec Kendoreact gratuit aujourd’hui!