Как построить в реальное время редактируемого Datagrid В React

Питер Мбануго

DataGrid позволяет отображать и редактировать данные. Это жизненная особенность в большинстве приложений, ориентированных на данные.

Возможно, вы реализовали это в одном из ваших реактивных приложений в прошлом. Может быть, вы использовали библиотеки, как React-bootstrap-table , React-Grid или React-Table Отказ С тем, вы можете добавить DataGrid в ваше приложение React. Но Что, если вы хотите, чтобы изменения были сделаны в режиме реального времени и обновления, синхронизированные по всем подключенным устройствам и их браузерам?

В этой статье я покажу вам, как построить DataGrid в реальном времени в реакции с использованием React-Table и Hamoni Sync Отказ

React-Table – это легкая и быстрая библиотека для рендеринга таблиц в реакции, а также поддерживает пагинацию и многие другие функции.

Hamoni Sync – это сервис синхронизации состояния в реальном времени, который позволяет синхронизировать состояние вашего приложения в режиме реального времени. Я покажу вам, как построить DataGrid с первыми и фамилиями людей.

Если вы хотите следить, вы должны иметь некоторые знания реагирования и установлены следующие инструменты:

Nodejs
NPM & NPX Отказ Если вы установили NPM версии 5.2.0 или больше, она устанавливает NPX наряду с NPM.
Create-React-App

Создайте приложение React

Сначала мы создадим новый реагированный проект, используя Create-React-App.

Откройте командную строку и запустите NPX Create-React-App RealTime-React-DataTable Отказ Это будет загрузовать приложение React для нас, создавая новый каталог Realtime-React-DataTable С файлами, необходимыми для создания приложения React.

С созданным приложением RACT, нам нужно установить React-Table и Sync Hamoni. Все еще в командной строке, запустите CD Realtime-React-DataTable Чтобы переключиться в каталог для приложения. Беги NPM I Ract-Table Hamoni-Sync В командной строке для установки обеих пакетов.

Визуализация DataGrid

Чтобы рендер DataGrid мы будем использовать компонент React-Table. Откройте файл SRC/App.js И обновите его с кодом ниже:

import React, { Component } from "react";import logo from "./logo.svg";import "./App.css";// Import React Tableimport ReactTable from "react-table";import "react-table/react-table.css";// Import Hamoni Syncimport Hamoni from "hamoni-sync";

class App extends Component {  constructor() {    super();    this.state = {      data: [],      firstName: "",      lastName: ""    };  }

  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 => {    return (       {          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;

    return (                                  Welcome to React
        
                  
            Add new record
                          FirstName:                          {" "}                          LastName:

                                                 (                  
                )              }            ]}            defaultPageSize={10}            className="-striped -highlight"          />

); }}

export default App;

Код выше отображает форму и редактируемый компонент React-Table. <Реагированные /> Оказывает компонент остроумие H Данные, C Outumns и по умолчаниюpa Гесиризонг . TH Выдыхание E Data Удерживает данные для отображения и с OULumns реквизит для определения столбца . AC Коссор правильно TY в C Выроки Olumns указывают на свойство, которое содержит значение, которое будет отображаться для этого CO LUMN. Клетчатая: это.rended это правильно TY в C ОЗУЛЬНЫЕ ОБРАЗОВАНИЯ СКАЗАТЬ РЕГИСТРАЦИИ AGENAGE, что столбец редактируется. Другой Funct ионы (ручка Sub MIT & Dising Изменить) позволяет получать новые данные ввода данных из формы на странице.

Добавить Hamoni Sync.

Данные для DataGrid будут извлечены и обновлены в режиме реального времени с использованием Hamoni Sync. Мы уже импортировали библиотеку Hamoni на линии 18 в App.js ;

import Hamoni from "hamoni-sync";

Нам нужно инициализировать его и подключиться к серверу Hamoni. Для этого нам нужна учетная запись и идентификатор приложения. Следуйте этим шагам, чтобы создать приложение в Hamoni.

Зарегистрируйтесь и войдите в Hamoni щиток приборов
Введите предпочтительное имя приложения в поле Text и нажмите кнопку Создать. Это должно создать приложение и отображать его в разделе списка приложений.
Нажмите кнопку «Показать CLESCID», чтобы увидеть идентификатор вашей учетной записи.

Добавьте следующий код в App.js Для инициализации и подключения к серверу Hamoni Sync.

componentDidMount() {    let hamoni = new Hamoni("ACCOUNT_ID", "APP_ID");

    hamoni      .connect()      .then(() =>; {

      })      .catch(console.log);  }

Вышеуказанный код подключит клиентское устройство или браузер к серверу Sync Hamoni. Скопируйте свой аккаунт и идентификатор приложения из приборной панели и замените их строковым заполнителем соответственно.

