Data Grids in React

Build a Customizable React Data grid in Minutes

Data grids have been one of the most common visual software elements since the advent of UIs themselves. They appeal to the instinct that drives all of us to take in and understand as much data as possible, as quickly as possible. Data grids are more useful than ever, not only for displaying data but also for editing it.

With automatic conveniences like sorting and autocomplete, and advanced features like custom formulas, Microsoft Excel would be the natural choice for most users. Users choose Excel because it is familiar. Although Excel has become the most common example of software using a data grid, the paradigm has proliferated throughout the software field. As web apps continue to replace the traditional native applications we're used to, it only makes sense that data grids would make their way to web app UIs as well.

Plenty of JavaScript data grids exist in the market: open source, third-party, and homegrown. Which to choose?

In another post, we discuss what makes data grids so useful as UI elements and why Flexgrid is the best React data grid. You can see the FlexGrid in action and learn more about it using our Learn Wijmo application. You can get your copy from NPM, from our CDN, or you can download it from our site.

All this sounds great, right? Let's put FlexGrid to work, building a customizable React data grid in minutes. We'll use the following application to demonstrate how to use the FlexGrid with React, Facebooks's JavaScript framework:

We used stackblitz to create the sample so it is easy to maintain and share.

Let's get started!

Create the React App

To create your own copy of the app, follow these steps:

  1. Open stackblitz
  2. Click the "React/JavaScript" button at the bottom of the screen
  3. Add Wijmo to the project by typing "wijmo" into the dependencies list:

Create the React App

Import the Required Modules

In the React version of the app, all the code and logic are contained in the "index.js" file.

The code starts by importing the required classes and styles from React and from Wijmo:

// index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

import { CollectionView } from 'wijmo/wijmo';
import { FlexGrid } from 'wijmo/wijmo.react.grid';
import { FlexGridFilter } from 'wijmo/wijmo.react.grid.filter';
import 'wijmo/styles/themes/wijmo.theme.material.css';

Notice how in addition to classes, the code imports some CSS. In this case, we chose Wijmo's material theme, one of several included with Wijmo.

Style the App

To style the app, edit the styles.css file as follows:

/* styles.css */
body {
  font-family: Lato, Arial, Helvetica;
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;

Add a Data Source to Your Grid

Our data source will be part of the App component's state, as usual for React apps.

The App component is defined as follows:

// index.js
class App extends Component {
  constructor() {
    this.state = {
      data: new CollectionView([], { // grouped CollectionView
        groupDescriptions: ['make']
    this.filterApplied = () => {
      let view =;
      this.setState({ // to update summary info
        data: view,

  componentDidMount() {
      .then(result => result.json())
      .then(data => {
        let view =;
        view.sourceCollection = data;
          data: view
  render() { … }

The App state exposes the data through its "data" property, which is a CollectionView grouped by make. The data is loaded asynchronously when after the component is mounted. When the data is received, it is assigned to the CollectionView's sourceCollection property and becomes available to the application.

The component also defines a filterApplied method which is used to update the state when the data is filtered. This is necessary to update the total counts displayed in the app header.

Visualize the Data in React

The final step the implementation of the App component's render method, which renders the whole UI including the grid:

// index.js
class App extends Component {
  constructor() {…}
  componentDidMount() {…}
  render() {
    return (
          2019 Sedans (React)
          Sort by model …</p>
          Showing{' '}
          <b>{}</b> models from{' '}
          <b>{}</b> makes.</p>
          {binding:'make', header:'Make', width:"*", visible:false},
          {binding:'model', header:'Model', width:"*"},
          {binding:'price', header:'Price', width:".5*", format: 'n0',
             aggregate: 'Avg'},
        <FlexGridFilter filterApplied={this.filterApplied}/>

The app header contains a short app description and a summary of how many models and makes are displayed. The summary counts are updated automatically when the user filters the data.
The header is followed by the "FlexGrid" element which initializes the grid's properties, including the itemsSource, the columns to display, and their properties.

The column properties include the binding, header, format, and width for each column. Note that the aggregate property on the price column causes the grid to show the average price for each make in the group headers.

The "FlexGrid" element contains a "FlexGridFilter" element which adds the column filter, so users may filter the grid data by model and by price. The filterApplied event is used to update the state when the filter changes so the summary at the top of the page is updated.

Run the Application

That's it! The React version of the "2019 Sedans" app is ready.

Happy coding! If you have questions or comments be sure to enter them below.

Build a Customizable React Datagrid in Minutes

Download the latest version of Wijmo

Download Now!