Comment construire une grille de données éditable en temps réel dans React

Une grille de données vous permet d'afficher et de modifier des données. Ceci est une fonctionnalité vitale dans la plupart des applications basées sur les données.

Vous avez peut-être déjà implémenté cela dans l'une de vos applications React. Peut-être avez-vous utilisé des bibliothèques telles que react-bootstrap-table, react-grid ou react-table. Avec ceux-ci, vous pouvez ajouter une grille de données à votre application React. Mais que se passe-t-il si vous souhaitez que les modifications soient apportées en temps réel et que les mises à jour soient synchronisées sur tous les appareils connectés et leurs navigateurs?

Dans cet article, je vais vous montrer comment créer une grille de données en temps réel dans React à l'aide de react-table et de Hamoni Sync.

react-table est une bibliothèque légère et rapide pour le rendu des tables dans React. Elle prend en charge la pagination et bien d'autres fonctionnalités.

Hamoni Sync est un service de synchronisation d'état en temps réel qui vous permet de synchroniser l'état de votre application en temps réel. Je vais vous montrer comment construire une grille de données avec les noms et prénoms des personnes.

Si vous souhaitez suivre, vous devez avoir des connaissances de React et installer les outils suivants:

  1. NodeJS
  2. npm & npx. Si vous avez installé npm version 5.2.0 ou supérieure, il installe npx à côté de npm.
  3. créer-réagir-app

Créer l'application React

Nous allons d’abord créer un nouveau projet React en utilisant create-react-app.

Ouvrez la ligne de commande et exécutez npx créer-réagir-application en temps réel-réagir-datatable. Cela amorce pour nous une application React en créant un nouveau répertoire realtime-react-datatable avec les fichiers nécessaires à la création d’une application React.

Avec l'application React créée, nous devons installer react-table et Hamoni Sync. Toujours sur la ligne de commande, exécutez cd realtime-react-datatable pour basculer vers le répertoire de l'application. Exécutez npm i react-table hamoni-sync en ligne de commande pour installer les deux packages.

Rendre le Datagrid

Pour rendre la grille de données, nous allons utiliser le composant react-table. Ouvrez le fichier src / App.js et mettez-le à jour avec le code ci-dessous:

importer Réagir, {Composant} de "réagir";
importer le logo de "./logo.svg";
importer "./App.css";
// Importer une table de réaction
importer ReactTable de "react-table";
importer "react-table / react-table.css";
// Importer Hamoni Sync
importer Hamoni de "hamoni-sync";
La classe App étend le composant {
  constructeur () {
    super();
    this.state = {
      Les données: [],
      Prénom: "",
      nom de famille: ""
    };
  }
  handleChange = event => {
    if (event.target.name === "prénom")
      this.setState ({firstName: event.target.value});
    if (event.target.name === "lastName")
      this.setState ({lastName: event.target.value});
  };
  handleSubmit = event => {
    event.preventDefault ();
  };
  renderEditable = cellInfo => {
    revenir (
      
{           const data = [... this.state.data];           data [cellInfo.index] [cellInfo.column.id] = e.target.innerHTML;           this.setState ({data});         }}         dangereusementSetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     )   };
  render () {
    const {data} = this.state;
    revenir (
      
        
          logo           

Bienvenue dans React                  

          

            

Ajouter un nouvel enregistrement             

            
          
        
        
           (                   
                )               }             ]}             defaultPageSize = {10}             className = "- striped -highlight"           />                     )   } }
exportation par défaut App;

Le code ci-dessus rend une fiche et un composant éditable de la table de réaction. affiche un composant avec des données, des colonnes et des propriétés defaultPageSize. Les accessoires de données contiennent les données à afficher et les accessoires de colonne pour la définition de colonne. La propriété d'accès dans les colonnes props indique la propriété qui contient la valeur à afficher pour cette colonne. Cellule: La propriété this.renderEditable dans les colonnes props indique à react-table que la colonne est modifiable. Les autres fonctions (handleSubmit & handleChange) permettent d’obtenir de nouvelles entrées de données à partir du formulaire de la page.

