Getting Started with React Hooks and React Data Grid in 5 minutes

Alan Richardson - Sep 27 '21 - - Dev Community

Getting Started with React Hooks and React Data Grid in 5 minutes

In previous blog posts we have shown how to use classes in React: get started in 5 minutes and customising react data grid, in this post we will cover Getting Started using Hooks and how to optimise components which use the React Data Grid.

Hooks let us use React features from functions so you won't see any classes in this Getting Started Guide.

Video Tutorial

Example Code

If you want to run the example from this blog post then you can find the repository on Github:

Then run the example in the getting-started-5-mins-hooks directory:

cd getting-started-5-mins-hooks
npm install
npm start
Enter fullscreen mode Exit fullscreen mode

Creating Project From Scratch

Since this is a getting started post I'll summarise the absolute basic steps to getting started, I assume you have npm installed.

  • use npx create-react-app to create the project 
npx create-react-app getting-started-5-mins-hooks
Enter fullscreen mode Exit fullscreen mode
  • change directory into the project 
cd getting-started-5-mins-hooks
Enter fullscreen mode Exit fullscreen mode
  • install AG Grid and the AG React Library 
npm install --save ag-grid-community ag-grid-react
Enter fullscreen mode Exit fullscreen mode
  • then start the project running so we can view it in a browser 
npm start
Enter fullscreen mode Exit fullscreen mode

Create a Grid Component

Rather than add all the code into my App.js I'm going to create a component to render data using AG Grid. I'll use our basic cars data set so I'll amend my App.js to us a CarsGrid.

function App() {
  return (
    <CarsGrid />
  );
}
Enter fullscreen mode Exit fullscreen mode

I'll write my CarsGrid in a carsgrid.js file and import it.

import {CarsGrid} from `./carsgrid`
Enter fullscreen mode Exit fullscreen mode

carsgrid.js

The content of carsgrid.js is as basic as it gets.

I import the React and AG Grid features I will use:

import React, {useState} from 'react';
import {AgGridColumn, AgGridReact} from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
Enter fullscreen mode Exit fullscreen mode

Then I will create the data that I will load into the grid. Initially I'll create this as a simple array and we'll consider alternatives later in the post.

const InitialRowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];
Enter fullscreen mode Exit fullscreen mode

Finally I'll create a JavaScript function for my React Component which:

  • sets the data to render use state as rowData
  • returns the JSX that renders data using AG Grid. 
export function CarsGrid() {

    // set to default data
    const [rowData, setRowData] = useState(InitialRowData);

   return (
       <div className="ag-theme-alpine" style={{height: 400, width: 600}}>   
           <AgGridReact
                defaultColDef={{sortable: true, filter: true }}
                pagination={true}
                rowData={rowData}
                >
                <AgGridColumn field="make"></AgGridColumn>
                <AgGridColumn field="model"></AgGridColumn>
                <AgGridColumn field="price" editable={true}></AgGridColumn>
           </AgGridReact>
       </div>
   )
};
Enter fullscreen mode Exit fullscreen mode

This gives me a very basic grid that will render the data.

Getting Started with React Hooks and React Data Grid in 5 minutes

Since AG Grid offers a lot of features out of the box, I'll enable some of those like:

  • in cell editing
  • sorting
  • filtering
  • pagination

In Cell Editing

To enable a cell as editable, I change the column definition to have an additional attribute: editable={true}

e.g.

<AgGridColumn field="price" editable={true}></AgGridColumn>
Enter fullscreen mode Exit fullscreen mode

This will make the price cells editable.

Sorting and Filtering

To make a column sortable or filterable I again add an attribute to the column e.g.

  • Sortable
    • <AgGridColumn field="make" sortable={true}></AgGridColumn>
  • Filterable
    • <AgGridColumn field="model" filter={true}></AgGridColumn>

I can control each column via individual attributes.

But I'd rather configure all the columns to be sortable and filterable at the same time, and I can do that by adding a default column definition on the grid itself.

   <AgGridReact
        defaultColDef={{sortable: true, filter: true }}
Enter fullscreen mode Exit fullscreen mode

Getting Started with React Hooks and React Data Grid in 5 minutes

Data Grid Pagination

If I want to add pagination to the grid then I can enable this with a single attribute on the grid pagination={true}.

   <AgGridReact
        defaultColDef={{sortable: true, filter: true }}
        pagination={true}
Enter fullscreen mode Exit fullscreen mode

But, there is really no point in having a pagination, sorting and filtering on a grid with such a small amount of data.

As soon as I load data into the grid we can then see some of the benefits of using a React Data Grid like AG Grid.

  React.useEffect(() => {
        fetch('https://www.ag-grid.com/example-assets/row-data.json')
            .then(result => result.json())
            .then(rowData => setRowData(rowData))
    }, []);
Enter fullscreen mode Exit fullscreen mode

By loading a lot of data into the grid we can see that:

  • the grid maintains is position on the page
  • pagination and rendering happens automatically
  • sorting and filtering are fast with no additional programming required

Getting Started with React Hooks and React Data Grid in 5 minutes

There is another feature that we get free with AG Grid.

