Choosing a Data Grid Component For Your React Project

By May 31, 2017 April 8th, 2019 Development, Enterprise Mobility
ag Grid

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.

Top: Material-UI Table Component
Bottom: ag-Grid with material theme and some css

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.

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>

    );
  }
}

Integrating comments into an ag-Grid table.

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.

Related Posts

Snehi Vallurupalli

Snehi Vallurupalli

Snehi is a developer with experience in Javascript and Ruby. He graduated from the Georgia Institute of Technology with a B.S. in Nuclear and Radiological Engineering. In his free time Snehi enjoys basketball and playing with his cat, Sundae. Favorite food:Borani Banjan and Ramen