react-bootstrap-table2/docs

Documents

Props on BootstrapTable

Required

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

Optional

• caption
• striped
• bordered
• hover
• condensed
• cellEdit

keyField(required) - [String]

keyField is a prop to tell react-bootstrap-table2 which column is unigue key.

data(required) - [Array]

Assign your table data via data prop. It only accept an Array object.

columns(required) - [Object]

columns props accept an Array object, please see columns definition for more detail.

caption - [String | Node]

Same as caption tag in HTML. You can give a String or a React JSX.

striped - [Bool]

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

bordered - [Bool]

Same as .table-bordered class for adding borders on all sides of the table and cells

hover - [Bool]

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

condensed - [Bool]

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

cellEdit - [Bool]

Assign a valid cellEdit object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press ENTER to save cell or press ESC to cancel editing.

Note: The keyField column can't be edited

Following is a cellEdit object:

{
  mode: 'click',
  blurToSave: true,
  timeToCloseMessage: 2500,
  onEditing: (rowId, dataField, newValue) => { ... },
  beforeSaveCell: (oldValue, newValue, row, column) => { ... },
  afterSaveCell: (oldValue, newValue, row, column) => { ... },
  nonEditableRows: () => { ... }
}

cellEdit.mode - [String]

cellEdit.mode possible value is click and dbclick. It's required value that tell react-bootstrap-table2 how to trigger the cell editing.

cellEdit.blurToSave - [Bool]

Default is false, enable it will be able to save the cell automatically when blur from the cell editor.

cellEdit.nonEditableRows - [Function]

cellEdit.nonEditableRows accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(keyField)

cellEdit.timeToCloseMessage - [Function]

If a column.validator defined and the new value is invalid, react-bootstrap-table2 will popup a alert at the bottom of editor. cellEdit.timeToCloseMessage is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.