Ext JS to React: Selection Model

This is part of the Ext JS to React blog series. You can review the code from this article on the Ext JS to React Git repo.

In the previous article, Basic Grid, we saw how to create a lightweight grid view. In it, we enabled row sorting by clicking on the grid header and all without using any pre-built UI library. In this article we are going to add more user interaction with row and checkbox selection using the ag-Grid library. ag-Grid is by no means the only pre-built option available in the React ecosystem. However, it does have many of the capabilities found in the Ext JS Grid including grid selection. The licensing options include a free version in addition to a paid, more fully-featured enterprise version.

Note: While not a requirement for React, this article’s code examples assume you’re starting with a starter app generated by create-react-app.

ag-Grid setup

First, we’ll install ag-Grid including the files we’ll use to theme the grid:

npm install --save ag-grid
npm install --save ag-grid-react

If you’re using React 16+ you may also need to install react-dom-factories:

npm install --save react-dom-factories

We will be reusing the same data file that we introduced in the previous article, Basic Grid.

Single Row Selection Model

The default selection model in Ext JS is row selection. To enable row selection with ag-Grid, we can pass rowSelection prop. Ag-Grid is configurable by passing configuration objects for the columns as well as the data. In the following example, we’ll also import the material theme CSS installed with ag-Grid:

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import getData from './data';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-material.css';

const { data } = getData();

class App extends Component {
  columns = [
    {
      headerName: 'Name',
      field: 'name'
    },
    {
      headerName: 'Company',
      field: 'company'
    },
    {
      headerName: 'Email',
      field: 'email'
    }
  ]
  render () {
    return (
      <div className="ag-theme-material">
        <AgGridReact
          containerStyle={{height: '400px'}}
          columnDefs={this.columns}
          rowData={data}
          rowSelection="single"
        />
      </div>
    );
  }
}

export default App;

We are now using a pre-built grid and our application code is much smaller since we don’t have to worry about the underlying DOM nodes. We simply instantiate the ag-Grid with columns and data and it takes care of the rest for us just like Ext JS did. ag-Grid ships with default themes. As a result, the AgGridReact component is nested within a div where we can specify the theme we want to use.

<div className="ag-theme-material">

With the rowSelection="single" config, rows are now selectable, but only one-at-a-time. Meaning, if you click on one row, it’ll select it. Clicking on another row will deselect the previous row and select the new row. Rows can be deselected by setting true on the rowDeselection prop. All grid configuration options can be found here on the ag-Grid Grid Properties page.

Multiple Row Selection Model

ag-Grid made it easy to enable row selection and it’s just as easy to enable multiple-row selection. To enable this, we can set the rowSelection prop to “multiple”:

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import getData from './data';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-material.css';

const { data } = getData();

class App extends Component {
  columns = [
    {
      headerName: 'Name',
      field: 'name'
    },
    {
      headerName: 'Company',
      field: 'company'
    },
    {
      headerName: 'Email',
      field: 'email'
    }
  ]
  render () {
    return (
      <div className="ag-theme-material">
        <AgGridReact
          containerStyle={{height: '400px'}}
          columnDefs={this.columns}
          rowData={data}
          rowSelection="multiple"
        />
      </div>
    );
  }
}

export default App;

Like with single mode, as you click rows it will only select the clicked row. To add multiple rows to the selection, you need to use either SHIFT or CTRL (command on macOS) keys as you click on rows to add to the currently selected row(s). The difference between using SHIFT and CTRL is that SHIFT will select all the rows between the last selected row and the row being clicked next. With CTRL, it will only add the clicked row to the existing selection.

Checkbox Selection Model

The checkbox selection model is like the row selection model allowing multiple selections except it uses a column to house checkboxes allowing one or more rows to be selected. Like ag-Grid’s other selection models, it’s easy to configure the grid to use checkboxes for selection:

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import getData from './data';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-material.css';

const { data } = getData();

class App extends Component {
  columns = [
    {
      checkboxSelection: true,
      headerCheckboxSelection: true,
      width: 50
    },
    {
      headerName: 'Name',
      field: 'name'
    },
    {
      headerName: 'Company',
      field: 'company'
    },
    {
      headerName: 'Email',
      field: 'email'
    }
  ]
  render () {
    return (
      <div className="ag-theme-material">
        <AgGridReact
          containerStyle={{height: '400px'}}
          columnDefs={this.columns}
          rowData={data}
          rowSelection="multiple"
          suppressRowClickSelection={true}
        />
      </div>
    );
  }
}

export default App;

The first thing you likely noticed is that we added a new column. We do this to tell ag-Grid to render the checkbox in that column by using the checkboxSelection config. Technically, you can set this config on any (and all) columns without creating a dedicated checkbox column, but having the checkbox visually in its own column maintains better separation between checkboxes and cell content. The headerCheckboxSelection prop is also set so that a checkbox is rendered into the column header. The header checkbox enables the selection of all the rows with a single click.

There is another prop on the grid, suppressRowClickSelection, that is set to true. This disallows row selection when clicking on the row element. Having it set to true matches default functionality of Ext JS’s checkbox selection model. It’s an optional configuration, so you can control row selection by clicking the checkbox or the row element.

Conclusion

The grid selection methods furnished by ag-Grid take us a long way to being able to coordinate selected grid data with the rest of our application. There are times where, as a developer, you’ll want to be 100% hands-on with the component code. The grid can be a complex animal so it’s nice when there’s a competent pre-built solution available that meets the needs of our use case without loads of original code and testing. In our next blog article we’ll look at even more features of the Ext JS grid in React code!