it's the editor addon for react-bootstrap-table2
npm install react-bootstrap-table2-editorreact-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
-----
``sh`
$ npm install react-bootstrap-table2-editor --save
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
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)
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.editoClassesRich 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
// Synchronousconst 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) => (
)
}];
``