@musicstory/react-bootstrap-table2-editor
v1.0.1
Published
it's the editor addon for react-bootstrap-table2 by musicstory
Downloads
316
Maintainers
Readme
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
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 valuerow
: Current row datacolumn
: Current column definitionrowIndex
: Current row indexcolumnIndex
: 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 } />
)
}];