The Grid component supports selecting/deselecting rows programmatically or via the UI. It seamlessly integrates with paging, sorting, filtering, and grouping.
The following plugins implement selection features:
Note that plugin order is important.
TableSelection plugins to set up a simple Grid with selection enabled. The following example demonstrates how to configure selection in the controlled mode. Pass the initially selected rows to the
selection property and handle the
onSelectionChange event to control the selection.
A user can select a row using a checkbox click by default. Set the
selectByRowClick property to true to check/uncheck a checkbox by a row click as demonstrated in the following example:
In some scenarios, it is useful to highlight selected rows instead of using checkboxes. For this, hide checkboxes by setting the
showSelectionColumn property to false and assign true to the
highlightRow properties as demonstrated in the following demo:
Perform the following steps to enable the Select All capability:
IntegratedSelectionplugin above the
showSelectAllproperty to true.
The following example demonstrates selection without paging. You can increase the row count using the Table's virtual mode.
If you are using the
IntegratedPaging plugin, you can integrate the Select All behavior with the
The Select All checkbox selects/deselects all rows on a page or all pages depending on the
IntegratedPaging plugin's order.
IntegratedSelection plugin after
IntegratedPaging to implement the Select All behavior within a visible page:
IntegratedSelection plugin before
IntegratedPaging to select/deselect all rows on all pages: