Introduction à la grille KendoReact

Vous pouvez faire beaucoup avec la grille KendoReact. Poursuivez votre lecture pour découvrir les fonctionnalités couramment utilisées et connaître la manière dont il peut être ajouté à vos projets aujourd'hui.

Le KendoReact La grille de données (ou le tableau de données, dépend auquel vous êtes habitué) est l’un des composants les plus populaires de notre bibliothèque de composants React UI. La raison en est que beaucoup de développeurs ont pour tâche d'afficher des données dans leurs applications et quel meilleur moyen de présenter ces données que sous forme tabulaire?

Il n'y a pas que l'affichage de données en lignes et en colonnes. . Ce composant d'interface utilisateur natif, qui fait partie de notre bibliothèque de composants d'interface utilisateur native construite à partir de la base pour React (ce qui signifie zéro dépendances), possède une tonne de fonctionnalités intégrées pour aider les utilisateurs à organiser, modifier, et exporter leurs données. Parmi les points saillants:

• Pagination
• Tri
• Filtrage
• Opérations CRUD
• Exportation au format PDF et Excel
• Réorganisation et redimensionnement des colonnes
• Virtualisation

Et ce n’est même pas complet liste! Pour ce billet de blog, je souhaitais jeter un regard sur certaines des fonctionnalités les plus populaires et sur la manière de les implémenter, en restant fidèles à la pagination, au tri, au filtrage et au regroupement. Globalement, cela devrait vous donner une bonne base pour ajouter la grille KendoReact à vos applications!

Installation de la grille KendoReact

Avant d’aller plus loin, je dois expliquer comment préparer votre projet à commencer à utiliser KendoReact. Grid.

Premièrement, nous devrions npm installer tous les paquets dont nous pourrions avoir besoin:

 npm install --save @ progress / kendo-react-grid @ progress / kendo-data-query @ progress / kendo-react-input @ progress / kendo-react-intl @ progress / kendo-react-dropdowns @ progress / kendo-react-dateinputs

Nous installons quelques packages ici, mais nous ajoutons principalement dans la grille toutes les entrées de KendoReact (telles que les menus déroulants et les sélecteurs de date), ainsi que la possibilité d'utiliser nos packages d'internationalisation et de globalisation. 19659017] Ensuite, dans notre composant, nous pouvons importer notre module:

 // Syntaxe du module ES2015
importer {Grid} de '@ progress / kendo-react-grid';

Ou utilisez le format CommonJS:

 // format CommonJS
const {Grid} = require ('@ progress / kendo-react-grid'); 

Enfin, nous devons nous assurer que le composant est stylé d'une manière ou d'une autre. Nous avons trois modèles (ou thèmes) que vous pouvez utiliser: les thèmes Default (notre thème développé maison), Bootstrap (v4) et Material . Pour cet exemple particulier, nous utiliserons Material car il s’inspire des recommandations de Material Design et de l’un des langages de conception les plus populaires d’aujourd’hui.

Pour ajouter un de nos thèmes à tout ce que vous avez à faire do est un autre npm install comme celui-ci:

 npm install --save @ progress / kendo-theme-material 

Ensuite, pour utiliser ce thème dans notre application (comme dans, où besoin de faire référence à notre CSS), nous avons deux options. Pour plus de détails sur ce que vous pouvez faire, veuillez consulter notre article de documentation " Styling & Themes ", mais dans ce cas, j’ai fait une inclusion très simple de notre thème dans l’en-tête de mon index .html :

Pas nécessairement recommandé pour la production – nous traitons plus de scénarios de la vie réelle dans l'article que j'ai cité ci-dessus – mais certainement quelque chose qui fonctionnera pour cet article!

Tout commence avec les données [19659027] Maintenant que les choses sont installées et importées dans notre projet, commençons par le scénario le plus simple: la liaison à un tableau.

