react-bootstrap-table2/docs/cell-edit.md

Cell Editing

Before start to use cell edit, please remember to install react-bootstrap-table2-editor

$ npm install react-bootstrap-table2-editor --save

Properties on cellEdit prop

• mode (required)
• blurToSave
• nonEditableRows
• timeToCloseMessage
• beforeSaveCell
• afterSaveCell
• errorMessage
• onErrorMessageDisappear

cellEdit - [Object]

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 the shape of cellEdit object:

{
  mode: 'click',
  blurToSave: true,
  timeToCloseMessage: 2500,
  errorMessage: '',
  beforeSaveCell: (oldValue, newValue, row, column) => { ... },
  afterSaveCell: (oldValue, newValue, row, column) => { ... },
  onErrorMessageDisappear: () => { ... },
  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.

cellEdit.beforeSaveCell - [Function]

This callback function will be called before triggering cell update.

const cellEdit = {
  // omit...
  beforeSaveCell: (oldValue, newValue, row, column) => { ... }
}

cellEdit.afterSaveCell - [Function]

This callback function will be called after updating cell.

const cellEdit = {
  // omit...
  afterSaveCell: (oldValue, newValue, row, column) => { ... }
};

cellEdit.errorMessage - [String]

This prop is not often used. Only used when you want to keep the error message in your application state and also handle the cell editing on remote mode.

cellEdit.onErrorMessageDisappear - [Function]

This callback function will be called when error message discard so that you can sync the newest error message to your state if you have.