Row Selection
For the table row selection functionality, the usage is almost same as react-bootstrap-table. If you are a user from legacy react-bootstrap-table, you can consider to skip this part.
Live Demo For Row Selection
API & Props Definition
Selection Mode
We support the single and multiple selection on table, config the selectRow.mode on BootstrapTable will enable the selection on the table.
By default behavior, user need to click on the selection column or the checkbox/radio to select/unselect a row, for a user experience perspective, we have selectoRow.clickToSelect to allow user to select/unselect row by clicking on the row.
Selection Management
Please check selectoRow.selected, it's used for default selection usually but also can be used as a external selection control.
This is an example for selection management.
In addition, this is another example for selection management
Customization
Style/Class
Like column, we support to custom the style, class on the selecting row easily via following selectRow props:
If you configure some specific rows as non-selectable, you can also custom them via:
Selection Column
- For Custom header cell:
selectRow.selectionRenderer - For Custom normal cell:
selectRow.selectionHeaderRenderer - For Custom header cell style:
selectRow.headerColumnStyle - For Custom normal cell style:
selectRow.selectColumnStyle
Position
Default we render selection column in the left side of table, you can use selectRow.selectColumnPosition to make it on the right.
In addition, react-bootstrap-table2 offer below props to hide selection column:
selectRow.hideSelectColumn: Hide the selection column.selectRow.hideSelectAll: Hide the select all checkbox in the selection header cell.
Event Listening
selectRow.onSelect allow you to listen a row is select or unselect. For the multiple selection, we also have selectRow.onSelectAll to listen the select/unselect all event.