Supposons que nous ayons le tableau suivant dans mon état que nous souhaitons afficher dans notre grille KendoReact: [19659029] state = {
  gridData: [
{ « firstName » : « Clark », « lastName » : « Kent », « heroName » : « Superman » },
{ « firstName » : « Bruce », « lastName » : « Wayne », « heroName » : « Batman » },
{ « firstName » : « Kendra », « lastName » : « Saunders », « heroName » : « Hawkgirl » },
{ « firstName » : « Diana », « lastName » : « Prince », « heroName » : « Wonder Woman » }
]

Tout ce que nous avons vraiment besoin de faire est le suivant:

Nous nous retrouvons avec une grille comme ceci:

Comme nous pouvons le voir, la grille prenait tous nos champs, créait automatiquement des colonnes pour eux et les affichait sur une seule page. Cependant, il y a certaines choses qui ressortent, comme l'en-tête qui n'a pas forcément l'air génial (il suffit de prendre le nom du champ), et peut-être que nous voulons afficher le nom de notre super-héros en premier lieu. Nous résolvons ce problème en définissant un ensemble de colonnes dans la grille pour représenter nos données. Ces colonnes nous permettent également de prendre en charge les détails que nous pourrions vouloir faire colonne par colonne (pensez à fournir des modèles personnalisés en fonction de nos données) plus tard.

Cela semble beaucoup mieux! Remarquez comment l'ordre des colonnes a changé et les en-têtes sont beaucoup mieux.

Ajout de l'interactivité dans le mélange

Téléappel

Pour la pagination, nous pouvons suivre quelques chemins. Puisque nous allons travailler avec des données locales, cela signifie que nous devons les découper à la taille appropriée pour les pages que nous traitons.

reprendre la pagination basée sur les données de super-héros que nous avons mentionnées ci-dessus. Nous adoptons cette approche uniquement pour aider à comprendre le fonctionnement de la pagination dans la grille KendoReact à un niveau élémentaire. Il existe de nombreuses autres manières, notamment de rendre la grille elle-même plus dynamique, ou de travailler avec des bibliothèques telles que notre cadre Data Query et même Redux pour changer les choses. Pour plus d’échantillons, vous pouvez vous reporter à notre section sur la documentation de radiomessagerie .

Deux choses que je voudrais souligner sont les termes que nous utilisons dans la configuration de la grille et la radiomessagerie: prenez et total . Les noms le donnent en quelque sorte, mais passons à chacun d'eux.

skip s'aligne sur la distance à parcourir dans notre tableau de données. Ce serait 0 pour notre page initiale, mais si nous avons une taille de page de 10 et voulons passer à la deuxième page, nous aurions maintenant un saut de 10 pour commencer à la "page" suivante de données .

prendre est pratiquement la taille de notre page. Si nous fixons cette valeur à 10, cela signifie que chaque page contiendra 10 éléments.

total permet simplement au pageur de connaître le nombre total d'éléments auxquels nous sommes liés. Ceci aide autour du calcul pour afficher "X – Y of Z items" où notre total est "Z".

Dans cet esprit, la façon dont nous activons la pagination dans la grille de KendoReact consiste à régler la pageable propriété à true, puis définissant les options take et ignorer .

Dans notre cas, nous ne disposons que de quatre éléments de données. Nous pouvons donc créer une page. taille de deux, nous donnant deux pages au total. Rien d’excitant, mais c’est encore une fois pour vous donner une idée du fonctionnement de la pagination dans la grille. Depuis take et ignorer traite de nos données et conserve l'état actuel de la grille. Ajoutons-les immédiatement à l'état de notre composant comme suit:

 La classe App étend React.Component {
  constructeur (accessoires) {
    super (accessoires);
    this.state = {
        gridData: [
          { "firstName" : "Clark", "lastName": "Kent", "heroName" : "Superman" },
          { "firstName": "Bruce", "lastName": "Wayne", "heroName" : "Batman"},
          { "firstName": "Kendra", "lastName": "Saunders", "heroName" : "Hawkgirl"},
          { "firstName": "Diana", "lastName": "Prince", "heroName" : "Wonder Woman"}
        ],
        sauter: 0,
        prendre 2
    } 

Donc, nous passons à 0, en commençant par mon premier élément, et nous ne montons que prenons le nombre 2 (saisissant seulement Superman et Batman dans notre tableau).

Pour implémenter la pagination, nous devons également souscrire à l'événement onPageChange . Cet événement est chargé de nous faire savoir quand la page change et dans quelle direction (si nous paginons en avant ou en arrière). Ceci est vraiment accompli grâce aux mises à jour de sauter et prendre mais cela nous donne également la possibilité de modifier nos données liées à la grille vers la page appropriée. Dans notre cas, cela peut être traité avec un simple array.slice () mais dans des cas plus avancés, nous ferions un peu plus avec nos données.

Notre cas est super simple, tout ce que nous avons. ignorer et prend des variables prenant ce que l'événement nous donne, ce qui signifie que nous nous retrouvons avec ceci:

 this.pageChange = (événement) => {
  this.setState ({
    sauter: event.page.skip,
    prendre: event.page.take
  })
} 

Nous devons maintenant configurer notre grille pour utiliser tout ce que nous avons défini dans notre composant.

Notez ce que nous avons fait dans la propriété data ainsi que ce que nous avons fait. avec total . Ce dernier est facile, nous disons simplement que le nombre total d’éléments que nous avons est la longueur de notre tableau de données. Ce que nous avons fait avec data est simplement une solution de contournement pour nous, car nous n’avons pas ici de "vraie" connexion de données, mais plutôt un tableau local. Donc, nous utilisons array.slice () et divisons le tableau basé sur les variables et prendre que nous avons dans notre état.

Voici le Grille résultante, avec pagination et tout!

Tri

Avec la pagination ajoutée, voyons ce qu’il faut faire pour trier.

Le tri est assez facile à configurer. Premièrement, nous voulons ajouter une variable "sort" à notre état, juste pour garder une trace du tri dans la grille. Bien que nous ne fassions que trier une seule colonne, il devrait s'agir d'un tableau car nous pouvons vouloir trier plusieurs colonnes. Donc, en ajoutant simplement le type : [] à notre état.

Sur la grille réelle, nous souhaitons définir la propriété sortable sur la grille, ce qui nécessite un GridSortSettings . ] objet qui peut définir si nous souhaitons trier sur une ou plusieurs colonnes et si nous voulons donner à l'utilisateur la possibilité de supprimer le tri (supprimer le tri). Nous allons garder les choses simples ici, mais si vous voulez plonger davantage dans cette question, voici un exemple avancé . Nous allons simplement définir ceci comme vrai pour l'instant, avec pour résultat sortable = {true} ajouté à notre grille de déclaration.

Tout comme pour la pagination, nous devons nous assurer qu'un champ est bien situé . L'option] est définie dans l'une de nos colonnes, nous avons donc lié la grille à un champ des données.

Nous devrions également définir la propriété sort ce qui nous donnera l'aspect mis en évidence de la colonne. actuellement triés ainsi que les flèches qui apparaîtront à côté du texte de l'en-tête (pour le tri croissant ou décroissant). C'est le champ que nous avions déjà défini précédemment sur notre état, state.sort .

Enfin, nous devons souscrire à l'événement onSortChange . Cela ressemble à l'événement de pagination où il nous donne la possibilité de prendre ce que l'utilisateur tente de mettre à jour en termes de tri et de l'appliquer à nos données. Puisque nous faisons cela localement, nous pouvons simplement mettre à jour l'ordre de tri, mais si nous avions une autre méthode de stockage de données, nous appliquerions simplement le tri manuellement sur nos données.

 this.shortChange = (event) => {
  this.setState ({
    tri: event.sort
  })
}

Pour donner une idée de ce à quoi cette variable de type pourrait ressembler, un objet de type typique peut ressembler à ceci:

 sort: [
  { field: "heroName", dir: "asc" }
]

Ce qui est dit ci-dessus indique que nous trions sur le heroName et nous le faisons de manière ascendante. Nous pourrions techniquement définir cela dès le début et définir un ordre de tri dès le début, mais pour le moment, nous allons laisser les choses en blanc.

Pour obtenir les principes de base du tri, c’est tout ce que nous devons faire. Cependant, l'organisation du tri des données pouvant s'avérer fastidieuse, nous pouvons nous appuyer sur le cadre de KendoReact Data Query pour vous aider. Ceci a une tonne d'outils utiles pour nous, l'un étant orderBy que nous utiliserons ici pour commander notre tableau selon notre ordre de tri.

Notez que cela est utilisé pour aider à gérer le tableau local. en tant que magasin de données. Pour des scénarios plus avancés (gestion d’état, etc.), nous n’aurions pas vraiment besoin du cadre de requête de données.

Nous l’avions déjà ajouté à notre projet lors de la première installation de notre npm mais importons-le dans notre composant.

 import {orderBy} from '@ progress / kendo-data-query';




  


               

Nous pouvons maintenant utiliser orderBy () pour faire quelque chose comme ceci:

 const data = [
  {name: " Porc "catégorie: " Nourriture "sous-catégorie: " Viande "},
  {nom: " Poivre "catégorie: " Nourriture "sous-catégorie: " Légumes "},
  {nom: " Bœuf "catégorie: " Nourriture "sous-catégorie: " Viande "}
];

const result = orderBy (data, [{field:" name, "dir: " asc "}]);

console.log (résultat);

/ * sortie
[
  {" name ": " Bœuf "" catégorie ": " Alimentation "" sous-catégorie ": " de viande ".
  {" name ": " Du poivre "" catégorie ": " de la nourriture "de la sous-catégorie ": " de la nourriture "de la ":
  {" name ": " Porc "" catégorie ": " Nourriture "" sous-catégorie ": " de viande ".
]
* /

Comme nous pouvons le voir, il suffit de passer un tableau, puis l'objet de tri à cette fonction. Dans notre cas, cela signifie que nous devons appeler orderBy sur notre ensemble de données d'origine, puis transmettre également l'objet de tri.

 data = {orderBy (this.state.gridData, this. state.sort)}

Cependant, si nous voulons aussi avoir la pagination, nous devons encore utiliser array.slice . Cela devrait être fait sur le résultat de orderBy afin que nous puissions simplement l'enchaîner à la fin de notre appel orderBy .

 data = {orderBy (this.state.gridData, this.state.sort) .slice (this.state.skip, this.state.take + this.state.skip)}

Avec tout cela configuré, notre configuration de grille devrait ressembler à ceci:

Si nous lançons ce code, nous verrons que nous pouvons trier nos colonnes simplement en cliquant sur l'en-tête et nous obtiendrons ce joli indicateur pour montrer quelle direction nous sommes en train de faire le tri. Nous allons faire la course ici!

Filtrage

Le prochain filtrage est le suivant. C'est à peu près la même configuration que nous avons avec le tri ci-dessus. Nous devons définir une propriété définissant le filtrage, fournir une liaison à notre état pour nous permettre d'indiquer ce qui est actuellement filtré (comme l'indicateur d'ordre de tri ci-dessus) et enfin utiliser un événement lorsque le filtre est modifié. Nos filtres sont également configurés avec un objet définissant le filtre et les propriétés de filtrage, comme le type de filtre appliqué ("contient" ou "commence par", etc.).

Nous n'avons pas nécessairement besoin de ajoutons une variable de filtre à notre état, nous allons donc ignorer ceci pour le moment. Si nous voulions filtrer quelque chose à l'avance, nous pourrions le faire assez facilement en définissant cet objet sur le filtre que nous souhaitons appliquer.

Sur la grille réelle, nous avons d'abord mis en place filterable = {true} nos icônes de filtre et la ligne de filtre apparaîtront immédiatement au-dessus de chaque colonne. Ensuite, nous avons défini la propriété filter sur la variable d'état définie précédemment, donc filter = {this.state.filter} .

Nous nous abonnons ensuite à notre événement. , onFilterChange et utilisez-le pour mettre à jour notre état lorsqu'un utilisateur filtre.

 this.filterChange = (event) => {
  this.setState ({
    filtre: event.filter
  })
}

Pour référence rapide, la variable de filtre attend un CompositeFilterDescriptor qui n'est en réalité qu'un tableau de FilterDescriptors ainsi qu'une variable logique qui définit si nous utilisons "et" ou un filtre "ou". Le FilterDescriptor actuel est un peu long, je vous recommande donc de consulter la documentation que je viens de relier afin de voir comment elle est construite manuellement.

La dernière partie à laquelle nous devons répondre est réellement modifier nos données. Nous sommes à un point où le filtrage, le tri et la pagination doivent être appliqués à la grille et cela peut rapidement devenir difficile à suivre. Comment appliquons-nous l'ordre de tri, l'ordre de filtrage et éventuellement le regroupement sur notre tableau? Eh bien, il y a le moyen manuel et le moyen facile: la fonction de processus KendoReact Data Query .

En bref: La fonction Data Query and Process ()

sa propre mini-section ici, car cela nous fera gagner du temps et des efforts lorsqu'il s'agira de masser nos données pour cet échantillon. Comme mentionné précédemment, ceci n'est pas une obligation à utiliser avec la grille. En fait, beaucoup d'entre vous auront leur propre gestion d'état déjà configurée. C’est quelque chose de très utile pour traiter des données dans des tableaux locaux ou sans la gestion d’états existante. Parfait pour cet échantillon particulier. En outre, en fonction de votre situation dans React, vous pouvez compter sur votre projet pour votre premier projet ou vos deux premiers projets lorsque vous travaillez avec KendoReact Grid ou certains des autres composants liés aux données.

Le processus () La fonction prend simplement nos données initiales comme son premier paramètre et, en deuxième lieu, un objet contenant le saut pris sorte filtrer et grouper (plus sur le regroupement prochainement) les variables qui proviennent de la grille (ou sont prédéfinies) et applique toutes ces options à notre ensemble de données, en générant toutes les informations dans un objet DataResult que la grille KendoReact utilise pour avoir une idée des options de page, de filtre, de tri et de groupe actuelles.

Puisque nous n'utilisons pas Redux ou quelque chose de similaire, nous allons nous en remettre sur cette méthode dans le reste de l'échantillon. Cela économise finalement une tonne de temps lié à nos composants liés aux données, comme la grille avec un tableau local, comme nous le faisons ici.

Retour à la filtration

Maintenant que nous connaissons le process nous pouvons l'importer à la place de notre orderBy (à partir du même paquet).

 import {process} de '@ progress / kendo-data-query';

Ensuite, dans notre donnée nous procédons simplement comme suit:

 data = {processus (this.state.gridData, this.state)}

Est-ce facile? Comme nous définissons déjà toutes les variables dont nous avons besoin dans l'état de notre composant, nous pouvons simplement passer dans this.state sans créer de nouvel objet! Le résultat est le suivant: nous filtrons, trions et paginons dans toutes nos données!

Nettoyer les choses un peu

Avant de poursuivre, vous avez peut-être remarqué qu'il est très occupé dans nos composant en ce moment. Nous avons tous ces paramètres qui ont été configurés sur la grille, tous les champs de notre état et tous ces événements qui se déclenchent. Tout comme nous avons utilisé process () pour simplifier notre liaison de données, pourrions-nous faire de même avec la configuration de notre grille?

Je simplifie peut-être trop la configuration, mais la réponse courte est-ce que oui, il est certainement possible de rendre les choses plus faciles! Parlons de onDataStateChange .

L'événement onDataStateChange se déclenche chaque fois que l'état de la grille est modifié. Cela signifie que tous nos appels sur surPageChange surSortChange surFilterChange (et bientôt surGroupChange lorsque nous arrivons à grouper) peuvent être remplacés. avec un seul abonnement onDataStateChange à la place.

Nous voudrons utiliser cet événement, mais nous voudrons peut-être commencer par jeter un coup d'œil au reste de notre code. Actuellement, nous faisons beaucoup en plaçant tout à la racine de notre objet d'état. Ce serait un peu plus structuré si nous définissions une variable pour contenir spécifiquement toutes les informations relatives à la grille. Appelons donc ceci gridStateData et plaçons nos sauts et prenez . ] variables ici.

 this.state = {
  gridStateData: {
    sauter: 0,
    prendre 2
  }
}

Avec cela, nous pouvons passer à la mise en œuvre de surDataStateChange avec les éléments suivants:

 this.dataStateChange = (event) => {
  this.setState ({
    gridStateData: event.data
  });
}

Ensuite, simplifions un peu l'état de la composante et déplaçons nos données hors de l'État. Passons plutôt à notre composante React ce que vous voudrez probablement faire même dans des applications plus simples. Ce sera en dehors de la portée de notre composant et juste au-dessus de la fonction ReactDOM.render . N'oubliez pas d'ajouter un accessoire et de transmettre les données!

 const appData = [
  {" prenom ": " Clark "" nom ": " Kent "" nom d'héro ": ": " Superman ",
  {" prenom ": " Bruce "" nom ": ": Wayne "" nom_homme ": ": " Batman ",
  {" prenom ": " Kendra "" nom ": ": Saunders "" nom d'héro ": ": ": ".
  {" prenom ": " Diana "" nom ": " Prince "" nom héros ": ": femme de rêve ".
];

ReactDOM.render (
    ,
    document.querySelector ('my-app')
)

Cela signifie que nous devrons mettre à jour les données sur notre grille comme suit:

 data = {processus (this.props.gridData, this.state.gridStateData)}

Remarquez comment nous appelons this.props.gridData dans la mesure où nous transmettons maintenant cela à la composante via un accessoire.

Un autre domaine dans lequel nous pouvons nous pencher, car nous utiliser process () et onDataStateChange pour mettre à jour et définir l'état de chaque action de tri, filtre, page et groupe, permet également d'éliminer de nombreuses propriétés redondantes.

Bien que nous devions techniquement utiliser des choses comme comme sauter prendre etc. dans la grille – pourquoi les écrire sur la grille quand elles sont facilement disponibles dans notre state.gridStateData ? Nous pouvons utiliser JSX Spread Attributes pour nous aider ici. Nous devons simplement ajouter {... this.state.gridStateData} à la déclaration de notre grille. Nous nous retrouvons finalement avec ceci.

Regardez comme c'est propre en comparaison! À titre de référence, voici ce que nous avons jusqu'à présent dans notre composant:

Regroupement

Le dernier élément que nous devrions couvrir est le regroupement. Il y a encore quelques points à garder à l'esprit lors de la création d'un groupe, mais commencer par la façon dont la configuration initiale pourrait ressembler finit par ressembler à ce que nous avons fait jusqu'à présent. Tout comme le tri et le filtrage, nous devons définir nos options de configuration groupable et onGroupChange . Leur configuration nous donnera la possibilité de glisser-déposer un en-tête pour commencer à grouper, ou grouper sur un champ au départ.

Il existe une autre partie du groupement à laquelle nous ne pensons peut-être pas initialement, c'est l'en-tête de groupe de tout groupe. C’est ce qui nous permet de fournir des informations sur notre groupe. C’est d’abord la valeur du champ sur lequel nous groupons, mais qu’en est-il d’ajouter des informations supplémentaires, telles que des agrégats, ici? En outre, cela contient les icônes de développement et d’effondrement, qui devraient être suivies quelque part dans notre État et utilisées par le réseau.

C’est la raison pour laquelle il faudra configurer deux autres options de configuration: onExpandChange , qui se déclenche à chaque fois que nous réduisons ou développons un groupe, ainsi que expandField qui permet de définir si un élément est développé ou réduit en fonction de la valeur de ce champ.

nos têtes, allons-y et mettons en place un regroupement! Premièrement, ajoutons groupable = {true} sur notre grille. Nous n'avons pas besoin de définir surGroupChange bien que nous utilisions depuis surDataStateChange . De plus, le groupe sera défini une fois que nous aurons groupé grâce à la propagation que nous réalisons avec {.. this.state.gridStateData} .

Cela ne laisse que les deux options de configuration supplémentaires. installer. Définissons expandField = "expand" . le prop expandField vérifie si un élément de données est développé ou non (sera ajouté uniquement aux éléments de notre en-tête de groupe) et il importe que nous ne l'ayons pas défini ailleurs, même dans notre original . La grille ajoutera simplement ceci si elle n'est pas disponible lorsque nous développons ou réduisons. Nous pouvons nous en sortir puisque nous travaillons avec un tableau local, mais d'autres scénarios peuvent nécessiter de garder les éléments développés séparément de nos données d'origine.

Après cela, nous devrons configurer surExpandChange . pour nous assurer de capturer le moment où un élément est développé et de mettre à jour l'état en conséquence. Nous ajoutons donc onExpandChange = {this.expandChange} à notre grille, puis nous configurons notre fonction this.expandChange comme suit:

 this.expandChange = (événement) => {
  event.dataItem [event.target.props.expandField] = event.value;
  event.target.setState ({});
}

Il convient de noter ici que event.target.setState ({}); sert uniquement à l'intérêt de cette démonstration étant donné que nous traitons avec des données locales. La grille KendoReact (qui est l'événement event.target ) n'a pas d'état interne, c'est pourquoi nous définissons toutes ces variables dans state.gridStateData . . L'appel de setState ({}) avec un objet vide actualisera la grille en fonction des informations mises à jour si un élément est développé ou non. Dans un scénario plus réaliste, il ne s'agirait pas de notre configuration puisque nous ne traiterions probablement pas avec des tableaux locaux comme celui-ci.

En regardant la première ligne de cette fonction, nous accédons à notre expandField variable de manière sécurisée sur notre donnée car elle pourrait devenir undefined autrement. En outre, cela nous donne de la flexibilité au cas où nous mettrions à jour le champ expandField que nous souhaitons suivre plus tard. Nous plaçons ceci dans event.value qui sera vrai ou faux selon que nous agrandissons ou réduisons le groupe.

Nous devrions ajouter tout ce que nous avons à ajouter dans le regroupement! Ce qu'il reste à faire, c'est de l'essayer en exécutant notre exemple et en faisant glisser un en-tête de colonne dans la zone qui apparaît une fois que nous avons défini sur groupable sur notre grille.

Voici le code source du produit fini, qui est une grille qui peut gérer la pagination, le tri, le filtrage et le regroupement! Pour le plaisir, vous pouvez toujours changer la façon dont vous chargez les données (peut-être via un fichier JSON quelque part) et voir que cela fonctionnera toujours, car nous avons créé une configuration assez générique avec cela.

Mais attendez, il y a plus! [19659144] Ce billet de blog couvrait beaucoup de sujets jusqu’à présent, mais nous venons de présenter un ensemble de fonctionnalités de base. Nous avons couvert tout cela en nous liant à un tableau local plutôt qu’à quelque chose comme Redux ( auquel nous pouvons certainement nous attacher en passant ). Nous avons donc tout simplement rayé la surface et la grille de KendoReact peut faire encore plus!

Un petit échantillon teaser, il y a édition hiérarchie . Exportation Excel modèles de cellules redimensionnement de colonne réorganisation de colonne et bien plus encore! Au-delà de cela, il existe également des personnalisations qui peuvent être faites avec la façon dont nous affichons les filtres, plus autour du regroupement – la liste s'allonge encore et encore. cela peut être fait avec le composant. C'est vraiment la raison pour laquelle la documentation de la grille de KendoReact existe, et il y a beaucoup plus d'échantillons pour vérifier ce que la grille peut faire! Ce que nous avons essayé de faire ici, c’est de donner une sorte d’introduction au niveau 101 de certaines des fonctionnalités les plus utilisées et de donner des idées sur la façon dont la grille KendoReact peut être ajoutée à vos projets dès aujourd’hui!

KendoReact, vous pouvez en apprendre plus à ce sujet ici ou n'hésitez pas à passer directement à un essai gratuit de 30 jours .

---