Important Update

The Guide Feature will be discontinued after December 15th, 2023. Until then, you can continue to access and refer to the existing guides.

Ashutosh Singh

How to Install React Data Grid with NPM

Ashutosh Singh

Jul 30, 2020
6 Min read
4,010 Views

Jul 30, 2020
6 Min read
4,010 Views

Web Development

Front End Web Development

Client-side Framework

React

Introduction

Rendering data in a grid can be a hassle, especially in frameworks such as React. To solve this problem, in this guide, we will discuss how to install and use React Data Grid, a lightweight, Excel-like grid component capable of rendering a large amount of data, and see its actual implementation in a project.

Installation

To install react-data-grid, run the following command in your project's root directory.

1$ npm install  --save react-data-grid

bash

Importing React Data Grid

You can easily import the React Data Grid component using the import statement.

1import ReactDataGrid from 'react-data-grid';

JSX

Using with Minimum Configuration

Here is how you can use React Data Grid with minimum configuration.

1<ReactDataGrid
2  columns={columns}
3  rowGetter={i => rows[i]}
4  rowsCount={3} />

JSX

Props

There are many props that you can pass inside the <ReactDataGrid /> component to modify the grid, but these three are the required props that must be passed in order to render the grid.

columns is an array of objects that represent each column in the grid.

1 const columns = [
2    { key: "id", name: "ID" },
3    { key: "name", name: "Name" },
4    { key: "amount", name: "Amount" }
5  ];

JSX

name is the name of the column, and key acts as a unique identifier of each column.

rowGetter is a function that calls for each object in rows array and renders them as a row of the grid.

1  rowGetter={i => rows[i]}

JSX

rowsCount is the number of rows to be rendered.

It should be equal to the total number of elements inside the rows array if you want to render every element as a row.

If less than the number of elements in rows array, then that number of elements are rendered starting from index 0 of the array.

If more than the elements of rows array, all the array elements are rendered.

You can set it to 0 if you want to render a grid without any row.

Complete code:

1import React from "react";
2import ReactDataGrid from "react-data-grid";
3
4export default function DataGrid() {
5
6  const columns = [
7    { key: "id", name: "ID" },
8    { key: "name", name: "Name" },
9    { key: "amount", name: "Amount" }
10  ];
11  
12  const rows = [
13    { id: 0, name: "row1", amount: 10 },
14    { id: 1, name: "row2", amount: 20 },
15    { id: 2, name: "row3", amount: 30 }
16  ];
17  
18  return (
19    <ReactDataGrid
20      columns={columns}
21      rowGetter={i => rows[i]}
22      rowsCount={3}
23    />
24  );
25}

JSX

Here is how it looks when rendered. React Data Grid

Example

In actual projects, you might need to request the data to render through an API call.

This example will use Rick and Morty API, a free REST/GraphQL based API that provides information about characters, episodes, and locations of the Rick and Morty TV show.

This example will use the Episode endpoint. Here is the schema of the response from that endpoint:

Key	Type
id	int
name	string
air_date	string
episode	string
characters	array (urls)
url	string (url)
created	string

Here is how you can make a grid of the endpoint response:

First, you need to request data from /episode endpoint; one way would be using fetch() inside useEffect() hook and storing the data in the state variable. Providing an empty array as a second argument to useEffect() ensures that the request is made only after the initial render.

1const [data, setData ] = useState([]);
2  
3useEffect(() => {
4    fetch("https://rickandmortyapi.com/api/episode/")
5      .then(res => res.json())
6      .then(data => setData(data.results));
7  }, []);

JSX

Now, you need to define the columns of the grid. Based on the schema of the response, you can choose what fields to render.

1  const columns = [
2    { key: "id", name: "ID" },
3    { key: "name", name: "Name"},
4    { key: "air_date", name: "Air Date"},
5    { key: "episode", name: "Episode" },
6  ];

JSX

As the last step, you need to provide the data from the endpoint in rowGetter, which is stored inside the state variable.

1 <ReactDataGrid
2      columns={columns}
3      rowGetter={i => data[i]}
4      rowsCount={data.length}
5      minHeight={800}
6    />

JSX

minHeight is another prop that you can use to set the height of the grid.

With this, you have successfully created a grid consisting of the information that you received from the API endpoint.

You can play with this project on StackBlitz. Rick and Morty Episode Data Grid

Conclusion

This guide was an introduction to the awesome React Data Grid library. There are many features like Cell Formatting, Filtering, Sorting, Grouping, etc. that you can use and customize the grid. And since this is an open source project, you can even create custom features and get them merged in the official library.

React Data Grid is perfect for displaying extensive data in tabular format. You can even use it in your side projects like an E-commerce platform where inventory, customer information, etc. can be rendered using React Data Grid.

You can read more about this in the official docs.

LEARN MORE