Come costruire un datagrid modificabile in tempo reale in React

Un datagrid consente di visualizzare e modificare i dati. Questa è una funzionalità vitale nella maggior parte delle applicazioni basate sui dati.

Potresti averlo implementato in una delle tue app React in passato. Forse hai usato librerie come reazioni-bootstrap-table, reazioni-griglia o reazioni-tabella. Con questi, puoi aggiungere un Datagrid alla tua app React. Ma cosa succede se si desidera che le modifiche vengano eseguite in tempo reale e gli aggiornamenti sincronizzati su tutti i dispositivi collegati e i loro browser?

In questo articolo, ti mostrerò come creare un datagrid in tempo reale in React usando reazioni-tabella e Hamoni Sync.

React-table è una libreria leggera e veloce per il rendering di tabelle in React e supporta l'impaginazione e molte altre funzionalità.

Hamoni Sync è un servizio di sincronizzazione dello stato in tempo reale che consente di sincronizzare lo stato dell'applicazione in tempo reale. Ti mostrerò come costruire un datagrid con il nome e il cognome delle persone.

Se vuoi seguire, dovresti avere una certa conoscenza di React e avere i seguenti strumenti installati:

  1. NodeJS
  2. npm & npx. Se hai installato npm versione 5.2.0 o successiva, installa npx insieme a npm.
  3. Create-reagiscono-app

Crea l'app React

Per prima cosa creeremo un nuovo progetto React usando create -eagire-app.

Apri la riga di comando ed esegui npx create-reply-app realtime-reazioni-datatable. Questo avvierà un'applicazione React per noi creando una nuova directory realtime-reag-datatable con i file necessari per creare un'applicazione React.

Con l'app React creata, è necessario installare la tabella di reazione e Hamoni Sync. Sempre dalla riga di comando, esegui cd realtime-reazioni-datatable per passare alla directory per l'app. Esegui npm i-table hamoni-sync nella riga di comando per installare entrambi i pacchetti.

Rendering di Datagrid

Per rendere il datagrid, useremo il componente della tabella di reazione. Apri il file src / App.js e aggiornalo con il codice seguente:

import React, {Component} da "reagire";
importare il logo da "./logo.svg";
import "./App.css";
// Importa tabella di reazione
importare ReactTable da "reazioni-tabella";
import "reazioni-tabella / reazioni-tabella.css";
// Importa Hamoni Sync
importare Hamoni da "hamoni-sync";
class App estende Component {
  constructor () {
    super();
    this.state = {
      dati: [],
      nome di battesimo: "",
      cognome: ""
    };
  }
  handleChange = event => {
    if (event.target.name === "firstName")
      this.setState ({firstName: event.target.value});
    if (event.target.name === "lastName")
      this.setState ({lastName: event.target.value});
  };
  handleSubmit = event => {
    event.preventDefault ();
  };
  renderEditable = cellInfo => {
    ritorno (
      
{           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;
    ritorno (
      
        
          logo           

Benvenuto in React

                 

          

            

Aggiungi nuovo record

             {""}             
            
          
        
        
           (                   
                )               }             ]}             defaultPageSize = {10}             className = "- striped -highlight"           />                     );   } }
esportazione app predefinita;

Il codice sopra visualizza un modulo e un componente modificabile della tabella di reazione. esegue il rendering di un componente con dati, colonne e oggetti di scena DefaultPageSize. I puntelli dei dati contengono i dati da visualizzare e i puntelli delle colonne per la definizione della colonna. La proprietà accessor nei puntelli delle colonne indica la proprietà che contiene il valore da visualizzare per quella colonna. Cella: la proprietà this.renderEditable nei puntelli delle colonne dice a reattiva-tabella che la colonna è modificabile. Le altre funzioni (handleSubmit & handleChange) consentono di ottenere una nuova immissione di dati dal modulo nella pagina.

Aggiungi Hamoni Sync

I dati per il datagrid verranno recuperati e aggiornati in tempo reale utilizzando Hamoni Sync. Abbiamo già importato la libreria Hamoni alla riga 18 in App.js;

importare Hamoni da "hamoni-sync";

Dobbiamo inizializzarlo e connetterci al server Hamoni. Per fare ciò abbiamo bisogno di un account e un ID applicazione. Seguire questi passaggi per creare un'applicazione in Hamoni.

  1. Registrati e accedi alla dashboard di Hamoni
  2. Inserisci il nome della tua applicazione preferita nel campo di testo e fai clic sul pulsante Crea. Ciò dovrebbe creare l'app e visualizzarla nella sezione Elenco applicazioni.
  3. Fai clic sul pulsante "Mostra ID account" per visualizzare l'ID account.

Aggiungi il seguente codice ad App.js per inizializzare e connettersi al server Hamoni Sync.

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

Il codice sopra collegherà il dispositivo client o il browser al server Hamoni Sync. Copia il tuo account e l'ID applicazione dalla dashboard e sostituiscili rispettivamente con il segnaposto di stringa.