Ajouter Hamoni Sync

Les données de la grille de données seront récupérées et mises à jour en temps réel à l'aide de Hamoni Sync. Nous avons déjà importé la bibliothèque Hamoni sur la ligne 18 dans App.js;

importer Hamoni de "hamoni-sync";

Nous devons l'initialiser et nous connecter au serveur Hamoni. Pour ce faire, nous avons besoin d'un compte et d'un identifiant d'application. Suivez ces étapes pour créer une application dans Hamoni.

  1. S'inscrire et se connecter au tableau de bord Hamoni
  2. Entrez le nom de votre application préférée dans le champ de texte et cliquez sur le bouton Créer. Cela devrait créer l'application et l'afficher dans la section de la liste des applications.
  3. Cliquez sur le bouton «Show AccountID» pour afficher votre identifiant de compte.

Ajoutez le code suivant à App.js pour l'initialiser et vous connecter au serveur Hamoni Sync.

composantDidMount () {
    let hamoni = new Hamoni ("ACCOUNT_ID", "APP_ID");
    hamoni
      .relier()
      .then (() => {
      })
      .catch (console.log);
  }

Le code ci-dessus connectera le périphérique client ou le navigateur au serveur Hamoni Sync. Copiez vos identifiants de compte et d’application depuis le tableau de bord et remplacez-les par l’espace réservé chaîne.

Ajoutez ce qui suit à la fonction dans le bloc then (), à exécuter une fois la connexion au serveur établie:

hamoni
    .get ("datagrid")
    .then (listPrimitive => {
      this.listPrimitive = listPrimitive;
      this.setState ({
        data: [... listPrimitive.getAll ()]
      });
      listPrimitive.onItemAdded (item => {
        this.setState ({data: [... this.state.data, item.value]});
      });
      listPrimitive.onItemUpdated (item => {
        let data = [
        ... this.state.data.slice (0, item.index),
        item.value,
        ... this.state.data.slice (item.index + 1)
        ];
        this.setState ({data: data});
      });
      listPrimitive.onSync (data => {
        this.setState ({data: data});
      });
    })
    .catch (console.log);

Le code ci-dessus appelle hamoni.get ("datagrid") pour obtenir les données, avec datagrid comme nom de l'état de l'application sur Hamoni Sync. Hamoni Sync vous permet de stocker 3 types d’états appelés primitives Sync. Elles sont:

  1. Valeur primitive: Ce type d'état contient des informations simples représentées par des types de données tels que chaîne, booléen ou nombres. Il est particulièrement adapté aux cas tels que le nombre de messages non lus, les basculements, etc.
  2. Primitive d'objet: l'état d'objet représente les états pouvant être modélisés comme un objet JavaScript. Un exemple d'utilisation pourrait être de stocker le score d'une partie.
  3. List Primitive: Ceci contient une liste d'objets d'état. Un objet state est un objet JavaScript. Vous pouvez mettre à jour un élément en fonction de son index dans la liste.

Si l'état est disponible, il résout et renvoie une promesse avec l'objet primitif d'état. Cet objet nous donne accès aux méthodes pour mettre à jour l'état et obtenir les mises à jour d'état en temps réel.

À la ligne 36, nous avons utilisé la méthode getAll () pour obtenir des données et définir l’état du composant React. De plus, les méthodes onItemAdded () et onItemUpdated () sont utilisées pour obtenir les mises à jour lorsqu'un élément est ajouté ou mis à jour. La méthode onSync () est utile dans les cas où un périphérique ou un navigateur perd la connexion et tente de récupérer le dernier état du serveur et de mettre à jour l'état local, le cas échéant.

Ajouter et mettre à jour des éléments

