react-bootstrap-table2-editor

react-bootstrap-table2 separate the cell edit code base to react-bootstrap-table2-editor, so there's a little bit different when you use cell edit than react-bootstrap-table. In the following, we are going to show you how to enable the cell edit

Live Demo For Cell Edit

API&Props Definitation

Install

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

How

We have two ways to trigger a editable cell as editing cell:

• click
• dbclick

That's look into how we enable the cell edit on tabe:

import cellEditFactory from 'react-bootstrap-table2-editor';

// omit

<BootstrapTable
  keyField="id"
  data={ products }
  columns={ columns }
  cellEdit={ cellEditFactory({ mode: 'click' }) }
/>

How user save their new editings? We offer two ways:

• Press ENTER(default)
• Blur from current editing cell(Need to enable the cellEdit.blurToSave)

Editable Cell

react-bootstrap-table2 support you to configure the cell editable on three level:

• Row Level (cellEdit.nonEditableRows)
• Column Level (Configure column.editable as bool value)
• Cell Level (Configure column.editable as a callback function)

Validation

column.validator will help you to work on it!

Customize Style/Class

Editing Cell

• Customize the editing cell style via column.editCellStyle
• Customize the editing cell classname via column.editCellClasses

Editor

• Customize the editor style via column.editorStyle
• Customize the editor classname via column.editoClasses

Rich Editors

react-bootstrap-table2 have following predefined editor:

• Text(Default)
• Dropdown
• Date
• Textarea
• Checkbox

In a nutshell, you just only give a column.editor and define the type:

import { Type } from 'react-bootstrap-table2-editor';
const columns = [
  ..., {
    dataField: 'done',
    text: 'Done',
    editor: {
      type: Type.SELECT | Type.TEXTAREA | Type.CHECKBOX | Type.DATE,
      ... // The rest properties will be rendered into the editor's DOM element
    }
  }
]

In the following, we go though all the predefined editors:

Dropdown Editor

Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either editor.options or editor.getOptions should be required prop.

editor.options

This is most simple case for assign the dropdown options data directly.

import { Type } from 'react-bootstrap-table2-editor';
const columns = [
  ..., {
  dataField: 'type',
  text: 'Job Type',
  editor: {
    type: Type.SELECT,
    options: [{
      value: 'A',
      label: 'A'
    }, {
      value: 'B',
      label: 'B'
    }, {
      value: 'C',
      label: 'C'
    }, {
      value: 'D',
      label: 'D'
    }, {
      value: 'E',
      label: 'E'
    }]
  }
}];

editor.getOptions

It is much flexible which accept a function and you can assign the dropdown options dynamically.

There are two case for getOptions:

• Synchronous: Just return the options array in getOptions callback function
• Asynchronous: Call setOptions function argument when you get the options from remote.

// Synchronous

const columns = [
  ..., {
  dataField: 'type',
  text: 'Job Type',
  editor: {
    type: Type.SELECT,
    getOptions: (setOptions, { row, column }) => [.....]
  }
}];

// Asynchronous

const columns = [
  ..., {
  dataField: 'type',
  text: 'Job Type',
  editor: {
    type: Type.SELECT,
    getOptions: (setOptions, { row, column }) => {
      setTimeout(() => setOptions([...]), 1500);
    }
  }
}];

here is an online example.

Date Editor

Date editor is use <input type="date">, the configuration is very simple:

const columns = [
  ..., {
  dataField: 'inStockDate',
  text: 'Stock Date',
  formatter: (cell) => {
    let dateObj = cell;
    if (typeof cell !== 'object') {
      dateObj = new Date(cell);
    }
    return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
  },
  editor: {
    type: Type.DATE
  }
}];

Textarea Editor

Textarea editor is use <input type="textarea">, user can press ENTER to change line and in the react-bootstrap-table2, user allow to save result via press SHIFT + ENTER.

const columns = [
  ..., {
  dataField: 'comment',
  text: 'Product Comments',
  editor: {
    type: Type.TEXTAREA
  }
}];

Checkbox Editor

Checkbox editor allow you to have a pair value choice, the editor.value is required value to represent the actual value for check and uncheck.

const columns = [
  ..., {
  dataField: 'comment',
  text: 'Product Comments',
  editor: {
    type: Type.CHECKBOX,
    value: 'Y:N'
  }
}];

Customize Editor

If you feel above predefined editors are not satisfied to your requirement, you can certainly custom the editor via column.editorRenderer. It accept a function and pass following arguments when function called:

• editorProps: Some useful attributes you can use on DOM editor, like class, style etc.
• value: Current cell value
• row: Current row data
• column: Current column definition
• rowIndex: Current row index
• columnIndex: Current column index

Note when implement a custom React editor component, this component should have a getValue function which return current value on editor

Note when you want to save value, you can call editorProps.onUpdate function

Following is a short example:

class QualityRanger extends React.Component {
  static propTypes = {
    value: PropTypes.number,
    onUpdate: PropTypes.func.isRequired
  }
  static defaultProps = {
    value: 0
  }
  getValue() {
    return parseInt(this.range.value, 10);
  }
  render() {
    const { value, onUpdate, ...rest } = this.props;
    return [
      <input
        { ...rest }
        key="range"
        ref={ node => this.range = node }
        type="range"
        min="0"
        max="100"
      />,
      <button
        key="submit"
        className="btn btn-default"
        onClick={ () => onUpdate(this.getValue()) }
      >
        done
      </button>
    ];
  }
}

const columns = [
  ..., {
  dataField: 'quality',
  text: 'Product Quality',
  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
    <QualityRanger { ...editorProps } value={ value } />
  )
}];