The bulk select provides a way of selecting data records in batches. You can select all data at once, all data on current page or deselect all.
Examples
Basic paginated bulk select
To display a default bulk select, you need to pass number of selected items using selectedCount, the onSelect callback accepting bulk select option values and selecting data accordingly, pageCount defining number of items on the current page, pageSelected and pagePartiallySelected boolean flags to define the state os the bulk select checkbox..
Bulk select with all option
To display an option for selecting all data at once, pass canSelectAll flag together with totalCount of data entries. You can also remove the page select option by setting isDataPaginated to false,
Props
BulkSelect
| Name | Type | Default | Description |
|---|---|---|---|
| onSelectrequired | (value: BulkSelectValue) => void | Callback called on item select | |
| canSelectAll | boolean | Indicates whether "Select all" option should be available | |
| className | string | BulkSelect className | |
| isDataPaginated | boolean | true | Indicates whether selectable items are paginated |
| menuToggleCheckboxProps | Omit<MenuToggleCheckboxProps, 'onChange' | 'isChecked' | 'instance' | 'ref'> | Additional props for MenuToggleCheckbox | |
| ouiaId | string | 'BulkSelect' | Custom OUIA ID |
| pageCount | number | Number of entries present in current page | |
| pagePartiallySelected | boolean | Indicates if ONLY some current page items are selected | |
| pageSelected | boolean | Indicates if ALL current page items are selected | |
| selectedCount | number | 0 | Number of selected entries |
| totalCount | number | 0 | Number of all entries |