If I amend the initial state to be unassigned, then AG Grid will display a loading... message while we load data into the grid from the server.

const [rowData, setRowData] = useState();
Enter fullscreen mode Exit fullscreen mode

Getting Started with React Hooks and React Data Grid in 5 minutes

Optimising React Data Grid for Hooks

At this point the blog post has covered most of the same ground as the class based getting started post.

We should learn a few ways to optimise the component:

  • make it easier to amend by using state and objects
  • reduce rendering cycles

Column Definitions as Objects

At the moment our grid has the column definitions defined declaratively:

    <AgGridColumn field="make"></AgGridColumn>
    <AgGridColumn field="model"></AgGridColumn>
    <AgGridColumn field="price" editable={true}></AgGridColumn>
Enter fullscreen mode Exit fullscreen mode

This reduces the flexibility available to me to customise the grid at run time.

If I want to adjust the column definitions then I would be better off setting them as objects via state.

    const [colDefs, setColDefs] = useState([
        {field: 'make'},
        {field: 'model'},
        {field: 'price', editable: 'true'},
    ]);
Enter fullscreen mode Exit fullscreen mode

And amending my grid to use the state.

   <AgGridReact
        defaultColDef={{sortable: true, filter: true }}
        pagination={true}
        rowData={rowData}
        columnDefs={colDefs}>
   </AgGridReact>
Enter fullscreen mode Exit fullscreen mode

This way I can add or remove columns from the state, or adjust their attributes to make them editable or have custom rendering, and the component would automatically re-render to accomodate the changes to the state.

This way our complete intial functional component using hooks looks as follows:

import React, {useState} from 'react';
import {AgGridColumn, AgGridReact} from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

export function CarsGrid() {

    const [rowData, setRowData] = useState();

    const [colDefs, setColDefs] = useState([
        {field: 'make'},
        {field: 'model'},
        {field: 'price', editable: 'true'},
    ]);

    React.useEffect(() => {
        fetch('https://www.ag-grid.com/example-assets/row-data.json')
            .then(result => result.json())
            .then(rowData => setRowData(rowData))
    }, []);

   return (
       <div className="ag-theme-alpine" style={{height: 400, width: 600}}>   
           <AgGridReact
                defaultColDef={{sortable: true, filter: true }}
                pagination={true}
                rowData={rowData}
                columnDefs={colDefs}
                >
           </AgGridReact>
       </div>
   )
};
Enter fullscreen mode Exit fullscreen mode

Reducing Rendering by Memoizing

If we didn't want to update the column definitions at run time, that doesn't mean we should go back to declarative definitions.

We still make the code easier to maintain longer term by using objects. But we should memoize them to make sure we don't unnecessarily add more render cycles than we need to.

The AG Grid React Data Grid is already well optmised for rendering, but in typical real world usage, we will wrap AG Grid in our own components for common styling and configuration.

I would memoize the colDefs as follows:

    const colDefs = useMemo( ()=> [
        {field: 'make'},
        {field: 'model'},
        {field: 'price', editable: 'true'},
    ], []);
Enter fullscreen mode Exit fullscreen mode

The Column Definitions are constant and won't trigger a re-render should the parent component change.

Learn More React Data Grid

We have a longer Getting started guide in our documentation which also covers selection, grouping and changing themes.

We also have some React examples to study which show more use cases of AG Grid.

The code for this post is in the react-data-grid repo in the getting-started-5-mins-hooks folder.

Image
Essential Software for Modern, High-Performance Accounting Firms

accounting, software, accountingfirm, businessproductivity
Image
Ten Reasons To Hate People Who Can't Be Disproved Wall Mounted Electric Fireplace Heater
Image
The Role of Education in Fostering Environmental Stewardship and Sustainable Living by Naturalists including Joshua Vandervoort
Image
Synchronizing Data from InfluxDB to Doris with SeaTunnel

apacheseatunnel, data, opensource, doris
Image
The Impact of Microplastics on Marine Life and How to Reduce Plastic Pollution by Nature Buffs such as Joshua Vandervoort
Image
Mastering Email Deliverability: The Ultimate Guide to Ensuring Your Messages Hit the Inbox Every Time
Image
What Is Mobility Scooters For Sale Near Me? How To Use It
Image
Python Essentials for JS Developers

javascript, python, programming, coding
Image
The Impact of Deforestation on Climate Change and How to Advocate for Conservation by Naturalists including Joshua Vandervoort
Image
【皇朝娛樂登入最新優惠：玩遊戲享豪禮！】
Image
How Is Artificial Intelligence Helping Modern Society? A Conversation With Mohammad Alothman
Image
qrcode
Image
Kafka Overview（1）- Topic

kafka
Image
【K9WIN皇耀娛樂體育博彩資訊|火山鳴泉K9WIN皇耀娛樂足球俱樂部】
Image
Python 连接PostgreSQL
Image
error Command "webpack" not found

webdev, javascript, rails, alexandrecalaca
Image
Facade Pattern no Angular

angular, architecture, frontend
Image
Upgrade Your Cooking Space With a Single Oven Integrated Into Your Cabinetry
Image
Guide to Writing Security Technology Blog Articles

cybersecurity, writing, security
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .