How to use react-Data-grid in react js

In this article,we are going to use react-data-grid which is essentially used for handling large amount of data,the most important feature of react-data-grid is to limit the dom to few numbers of div`s,its doesnot extend the dom when data is so large. Using Adazzle grid, mainly because of its ability to handle large data sets efficiently in the DOM. At the time, it was one of the best we found that fit our needs. I have trouble recommending it because it took some work to get it going and support is basically non-existent from the Adazzle team. That said, it’s working. We do server side filtering and infinite scroll by paging 100 records at a time. With that large of a dataset, I’m not sure what the customers expectation is if they want to move through billions of records in less than 5 sec.

Datagrid.js file is displayed below:

1import React from "react";
2import ReactDOM from "react-dom";
3import ReactDataGrid from "react-data-grid";
4import "./styles.css";
5
6const columns = [
7  { key: "id", name: "ID", editable: true },
8  { key: "title", name: "Title", editable: true },
9  { key: "complete", name: "Complete", editable: true }
10];
11
12export default class Datagrid extends React.Component {
13  constructor(props) {
14    super(props);
15    this.state = {
16      getData: this.props.Data,
17      rows: this.props.Data
18    };
19  }
20  componentDidMount() {
21    console.log("this.props", this.state.getData);
22  }
23  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
24    this.setState((state) => {
25      const rows = this.state.rows.slice();
26      for (let i = fromRow; i <= toRow; i++) {
27        rows[i] = { ...rows[i], ...updated };
28      }
29      return { rows };
30    });
31  };
32  render() {
33    return <ReactDataGrid columns={columns} rows={this.state.rows} />;
34  }
35}

Data.js file is displayed below

1import React from "react";
2import Datagrid from "./Datagrid";
3export default class Data extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = {
7      Data: ""
8    };
9  }
10  componentDidMount() {
11    let a = this.createRows(10000);
12    this.setState({
13      Data: a
14    });
15  }
16  createRows = (numberOfRows) => {
17    const rows = [];
18    for (let i = 1; i < numberOfRows; i++) {
19      rows.push({
20        id: i,
21        task: `Task ${i}`,
22        complete: Math.min(100, Math.round(Math.random() * 110)),
23        priority: ["Critical", "High", "Medium", "Low"][
24          Math.floor(Math.random() * 3 + 1)
25        ],
26        issueType: ["Bug", "Improvement", "Epic", "Story"][
27          Math.floor(Math.random() * 3 + 1)
28        ]
29      });
30    }
31    console.log("rows", rows);
32    return rows;
33  };
34
35  render() {
36    console.log("Data", this.state.Data);
37    return (
38      <h2>{this.state.Data ? <Datagrid Data={this.state.Data} /> : null}</h2>
39    );
40  }
41}

App.js file is displayed below

1import "./styles.css";
2import React from "react";
3import Data from "./Data";
4
5export default class App extends React.Component {
6  render() {
7    return (
8      <>
9        <Data />
10      </>
11    );
12  }
13}

Here is the link of live example which we done so far:
Click here