Cómo construir una cuadrícula de datos editable en tiempo real en React

Una cuadrícula de datos le permite mostrar y editar datos. Esta es una característica vital en la mayoría de las aplicaciones basadas en datos.

Es posible que haya implementado esto en una de sus aplicaciones React en el pasado. Tal vez usaste bibliotecas como react-bootstrap-table, react-grid o react-table. Con ellos, puede agregar un Datagrid a su aplicación React. Pero, ¿qué sucede si desea que los cambios se realicen en tiempo real y las actualizaciones sincronizadas en todos los dispositivos conectados y sus navegadores?

En este artículo, le mostraré cómo construir una cuadrícula de datos en tiempo real en React usando react-table y Hamoni Sync.

react-table es una biblioteca ligera y rápida para renderizar tablas en React, y admite paginación y muchas más funciones.

Hamoni Sync es un servicio de sincronización de estado en tiempo real que le permite sincronizar el estado de su aplicación en tiempo real. Le mostraré cómo crear una cuadrícula de datos con los nombres y apellidos de las personas.

Si desea seguirlo, debe tener algún conocimiento de React y tener instaladas las siguientes herramientas:

  1. NodeJS
  2. npm y npx. Si ha instalado npm versión 5.2.0 o superior, instala npx junto con npm.
  3. crear-reaccionar-aplicación

Crea la aplicación React

Primero crearemos un nuevo proyecto React usando create-react-app.

Abra la línea de comando y ejecute npx create-react-app realtime-react-datatable. Esto arrancará una aplicación React para nosotros al crear un nuevo directorio en tiempo real-reaccionar-tabla de datos con los archivos necesarios para construir una aplicación React.

Con la aplicación React creada, necesitamos instalar react-table y Hamoni Sync. Aún en la línea de comando, ejecute cd realtime-react-datatable para cambiar al directorio de la aplicación. Ejecute npm i react-table hamoni-sync en la línea de comandos para instalar ambos paquetes.

Renderizar la cuadrícula de datos

Para representar la cuadrícula de datos, usaremos el componente react-table. Abra el archivo src / App.js y actualícelo con el siguiente código:

import React, {Component} de "react";
importar logo de "./logo.svg";
importar "./App.css";
// Importar tabla de reacción
importar ReactTable desde "react-table";
import "react-table / react-table.css";
// Importar Hamoni Sync
importar Hamoni desde "hamoni-sync";
La aplicación de clase amplía el componente {
  constructor () {
    súper();
    this.state = {
      datos: [],
      nombre de pila: "",
      apellido: ""
    };
  }
  handleChange = event => {
    if (event.target.name === "firstName")
      this.setState ({firstName: event.target.value});
    if (event.target.name === "apellido")
      this.setState ({lastName: event.target.value});
  };
  handleSubmit = event => {
    event.preventDefault ();
  };
  renderEditable = cellInfo => {
    regreso (
      
{           const data = [... this.state.data];           datos [cellInfo.index] [cellInfo.column.id] = e.target.innerHTML;           this.setState ({data});         }}         dangerouslySetInnerHTML = {{           __html: this.state.data [cellInfo.index] [cellInfo.column.id]         }}       />     );   };
  render () {
    const {datos} = this.state;
    regreso (
      
        
          logo           

Bienvenido a React

        
        

          

            

Añadir nuevo registro

                           Nombre de pila:                             {""}                            Apellido:                            
            
          
        

        
           (                   
                )               }             ]}             defaultPageSize = {10}             className = "- rayado-resaltado"           />         
      
    );   } }
exportar aplicación predeterminada;

El código anterior representa un formulario y un componente editable de la tabla de reacción. representa un componente con datos, columnas y accesorios defaultPageSize. Los accesorios de datos contienen los datos para mostrar y los accesorios de columnas para la definición de columna. La propiedad del descriptor de acceso en las columnas indica la propiedad que contiene el valor que se mostrará para esa columna. Celda: la propiedad this.renderEditable en accesorios de columnas le dice a react-table que la columna es editable. Las otras funciones (handleSubmit & handleChange) permiten obtener una nueva entrada de datos desde el formulario en la página.

Añadir Hamoni Sync

Los datos de la cuadrícula de datos se recuperarán y actualizarán en tiempo real utilizando Hamoni Sync. Ya importamos la biblioteca Hamoni en la línea 18 en App.js;

importar Hamoni desde "hamoni-sync";

Necesitamos inicializarlo y conectarnos al servidor Hamoni. Para hacer esto, necesitamos una cuenta e identificación de la aplicación. Siga estos pasos para crear una aplicación en Hamoni.

  1. Regístrese y acceda al panel de Hamoni
  2. Ingrese el nombre de su aplicación preferida en el campo de texto y haga clic en el botón Crear. Esto debería crear la aplicación y mostrarla en la sección de la lista de aplicaciones.
  3. Haga clic en el botón "Mostrar ID de cuenta" para ver su ID de cuenta.

Agregue el siguiente código a App.js para inicializar y conectarse al servidor Hamoni Sync.

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

El código anterior conectará el dispositivo cliente o el navegador al servidor Hamoni Sync. Copie su cuenta y el ID de la aplicación del tablero y reemplácelos con el marcador de posición de la cadena respectivamente.

