Row Selection

We've got some async data showing up when our component mounts. Let's add a checkbox to each row and enable selection. Then, in the next video, we'll do something with that selected data.

Just like with sorting and filtering, if you've ever done something like this manually, you might be bracing yourself for something super complicated. But, again, with ag-Grid, it turns out it's pretty straightforward.

In our columnDefs, let's add a checkboxSelection property to our make column:

// App.js
columnDefs: [
   {
    headerName: 'Make',
    field: 'make',
    sortable: true,
    filter: true,
    checkboxSelection: true
  },
  {
    headerName: 'Model',
    field: 'model',
    sortable: true,
    filter: true
  },
   {
    headerName: 'Price',
    field: 'price',
    sortable: true,
    filter: true
   }
],

Then, we need to tell our grid to allow multiple rows. Down in the render method, change the AgGridReact component do add a prop for rowSelection:

<AgGridReact
   rowSelection="multiple"
   columnDefs={this.state.columnDefs}
   rowData={this.state.rowData}
  ></AgGridReact>

When you run npm start and navigate to localhost:3000, you should see checkboxes next to the Make column that let you select rows. Great!

But...can we actually do anything with that data? Let's do something simple with it in the next video using the powerful Grid API.