react-bootstrap-table2/docs

Documentation

BootstrapTable Props

Required

• keyField (required)
• data (required)
• columns (required)

Optional

• caption
• striped
• bordered
• hover
• condensed
• cellEdit
• selectRow
• rowStyle
• rowClasses
• rowEvents
• defaultSorted

keyField(required) - [String]

Tells react-bootstrap-table2 which column is unique.

data(required) - [Array]

Provides data for your table. It accepts a single Array object.

columns(required) - [Object]

Accepts a single Array object, please see columns definition for more detail.

caption - [String | Node]

Same as HTML caption tag, you can set it as String or a React JSX.

striped - [Bool]

Same as bootstrap .table-striped class for adding zebra-stripes to a table.

bordered - [Bool]

Same as bootstrap .table-bordered class for adding borders to a table and table cells.

hover - [Bool]

Same as bootstrap .table-hover class for adding mouse hover effect (grey background color) on table rows.

condensed - [Bool]

Same as bootstrap .table-condensed class for making a table more compact by cutting cell padding in half.

cellEdit - [Object]

Makes table cells editable, please see cellEdit definition for more detail.

selectRow - [Object]

Makes table rows selectable, please see selectRow definition for more detail.

rowStyle = [Object | Function]

Custom the style of table rows:

<BootstrapTable data={ data } columns={ columns } rowStyle={ { backgroundColor: 'red' } } />

This prop also accept a callback function for flexible to custom row style:

const rowStyle = (row, rowIndex) => {
  return { ... };
};

<BootstrapTable data={ data } columns={ columns } rowStyle={ rowStyle } />

rowClasses = [String | Function]

Custom the style of table rows:

<BootstrapTable data={ data } columns={ columns } rowClasses="custom-row-class" />

This prop also accept a callback function for flexible to custom row style:

const rowClasses = (row, rowIndex) => {
  return 'custom-row-class';
};

<BootstrapTable data={ data } columns={ columns } rowClasses={ rowClasses } />

rowEvents - [Object]

Custom the events on row:

const rowEvents = {
  onClick: (e) => {
    ....
  }
};
<BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />

defaultSorted - [Array]

defaultSorted accept an object array which allow you to define the default sort columns when first render.

const defaultSorted = [{
  dataField: 'name', // if dataField is not match to any column you defined, it will be ignored.
  order: 'desc' // desc or asc
}];