Dans la section précédente, nous pouvons obtenir les données de la grille de données et mettre à jour l'état lorsqu'un élément est ajouté ou mis à jour. Ajoutons du code pour ajouter de nouveaux éléments et mettre à jour un élément lorsqu'une colonne a été modifiée. Ajoutez le code suivant à la méthode handleSubmit:

handleSubmit = event => {
    this.listPrimitive.push ({
        firstName: this.state.firstName,
        lastName: this.state.lastName
    });
    this.setState ({firstName: "", lastName: ""});
    event.preventDefault ();
};

Ce code obtient le nom et le prénom du formulaire et l'ajoute à la primitive d'état de liste sur Hamoni Sync en appelant la méthode push (). Cela déclenchera la méthode onItemAdded ().

Afin de mettre à jour les éléments au fur et à mesure qu'ils sont édités dans la grille de données, nous mettrons à jour la fonction transmise aux accessoires onBlur à la ligne 84 comme suit:

onBlur = {e => {
    let row = this.state.data [cellInfo.index];
    row [cellInfo.column.id] = e.target.innerHTML;
    this.listPrimitive.update (cellInfo.index, ligne);
}}

Ce code met à jour l'élément à l'index extrait de l'objet cellInfo. Pour mettre à jour une primitive d'état de liste dans Hamoni Sync, vous appelez la méthode update () avec l'index de l'élément et la valeur à mettre à jour. La méthode renderEditable devrait maintenant ressembler à ceci après le dernier changement:

renderEditable = cellInfo => {
    revenir (
      
{           let row = this.state.data [cellInfo.index];           row [cellInfo.column.id] = e.target.innerHTML;           this.listPrimitive.update (cellInfo.index, ligne);         }}         dangereusementSetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     )   };

À ce stade, nous disposons de presque tout ce qui est nécessaire pour exécuter l’application, à l’exception des données initiales qui seront restituées dans la grille de données.

Nous devons créer l'état et lui donner quelques données sur Hamoni Sync. Ajoutez un nouveau fichier seed.js à la racine de votre répertoire de travail et ajoutez-y le code suivant:

const Hamoni = require ("hamoni-sync");
let hamoni = new Hamoni ("AccountID", "APP_ID");
hamoni
  .relier()
  .then (réponse => {
    hamoni
      .createList ("datagrid", [
        {prénom: "James", nom: "Darwin"},
        {firstName: "Jimmy", lastName: "August"}
      ])
      .then (() => console.log ("créer le succès"))
      .catch (console.log);
  })
  .catch (console.log);

Cela créera un état primitif de liste sur Hamoni Sync, avec un nom de datagrid. Remplacez la chaîne AccountID et APP_ID par votre compte et votre ID d'application. Ouvrez la ligne de commande et exécutez le noeud seed.js. Cela devrait réussir et imprimer un message de réussite.

Nous pouvons maintenant démarrer l'application React et voir notre application en action! Exécutez la commande npm start dans la ligne de commande et l'application sera ouverte dans votre navigateur par défaut.

Hourra! Nous avons une grille de données éditable en temps réel avec une pagination!

Conclusion

Nous avons construit une grille de données en temps réel dans React en utilisant react-table et Hamoni Sync. Avec react-table alimentant la grille de données et Hamoni Sync gérant l’état de la grille de données. Tout cela a été réalisé en quelques lignes de code et en moins d’efforts pour concevoir une logique d’état en temps réel. Vous pouvez obtenir l'application finale de ce que nous avons construit sur GitHub. Il est possible de suivre la cellule en cours d’édition ou de verrouiller les cellules en cours de modification par un autre utilisateur. Je vais laisser ça comme un hack de week-end pour vous.

N'hésitez pas à laisser un commentaire si quelque chose n'est pas clair ou à rencontrer des problèmes lorsque vous essayez d'ajouter un verrou ou de mettre en surbrillance les cellules en cours de modification.

Bonne codage