Sådan oprettes en realtid redigerbar datagrid til reaktion

En datagrid giver dig mulighed for at vise og redigere data. Dette er en vigtig funktion i de fleste datadrevne applikationer.

Du har muligvis implementeret dette i en af ​​dine React-apps i fortiden. Måske brugte du biblioteker som react-bootstrap-table, react-grid eller react-table. Med dem kan du tilføje en Datagrid til din React-app. Men hvad nu hvis du ønsker, at ændringerne skal udføres i realtid og opdateringer, der synkroniseres på tværs af alle tilsluttede enheder og deres browsere?

I denne artikel vil jeg vise dig, hvordan du opbygger en real-time datagrid i React ved hjælp af react-table og Hamoni Sync.

react-table er et let og hurtigt bibliotek til gengivelse af tabeller i React, og det understøtter pagination og mange flere funktioner.

Hamoni Sync er en realtidssynkroniseringstjeneste, der giver dig mulighed for at synkronisere din applikationstilstand i realtid. Jeg vil vise dig, hvordan du bygger en datagrid med folks for- og efternavne.

Hvis du vil følge med, skal du have noget kendskab til React og have følgende værktøjer installeret:

  1. NodeJS
  2. npm & npx. Hvis du har installeret npm version 5.2.0 eller nyere, installerer den npx ved siden af ​​npm.
  3. create-reagerer-app

Opret appen React

Først opretter vi et nyt React-projekt ved hjælp af create-react-app.

Åbn kommandolinjen, og kør npx create-react-app realtime-react-datatable. Dette vil bootstrap et React-program for os ved at oprette et nyt bibliotek realtime-react-datatable med de filer, der er nødvendige for at oprette et React-program.

Med den oprettede React-app er vi nødt til at installere react-table og Hamoni Sync. Kør stadig cd realtime-react-datatable på kommandolinjen for at skifte til kataloget til appen. Kør npm i react-table hamoni-synkronisering i kommandolinjen for at installere begge pakker.

Gengiv Datagrid

For at gengive datagridet bruger vi reaktionstabelkomponenten. Åbn filen src / App.js, og opdater den med koden herunder:

import React, {Component} fra "react";
import logo fra "./logo.svg";
import "./App.css";
// Import-reaktionstabel
import ReactTable fra "react-table";
import "react-table / react-table.css";
// Import Hamoni Sync
importer Hamoni fra "hamoni-synkronisering";
klasse App udvider komponent {
  konstruktør () {
    super();
    this.state = {
      data: [],
      fornavn: "",
      efternavn: ""
    };
  }
  handleChange = event => {
    if (event.target.name === "firstName")
      this.setState ({firstName: event.target.value});
    if (event.target.name === "efternavn")
      this.setState ({lastName: event.target.value});
  };
  handleSubmit = event => {
    event.preventDefault ();
  };
  renderEditable = cellInfo => {
    Vend tilbage (
      
{           const data = [... this.state.data];           data [cellInfo.index] [cellInfo.column.id] = e.target.innerHTML;           this.setState ({data});         }}         dangerouslySetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     );   };
  render () {
    const {data} = this.state;
    Vend tilbage (
      
        
          logo           

Velkommen til reaktion

                 

          

            

Tilføj ny post

             {""}             
            
          
        
        
           (                   
                )               }             ]}             defaultPageSize = {10}             className = "- stribet -lys"           />                     );   } }
eksport standardapp;

Koden ovenfor giver en form og en redigerbar reaktionstabelkomponent. gengiver en komponent med data, kolonner og defaultPageSize-rekvisitter. Dataprops holder dataene, der skal vises, og kolonner rekvisitter til kolonnedefinitionen. Accessor-egenskaben i kolonner rekvisitter viser den egenskab, der har den værdi, der skal vises for den kolonne. Celle: this.renderEditable egenskab i kolonner rekvisitter fortæller reaktionstabel, at kolonnen er redigerbar. De andre funktioner (handleSubmit & handleChange) gør det muligt at få ny dataindtastning fra formularen på siden.

Tilføj Hamoni Sync

Data for datagrid vil blive hentet og opdateret i realtid ved hjælp af Hamoni Sync. Vi importerede allerede Hamoni-biblioteket på linje 18 i App.js;

importer Hamoni fra "hamoni-synkronisering";

Vi er nødt til at initialisere det og oprette forbindelse til Hamoni-serveren. For at gøre dette har vi brug for en konto og applikations-ID. Følg disse trin for at oprette en applikation i Hamoni.

  1. Registrer og log ind på Hamoni betjeningspanel
  2. Indtast dit foretrukne programnavn i tekstfeltet, og klik på knappen Opret. Dette skal oprette appen og vise den i afsnittet med applikationsliste.
  3. Klik på knappen "Vis konto-ID" for at se dit konto-id.

Føj følgende kode til App.js for at initialisere og oprette forbindelse til Hamoni Sync-server.

componentDidMount () {
    lad hamoni = ny Hamoni ("ACCOUNT_ID", "APP_ID");
    hamoni
      .forbinde()
      .then (() => {
      })
      .catch (console.log);
  }

Koden ovenfor forbinder klientenheden eller browseren til Hamoni Sync-server. Kopier din konto og din applikations-ID fra betjeningspanelet, og erstatt dem med henholdsvis strengpladsholderen.