Добавьте следующее на функцию в тогда () Блок, который будет выполнен, когда он успешно подключается к серверу:

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

Код выше звонков Hamoni.get («DataGrid») Чтобы получить данные, с DataGrid Как название состояния приложения на Hamoni Sync. Hamoni Sync позволяет хранить 3 вида государства, называемых примитивами синхронизации. Они есть:

Значение примитив : Этот вид состояния проводит простую информацию, представленную с помощью данных, таких как строка, логические или цифры. Он лучше всего подходит для таких случаев, как непрочитанное количество сообщений, переключает и т. Д.
Примитивный объект : Государство объекта представляет состояния, которые могут быть смоделированы как объект JavaScript. Пример использования может хранить счет игры.
Список примитив : Это содержит список объектов государства. Государственный объект – это объект JavaScript. Вы можете обновить элемент на основе его индекса в списке.

Если состояние доступно оно решает и возвращает обещание с государственным примитивным объектом. Этот объект дает нам доступ к способам обновления состояния и получать обновления состояния в режиме реального времени.

На линии 36 мы использовали getall () Способ получения данных и установить состояние для компонента реагирования. Также методы onitemadded () и OniteMupdated () используются для получения обновлений, когда элемент добавляется или обновляется. Onsync () метод полезен в случае, когда устройство или браузер теряет соединение, и, когда он воссоединяется, он пытается получить последнее состояние с сервера и обновлять локальное состояние, если есть какое-либо.

Добавить товары

Из предыдущего раздела мы можем получить данные для DataGrid и обновлять состояние, когда элемент добавлен или обновляется. Давайте добавим код, чтобы добавить новые элементы и обновить элемент, когда столбец отредактирован. Добавьте следующий код в Handlesubmit Метод:

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

Этот код получает первое и фамилию из формы и добавляет его к предварительному примитию состояния списка на синхронизации Hamoni, позвонив push () метод. Это будет вызвать onitemadded () метод.

Чтобы обновить товары, поскольку они редактируются в DataGrid, мы обновим функцию, передаваемую на ньюрур реквизит на линии 84 следующим образом:

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

Этот код обновляет элемент в индексе извлеченного из cellInfo объект. Чтобы обновить состояние списка примитив в Hamoni Sync, вы называете Обновление () Способ с индексом элемента и значение для обновления. оправданный Метод должен теперь выглядеть после последнего изменения:

renderEditable = cellInfo => {    return (       {          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]        }}      />    );  };

На данный момент у нас есть почти все, что нужно для запуска приложения, кроме начальных данных, которые будут отображаться на DataGrid.

Нам нужно создать состояние и дать ему некоторые данные на Hamoni Sync. Добавить новый файл Seed.js В корень вашего рабочего каталога и добавьте к нему следующий код:

const Hamoni = require("hamoni-sync");

let hamoni = new Hamoni("AccountID", "APP_ID");

hamoni  .connect()  .then(response => {    hamoni      .createList("datagrid", [        { firstName: "James", lastName: "Darwin" },        { firstName: "Jimmy", lastName: "August" }      ])      .then(() => console.log("create success"))      .catch(console.log);  })  .catch(console.log);

Это создаст примитивное состояние списка на Hamoni Sync, с именем DataGrid Отказ Заменить Stocledid и App_id. Строка с вашей учетной записью и идентификатором приложения. Откройте командную строку и запустите NODE SEED.JS Отказ Это должно преуспеть и распечатать Создать успех сообщение.

Теперь мы можем начать приложение React и увидеть наше приложение в действии! Запустите команду NPM начать В командной строке, и она откроет приложение в вашем браузере по умолчанию.

Ура! У нас есть редактируемый DataGrid в режиме реального времени с пагинацией!

Заключение

Мы создали DataGrid в реальном времени в реакции, используя React-Table и Hamoni Sync Отказ С регулировкой реагирования на таблице DataGrid и Hamoni Sync обрабатывают состояние для DataGrid. Все это было достигнуто в нескольких линиях кода и меньше усилий, разработающих государственную логику в реальном времени. Вы можете получить готовое приложение того, что мы построили на Гадость . Можно отслеживать, какая ячейка редактируется или блокирует ячейки, которые в настоящее время редактируются другим пользователем. Я оставлю это как взлом выходных для вас.

Не стесняйтесь оставить комментарий, если что-то не понятно или столкнутся с проблемами, пытаясь добавить замок или выделить редактируемые ячейки.

Счастливое кодирование?

Оригинал: “https://www.freecodecamp.org/news/how-to-build-a-real-time-editable-datagrid-in-react-c13a37b646ec/”

Создайте приложение React

Визуализация DataGrid

Add new record

Добавить Hamoni Sync.

Добавить товары

Заключение

Читайте ещё по теме: