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.
To install react-data-grid
, run the following command in your project's root directory.
1$ npm install --save react-data-grid
You can easily import the React Data Grid component using the import
statement.
1import ReactDataGrid from 'react-data-grid';
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} />
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 ];
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]}
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.
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}
Here is how it looks when rendered.
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:
/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 }, []);
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 ];
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 />
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.
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.