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

``sh
$ 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:

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

// omit

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

$3

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

$3

* 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:

`js
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:

$3


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.

`js
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.


`js
// 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.

$3


Date editor is use , the configuration is very simple:

`js
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
}
}];
`

$3


Textarea editor is use , user can press ENTER to change line and in the react-bootstrap-table2, user allow to save result via press SHIFT + ENTER.

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


$3


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.

`js
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:

`js
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 [
{ ...rest }
key="range"
ref={ node => this.range = node }
type="range"
min="0"
max="100"
/>,
key="submit"
className="btn btn-default"
onClick={ () => onUpdate(this.getValue()) }
>
done

];
}
}

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

)
}];
``