Header Checkbox Selection

It's possible to have a checkbox in the header of a column that lets you select and deselect all rows.

To do this, we can first add a headerCheckboxSelection option to the ID column definition:

// App.js
// ID column definition
headerCheckboxSelection: true,

As with checkboxSelection, headerCheckboxSelection can also be a function. Let's change this code so that the ID header checkbox only shows up if that column is the first one displayed:

// App.js
// ID column definition
headerCheckboxSelection: function(params) {
  const displayedColumns = params.columnApi.getAllDisplayedColumns();
  return displayedColumns[0] === params.column;
},

Now when we move the ID column, the header checkbox only appears when it's the first column.

We can also distinguish between whether that checkbox selects all rows all the time, or only the filtered subset. We can toggle this using this additional property in the ID column definition:

// App.js
// ID column definition
headerCheckboxSelectionFilteredOnly: true

Now, using the quick filter in combination with the header checkbox only selects the filtered subset. Nice!

There are some other neat things you can do with header checkbox selection, so be sure to check out the docs to learn more.

Up next: let's learn about the selection API!