Føj følgende til funktionen i den derefter () -blok, der skal udføres, når den lykkes med forbindelse til serveren:

hamoni
    .Få ( "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 => {
        lad 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);

Koden ovenfor kalder hamoni.get ("datagrid") for at få dataene, med datagrid som navnet på applikationstilstanden på Hamoni Sync. Hamoni Sync giver dig mulighed for at gemme 3 slags tilstande, der kaldes Sync-primitiver. De er:

  1. Værdi Primitiv: Denne type tilstand indeholder enkle oplysninger repræsenteret med datatyper som streng, boolsk eller tal. Det er bedst egnet til tilfælde som ulæste meddelelsestælling, skift osv.
  2. Objekt primitivt: Objekttilstand repræsenterer tilstande, der kan modelleres som et JavaScript-objekt. Et eksempel på brug kunne være lagring af score for et spil.
  3. Liste over primitive: Dette indeholder en liste over tilstandsobjekter. Et tilstandsobjekt er et JavaScript-objekt. Du kan opdatere et element baseret på dets indeks på listen.

Hvis staten er tilgængelig, løser den og returnerer et løfte med det primitive statsobjekt. Dette objekt giver os adgang til metoder til at opdatere tilstand og få statusopdateringer i realtid.

På linje 36 brugte vi metoden getAll () til at hente data og indstille tilstanden for React-komponenten. Metoderne onItemAdded () og onItemUpdated () bruges også til at få opdateringer, når et element tilføjes eller opdateres. OnSync () -metoden er nyttig i et scenarie, hvor en enhed eller browser mister forbindelsen, og når den tilsluttes igen, forsøger den at hente den seneste tilstand fra serveren og opdatere den lokale tilstand, hvis der er nogen.

Tilføj & opdater elementer

Fra det foregående afsnit er vi i stand til at hente dataene for datagrid og opdatere tilstanden, når et element tilføjes eller opdateres. Lad os tilføje kode for at tilføje nye elementer og opdatere en vare, når en kolonne er redigeret. Føj følgende kode til handleSubmit-metoden:

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

Denne kode får for- og efternavnet fra formularen og tilføjer den til den primære listetilstand på Hamoni Sync ved at kalde metoden push (). Dette vil udløse metoden onItemAdded ().

For at opdatere elementer, efterhånden som de bliver redigeret i datagrid, opdaterer vi funktionen, der er sendt til onBlur-rekvisitterne på linje 84 som følger:

onBlur = {e => {
    lad række = this.state.data [cellInfo.index];
    række [cellInfo.column.id] = e.target.innerHTML;
    this.listPrimitive.update (cellInfo.index, række);
}}

Denne kode opdaterer elementet ved indekset hentet fra cellInfo-objektet. For at opdatere en primitiv listetilstand i Hamoni Sync, kalder du opdateringsmetoden () med indekset for elementet og den værdi, der skal opdateres. Metoden renderEditable skal nu se sådan ud efter den sidste ændring:

renderEditable = cellInfo => {
    Vend tilbage (
      
{           lad række = this.state.data [cellInfo.index];           række [cellInfo.column.id] = e.target.innerHTML;           this.listPrimitive.update (cellInfo.index, række);         }}         dangerouslySetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     );   };

På dette tidspunkt har vi næsten alt, hvad der er nødvendigt for at køre appen undtagen de oprindelige data, der vil blive gengivet på datagrid.

Vi er nødt til at oprette staten og give den nogle data om Hamoni Sync. Tilføj en ny fil seed.js i roden af ​​dit arbejdsmappe, og tilføj den følgende kode til den:

const Hamoni = kræve ("hamoni-synkronisering");
lad hamoni = ny Hamoni ("KontoID", "APP_ID");
hamoni
  .forbinde()
  .then (respons => {
    hamoni
      .createList ("datagrid", [
        {firstName: "James", lastName: "Darwin"},
        {firstName: "Jimmy", lastName: "August"}
      ])
      .then (() => console.log ("skabe succes"))
      .catch (console.log);
  })
  .catch (console.log);

Dette vil skabe en primitiv tilstand på Hamoni Sync med et navn på datagrid. Udskift kontoenID og APP_ID-strengen med din konto og applikations-id. Åbn kommandolinjen, og kør node seed.js. Dette skal lykkes og udskrive skabe succesmeddelelse.

Nu kan vi starte React-appen og se vores app i handling! Kør kommandoen start på kommandolinjen, og det åbner applikationen i din standardbrowser.

Hurra! Vi har en realtid redigerbar datagrid med pagination!

Konklusion

Vi har opbygget en realtid datagrid i React ved hjælp af react-table og Hamoni Sync. Med reaktionstabel, der driver datagrid og Hamoni Sync, der håndterer staten for datagrid. Dette blev alle opnået i få kodelinjer og mindre indsats for at designe realtidsstatuslogik. Du kan få den færdige app til det, vi bygger på GitHub. Det er muligt at spore, hvilken celle der redigeres eller låse de celler, der i øjeblikket redigeres af en anden bruger. Det overlader jeg som en weekend til dig.

Du er velkommen til at efterlade en kommentar, hvis noget ikke er klart eller støder på problemer, mens du prøver at tilføje låse eller fremhæve celler, der redigeres.

Glad kodning