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)
• bgColor
• nonSelectable)
• clickToSelect)
• clickToEdit

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.bgColor - [String | Function]

The backgroud color when row is selected

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

There's also a more good way to custom it:

const selectRow = {
  mode: 'checkbox',
  bgColor: (row, rowIndex) => {
    return ....;  // return a color code
  }
};

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]
};

selectRow.clickToSelect - [Bool]

Able to select row when clicking on row.

const selectRow = {
  mode: 'checkbox',
  clickToSelect: true
};

Note: if you also enable cellEdit, the selectRow.clickToSelect will deactivate the functionality of cell editing
If you want to click on row to select row and edit cell simultaneously, you are suppose to enable selectRow.clickToEdit

selectRow.clickToEdit - [Bool]

Able to click to edit cell and select row

const selectRow = {
  mode: 'checkbox',
  clickToSelect: true
  clickToEdit: true
};