Agregue lo siguiente a la función en el bloque then (), que se ejecutará cuando se conecte con éxito al servidor:

hamoni
    .get ("cuadrícula de datos")
    .then (listPrimitive => {
      this.listPrimitive = listPrimitive;
      this.setState ({
        datos: [... listPrimitive.getAll ()]
      });
      listPrimitive.onItemAdded (item => {
        this.setState ({datos: [... this.state.data, item.value]});
      });
      listPrimitive.onItemUpdated (item => {
        dejar datos = [
        ... this.state.data.slice (0, item.index),
        valor del ítem,
        ... this.state.data.slice (item.index + 1)
        ];
        this.setState ({data: data});
      });
      listPrimitive.onSync (data => {
        this.setState ({data: data});
      });
    })
    .catch (console.log);

El código anterior llama a hamoni.get ("datagrid") para obtener los datos, con datagrid como el nombre del estado de la aplicación en Hamoni Sync. Hamoni Sync le permite almacenar 3 tipos de estado conocidos como primitivas de sincronización. Son:

  1. Valor primitivo: este tipo de estado contiene información simple representada con tipos de datos como cadena, booleano o números. Es el más adecuado para casos como el recuento de mensajes no leídos, alterna, etc.
  2. Primitiva de objeto: el estado del objeto representa estados que se pueden modelar como un objeto JavaScript. Un ejemplo de uso podría ser almacenar el puntaje de un juego.
  3. Lista primitiva: contiene una lista de objetos de estado. Un objeto de estado es un objeto de JavaScript. Puede actualizar un elemento según su índice en la lista.

Si el estado está disponible, se resuelve y devuelve una promesa con el objeto primitivo de estado. Este objeto nos da acceso a métodos para actualizar el estado y obtener actualizaciones de estado en tiempo real.

En la línea 36 usamos el método getAll () para obtener datos y establecer el estado del componente React. Además, los métodos onItemAdded () y onItemUpdated () se utilizan para obtener actualizaciones cuando se agrega o actualiza un elemento. El método onSync () es útil en un escenario en el que un dispositivo o navegador pierde la conexión, y cuando se vuelve a conectar, intenta obtener el último estado del servidor y actualizar el estado local si hay alguno.

Agregar y actualizar elementos

De la sección anterior, podemos obtener los datos para la cuadrícula de datos y actualizar el estado cuando se agrega o actualiza un elemento. Agreguemos código para agregar nuevos elementos y actualizar un elemento cuando se haya editado una columna. Agregue el siguiente código al método handleSubmit:

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

Este código obtiene el nombre y apellido del formulario y lo agrega a la primitiva de estado de lista en Hamoni Sync llamando al método push (). Esto activará el método onItemAdded ().

Para actualizar los elementos a medida que se editan en la cuadrícula de datos, actualizaremos la función pasada a los accesorios onBlur en la línea 84 de la siguiente manera:

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

Este código actualiza el elemento en el índice recuperado del objeto cellInfo. Para actualizar una primitiva de estado de lista en Hamoni Sync, llame al método update () con el índice del elemento y el valor para actualizar. El método renderEditable ahora debería verse así después del último cambio:

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

En este punto, tenemos casi todo lo que se necesita para ejecutar la aplicación, excepto los datos iniciales que se mostrarán en la cuadrícula de datos.

Necesitamos crear el estado y darle algunos datos sobre Hamoni Sync. Agregue un nuevo archivo seed.js en la raíz de su directorio de trabajo y agregue el siguiente código:

const Hamoni = require ("sincronización de hamoni");
let hamoni = nuevo Hamoni ("AccountID", "APP_ID");
hamoni
  .conectar()
  .then (respuesta => {
    hamoni
      .createList ("cuadrícula de datos", [
        {nombre: "James", apellido: "Darwin"},
        {nombre: "Jimmy", apellido: "agosto"}
      ])
      .then (() => console.log ("crear éxito"))
      .catch (console.log);
  })
  .catch (console.log);

Esto creará una lista de estado primitivo en Hamoni Sync, con un nombre de datagrid. Reemplace la cadena AccountID y APP_ID con su cuenta e ID de aplicación. Abra la línea de comando y ejecute el nodo seed.js. Esto debería tener éxito e imprimir crear mensaje de éxito.

¡Ahora podemos iniciar la aplicación React y ver nuestra aplicación en acción! Ejecute el comando npm start en la línea de comando y abrirá la aplicación en su navegador predeterminado.

¡Hurra! ¡Tenemos una cuadrícula de datos editable en tiempo real con paginación!

Conclusión

Hemos construido una cuadrícula de datos en tiempo real en React usando react-table y Hamoni Sync. Con react-table alimentando la cuadrícula de datos y Hamoni Sync manejando el estado de la cuadrícula de datos. Todo esto se logró en pocas líneas de código y con menos esfuerzo al diseñar la lógica de estado en tiempo real. Puede obtener la aplicación completa de lo que creamos en GitHub. Es posible rastrear qué celda se está editando o bloquear las celdas que otro usuario está editando actualmente. Lo dejaré como un truco de fin de semana para ti.

Siéntase libre de dejar un comentario si algo no está claro o encuentra problemas al intentar agregar el bloqueo o resaltar las celdas que se están editando.

Feliz codificación