Aggiungere quanto segue alla funzione nel blocco then (), da eseguire quando si connette correttamente al server:

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);

Il codice sopra chiama hamoni.get ("datagrid") per ottenere i dati, con datagrid come nome dello stato dell'applicazione su Hamoni Sync. Hamoni Sync ti consente di memorizzare 3 tipi di stato indicati come primitive Sync. Loro sono:

  1. Value Primitive: questo tipo di stato contiene informazioni semplici rappresentate con tipi di dati come stringa, booleano o numeri. È più adatto per casi come conteggio dei messaggi non letti, toggle, ecc.
  2. Primitivo oggetto: lo stato dell'oggetto rappresenta gli stati che possono essere modellati come oggetto JavaScript. Un esempio di utilizzo potrebbe essere la memorizzazione del punteggio di un gioco.
  3. Elenco primitivo: contiene un elenco di oggetti stato. Un oggetto stato è un oggetto JavaScript. È possibile aggiornare un elemento in base al suo indice nell'elenco.

Se lo stato è disponibile, si risolve e restituisce una promessa con l'oggetto primitivo di stato. Questo oggetto ci dà accesso a metodi per aggiornare lo stato e ottenere aggiornamenti di stato in tempo reale.

Alla riga 36 abbiamo usato il metodo getAll () per ottenere dati e impostare lo stato per il componente React. Inoltre, i metodi onItemAdded () e onItemUpdated () vengono utilizzati per ottenere aggiornamenti quando viene aggiunto o aggiornato un elemento. Il metodo onSync () è utile in uno scenario in cui un dispositivo o un browser perde la connessione e, quando si riconnette, tenta di ottenere l'ultimo stato dal server e di aggiornare lo stato locale, se presente.

Aggiungi e aggiorna elementi

Dalla sezione precedente, siamo in grado di ottenere i dati per il datagrid e aggiornare lo stato quando viene aggiunto o aggiornato un elemento. Aggiungiamo il codice per aggiungere nuovi elementi e aggiornare un elemento quando una colonna è stata modificata. Aggiungi il seguente codice al metodo handleSubmit:

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

Questo codice ottiene il nome e il cognome dal modulo e lo aggiunge alla primitiva dello stato elenco su Hamoni Sync chiamando il metodo push (). Ciò attiverà il metodo onItemAdded ().

Per aggiornare gli elementi man mano che vengono modificati nel datagrid, aggiorneremo la funzione passata ai puntelli onBlur sulla linea 84 come segue:

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

Questo codice aggiorna l'elemento nell'indice recuperato dall'oggetto cellInfo. Per aggiornare una primitiva di stato elenco in Hamoni Sync, si chiama il metodo update () con l'indice dell'elemento e il valore da aggiornare. Il metodo renderEditable ora dovrebbe apparire così dopo l'ultima modifica:

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

A questo punto abbiamo quasi tutto ciò che è necessario per eseguire l'app ad eccezione dei dati iniziali che verranno resi sul datagrid.

Dobbiamo creare lo stato e fornirgli alcuni dati su Hamoni Sync. Aggiungi un nuovo file seed.js nella radice della directory di lavoro e aggiungi il seguente codice:

const Hamoni = request ("hamoni-sync");
let hamoni = new Hamoni ("AccountID", "APP_ID");
hamoni
  .Collegare()
  .then (response => {
    hamoni
      .createList ("datagrid", [
        {firstName: "James", lastName: "Darwin"},
        {firstName: "Jimmy", lastName: "August"}
      ])
      .then (() => console.log ("crea successo"))
      .catch (console.log);
  })
  .catch (console.log);

Ciò creerà uno stato primitivo di elenco su Hamoni Sync, con un nome di datagrid. Sostituisci la stringa AccountID e APP_ID con l'account e l'ID applicazione. Apri la riga di comando ed esegui il nodo seed.js. Questo dovrebbe riuscire e stampare creare un messaggio di successo.

Ora possiamo avviare l'app React e vedere la nostra app in azione! Esegui il comando npm start nella riga di comando e aprirà l'applicazione nel browser predefinito.

Evviva! Abbiamo un datagrid modificabile in tempo reale con impaginazione!

Conclusione

Abbiamo creato un datagrid in tempo reale in React utilizzando la tabella di reazione e Hamoni Sync. Con la tabella di reazione che alimenta il datagrid e Hamoni Sync gestisce lo stato del datagrid. Tutto ciò è stato ottenuto in poche righe di codice e meno sforzo nel progettare la logica di stato in tempo reale. Puoi ottenere l'app completa di ciò che abbiamo creato su GitHub. È possibile tenere traccia di quale cella viene modificata o bloccare le celle attualmente modificate da un altro utente. Lo lascerò come un fine settimana per te.

Sentiti libero di lasciare un commento se qualcosa non è chiaro o incontri problemi durante il tentativo di aggiungere il blocco o evidenziare le celle in fase di modifica.

Buona codifica