Choosing a Data Grid Component For Your React Project

In a React application I am working on we are using the Material UI component library, but immediately realized it’s table component did not have the features we needed. Many of the available grid components had the features we needed like sorting, filtering, search, and adjusting column order and size. However, there were only a few components that had the features we needed like exporting to excel and row grouping. Of those few, only ag-Grid had a built-in option for material theme styling. With a little css the grid was styled very similar to the Material UI table.

Another stand-out feature was the ability to pass through the gridOptions a context object that would be available to any custom cell renderer that you implement. This enabled us to pass props that included event handlers that could update the state of a parent component or launch async actions thus giving us the ability to make the grid even more interactive. For example, we were able to integrate commenting through the grid. Here is the table component code and the result.

[code lang=”js”]
import React from ‘react’;
import {AgGridReact} from ‘ag-grid-react’;
import ‘ag-grid/dist/styles/ag-grid.css’;
import ‘ag-grid/dist/styles/theme-material.css’;
import { columnDef } from ‘../table_util.js’;
import DescriptionCellRenderer from ‘../descriptionCellRenderer.jsx’;

const columnWidths = {
‘description’: 400
};

class ExampleTable extends React.Component{
constructor(props){
super(props);
this.data = props.data || [];
this.columnDefs = this.columnDefs.bind(this);
this.onGridReady = this.onGridReady.bind(this);
this.gridOptions = {
rowHeight: 56,
headerHeight: 55,
enableColResize: true,
groupUseEntireRow: true,
groupDefaultExpanded: -1,
groupSuppressAutoColumn: true,
groupSuppressRow: true,
animateRows: true,
suppressRowClickSelection: true,
onRowClicked: this.onRowClicked,
rowSelection: ‘single’,
suppressMenuMainPanel: true,
context: {
currentUser: this.props.currentUser.user,
handleCommentSave: this.props.handleCommentSave
}
};
}

columnDefs(){
let columns = Object.keys(this.data[0]);
let cols = [];
columns.forEach((name, i) => {
let col = columnDef(name.toUpperCase(), name);

if (name === ‘description’) {
col.cellRendererFramework = DescriptionCellRenderer;
}

if (columnWidths[name]) {
col.width = columnWidths[name];
}

col.headerClass = ‘table-header’;
cols.push(col);
});

return cols;
}

onGridReady(params) {
this.api = params.api;
this.columnApi = params.columnApi;
}

render(){
return(

<div style={{height: ‘770px’, width: ‘100%’, backgroundColor: ‘white’}} className=”ag-material”>
<AgGridReact
onGridReady={this.onGridReady}
columnDefs={this.columnDefs()}
gridOptions={this.gridOptions}
rowData={this.data}
enableSorting=’true’
enableFilter=’true’>
</AgGridReact>
</div>

);
}
}
[/code]

Ag-Grid is an excellent choice to use as your data grid component. It has all the powerful features you would expect from a solid grid component such as multi-sort and search and essentially every aspect of the grid is customizable so it was easy to adapt to design changes. If you choose ag-Grid you are likely to have a smoother development process.