From f2a44c976d2dc7026363604fc609311c19829f21 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 6 May 2018 13:50:59 +0800 Subject: [PATCH] patch docs --- docs/columns.md | 83 +++++++++ .../react-bootstrap-table2-editor/README.md | 170 +++++++++++++++++- 2 files changed, 251 insertions(+), 2 deletions(-) diff --git a/docs/columns.md b/docs/columns.md index d7a7bea..e7b477b 100644 --- a/docs/columns.md +++ b/docs/columns.md @@ -34,6 +34,8 @@ Available properties in a column object: * [editCellClasses](#editCellClasses) * [editorStyle](#editorStyle) * [editorClasses](#editorClasses) +* [editor](#editor) +* [editorRenderer](#editorRenderer) * [filter](#filter) * [filterValue](#filterValue) @@ -560,6 +562,87 @@ This is almost same as [`column.editCellStyle`](#editCellStyle), but `column.edi ## column.editorClasses - [Object | Function] This is almost same as [`column.editCellClasses`](#editCellClasses), but `column.editorClasses` is custom the class on editor instead of cell(`td`). +## column.editor - [Object] +`column.editor` allow you to custom the type of cell editor by following predefined type: + +* Text(Default) +* Dropdown +* Date +* Textarea +* Checkbox + +Following is a quite example: + +```js +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; + +const columns = [ + //... + , { + dataField: 'done', + text: 'Done', + editor: { + type: Type.CHECKBOX, + value: 'Y:N' + } + } +]; +``` + +If you want more information, please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-editor). + +## column.editorRenderer - [Function] +If you feel above predefined editors are not satisfied to your requirement, you can totally custom the editor via `column.editorRenderer`: + +```js +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; + +// Custom Editor +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 [ + this.range = node } + type="range" + min="0" + max="100" + />, + + ]; + } +} + + +const columns = [ + //... + , { + dataField: 'done', + text: 'Done', + editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => + ; + } +]; +``` + ## column.filter - [Object] Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters: diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md index 5c9719e..55d6c1d 100644 --- a/packages/react-bootstrap-table2-editor/README.md +++ b/packages/react-bootstrap-table2-editor/README.md @@ -48,6 +48,9 @@ How user save their new editings? We offer two ways: * Column Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value) * Cell Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function) +## Validation + +[column.validator](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will help you to work on it! ## Customize Style/Class ### Editing Cell @@ -58,6 +61,169 @@ How user save their new editings? We offer two ways: * Customize the editor style via [column.editorStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorstyle-object-function) * Customize the editor classname via [column.editoClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorclasses-string-function) -## Validation +## Rich Editors +`react-bootstrap-table2` have following predefined editor: -[`column.validator`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will help you to work on it! \ No newline at end of file +* Text(Default) +* Dropdown +* Date +* Textarea +* Checkbox + +In a nutshell, you just only give a [column.editor](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditor-object) 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: + +### Dropdown Editor +Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor. + +```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' + }] + } +}]; +``` + +### Date Editor +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.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`; + }, + editor: { + type: Type.DATE + } +}]; +``` + +### Textarea Editor +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 + } +}]; +``` +### 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. + +```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](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorrenderer-function). 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 [ + this.range = node } + type="range" + min="0" + max="100" + />, + + ]; + } +} + +const columns = [ + ..., { + dataField: 'quality', + text: 'Product Quality', + editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => ( + + ) +}]; +```