Row Selection With Checkboxes

To include checkbox selection for a column, set the attribute "checkboxSelection": True on the Column Definition. You
can set this attribute on as many columns as you like, however it doesn’t make sense to have it in more than one column
in a table.

Checkbox Selection Simple Example

The following example shows a simple use case adding checkboxes in the first column that can be used to select the rows.

Note that dashGridOptions={"rowSelection": "multiple", "suppressRowClickSelection": True} is set to allow multi-row
selection and to disable the row selection clicking on the rows to allow only the selection using the checkboxes.

checkboxSelection as a function

checkboxSelection can also be specified as a function. This allows dynamically setting whether a cell has a checkbox
or not. The function is called when the Cell is drawn, and called again if there are any changes to the row’s data or
the column positions (for example, the function could be showing the checkbox depending on what value is displayed, or
if the column in question is the first column to show a checkbox for the first column only, see examples below).

If the function returns false, a selection checkbox will still be created and in the DOM, however it will not be visible
using CSS visibility: hidden. This is to ensure the following UX properties:

To be clear, there is a slight difference between a function returning false, and false value provided explicitly. When
a function is used and returns false, the grid assumes a checkbox is sometimes used and as such creates one that is
not visible.

# Do not create checkboxes
"checkboxSelection": False

# Create checkboxes, making them invisible
"checkboxSelection": {"function": "false"}

Instead of making them invisible, it is possible to set the Column parameter showDisabledCheckboxes: True to display
these checkboxes as disabled.

Note that when the checkboxes are hidden/disabled, the rows are still selectable clicking on the rows (unless setting
the Grid Option "suppressRowClickSelection": True,
see Checkbox Selection Simple Example )
or using the header checkbox if set. To be sure
the rows are not selectable, the Grid Option function isRowSelectable must be used,
see Selectable Rows with Checkboxes.
Using this function will also hide the checkboxes of the non-selectable rows.

The following example uses the function "checkboxSelection": {"function": "params.data.year > 2007"} to display only
the checkboxes when ‘year’ is above 2007.

Note that it is possible to show the disabled checkboxes instead of hiding them. Moreover, the ‘year’ column is
editable, try to change values to see the modifications on the checkboxes.

The example Header Checkbox Selection is another
example using a function that display the checkboxes only in the first column even changing their position with
dragging.

Header Checkbox Selection

It is possible to have a checkbox in the header for selection. To configure the column to have a header checkbox, set
Column Definition "headerCheckboxSelection": True. headerCheckboxSelection can also be a function, if you want the
header checkbox to appear on conditions.

The example below uses the following function:

"headerCheckboxSelection": {"function": 'params.column == params.columnApi.getAllDisplayedColumns()[0]'}

This function displays the header checkbox only on the header of first column even when the column positions are changed
dragging them.

Note that the same function is used for the parameter checkboxSelection to also display the checkboxes only in the
cells of the first column, even if the columns are dragged.

Header Checkbox Using Filters And Pagination

By default, even when using filters or pagination, the header checkbox will select all rows when checked, and un-select all
rows when unchecked and the header checkbox will update its state based on all rows.

This may not the expected behavior, to select only the filtered rows or only the rows of the current page, it is
possible to set respectively the Column Definitions "headerCheckboxSelectionFilteredOnly": True
and "headerCheckboxSelectionCurrentPageOnly": True. See the examples below.

Default Rows Selection Example

This example shows the default behavior using the header checkbox, all the rows will be selected through all the pages
and even if a filter is applied.

Select Filtered Rows Only Example

In this example, Column Definitions "headerCheckboxSelectionFilteredOnly": True is set. The header checkbox works on
filtered rows only. That means if you filter first, then hit the checkbox to select or un-select, then only the filtered
rows are affected.

Select Current Page Only Example

In this example, Column Definitions "headerCheckboxSelectionCurrentPageOnly": True is set. Only items on the current
page are selected. Try going to a different page after clicking on the header checkbox.

Selectable Rows with Checkboxes

The Grid Option function isRowSelectable can be used without checkboxes as shown in
Specify Selectable Rows but using
checkboxes helps to identify the selectable rows as the checkbox of the non-selectable rows will be hidden as
illustrated in the example below.

This example uses the function 'isRowSelectable': {"function": "params.data.year > 2007"}.

Note that clicking on the header checkbox will only select the selectable rows.