Skip to main content

Cell Editing Props

Following we list all props for cellEditFactory from react-bootstrap-table-ng-editor.

import cellEditFactory from 'react-bootstrap-table-ng-editor';

const cellEdit = cellEditFactory({
  mode: 'click',
  ...
});

`<BootstrapTable` cellEdit={ cellEdit } ... />`

Required​

Optional​

cellEdit.mode - [String]​

cellEdit.mode possible value is click and dbclick. It's required value that tell react-bootstrap-table-ng 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-table-ng 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.autoSelectText - [Bool]​

Default is false, when enable it, react-bootstrap-table-ng will help you to select the text in the text input automatically when editing.

NOTE: This props only work for text and textarea.

cellEdit.beforeSaveCell - [Function]​

This callback function will be called before triggering cell update.

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

If you want to perform a async beforeSaveCell, you can do it like that:

const cellEdit: {
  // omit...
  beforeSaveCell(oldValue, newValue, row, column, done) {
    setTimeout(() => {
      if (confirm('Do you want to accep this change?')) {
        done(); // contine to save the changes
      } else {
        done(false); // reject the changes
      }
    }, 0);
    return { async: true };
  }
};

cellEdit.afterSaveCell - [Function]​

This callback function will be called after updating cell.

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

cellEdit.onStartEdit - [Function]​

This callback function will be called after editor component mounted

const cellEdit = {
  // omit...
  onStartEdit: (row, column, rowIndex, columnIndex) => { ... }
};

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.