react-bootstrap-table2/docs/row-selection.md

Row selection

react-bootstrap-table2 supports the row selection feature. By passing prop selectRow to enable row selection. When you enable this feature, react-bootstrap-table2 will append a new selection column at first.

Available properties

The following are available properties in selectRow:

Required

• mode (required)
• style
• classes)
• nonSelectable)

Optional

selectRow.mode - [String]

Specifying the selection way for single(radio) or multiple(checkbox). If radio was assigned, there will be a radio button in the selection column; otherwise, the checkbox instead.

values

• radio
• checkbox

examples

const selectRow = {
  mode: 'radio' // single row selection
};
<BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
  selectRow={ selectRowProp }
/>

const selectRow = {
  mode: 'checkbox' // multiple row selection
};

<BootstrapTable
  keyField='id'
  data={ products }
  columns={ columns }
  selectRow={ selectRowProp }
/>

selectRow.style - [Object | Function]

selectRow.style allow you to have custom style on selected rows:

const selectRow = {
  mode: 'checkbox',
  style: { background: 'red' }
};

If you wanna more flexible customization, selectRow.style also accept a function:

const selectRow = {
  mode: 'checkbox',
  style: (row, rowIndex) => { return ...; }
};

selectRow.classes - [String | Function]

selectRow.classes allow you to add css class on selected rows:

const selectRow = {
  mode: 'checkbox',
  classes: 'custom-class'
};

If you wanna more flexible customization, selectRow.classes also accept a function:

const selectRow = {
  mode: 'checkbox',
  classes: (row, rowIndex) => { return ...; }
};

selectRow.nonSelectable - [Array]

This prop allow you to restrict some rows which can not be selected by user. selectRow.nonSelectable accept an rowkeys array.

const selectRow = {
  mode: 'checkbox',
  nonSelectable: [1, 3 ,5]
};