diff --git a/docs/basic-celledit.md b/docs/basic-celledit.md index 7a7d563..0c1af40 100644 --- a/docs/basic-celledit.md +++ b/docs/basic-celledit.md @@ -51,14 +51,181 @@ How user save their new editings? We offer two ways: * Column Level (Configure [column.editable](./column-props.html#columneditable-bool-function) as bool value) * Cell Level (Configure [column.editable](./column-props.html#columneditable-bool-function) as a callback function) -### Editing Cell - -* Customize the editing cell style via [column.editCellStyle](./column-props.html#columneditcellstyle-object-function) -* Customize the editing cell classname via [column.editCellClasses](./column-props.html#columneditcellclasses-string-function) - -### Editor -* Customize the editor style via [column.editorStyle](./column-props.html#columneditorstyle-object-function) -* Customize the editor classname via [column.editoClasses](./column-props.html#columneditorclasses-string-function) ## Validation [`column.validator`](./column-props.html#columnvalidator-function) will help you to work on it! + + +## Customize Style/Class + +* Customize the editing cell style via [column.editCellStyle](./column-props.html#columneditcellstyle-object-function) +* Customize the editing cell classname via [column.editCellClasses](./column-props.html#columneditcellclasses-string-function) +* Customize the editor style via [column.editorStyle](./column-props.html#columneditorstyle-object-function) +* Customize the editor classname via [column.editoClasses](./column-props.html#columneditorclasses-string-function) + +## 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](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) => ( + + ) +}]; +``` diff --git a/docs/basic-row.md b/docs/basic-row.md index c6ac88e..a9f2474 100644 --- a/docs/basic-row.md +++ b/docs/basic-row.md @@ -22,6 +22,7 @@ sidebar_label: Work on Row Currently, `react-bootstrap-table2` only wrapped up the following events to allow its callback to receive `row` and `rowIndex`, for example: * `onClick` +* `onDoubleClick` * `onMouseEnter` * `onMouseLeave` diff --git a/docs/column-props.md b/docs/column-props.md index 15c3051..eb0bf80 100644 --- a/docs/column-props.md +++ b/docs/column-props.md @@ -37,6 +37,8 @@ Definition of columns props on BootstrapTable * [editCellClasses](#columneditcellclasses-string-function) * [editorStyle](#columneditorstyle-object-function) * [editorClasses](#columneditorclasses-string-function) +* [editor](#columneditor-object) +* [editorRenderer](#columneditorrenderer-function) * [filter](#columnfilter-object) * [filterValue](#columnfiltervalue-function) @@ -545,6 +547,88 @@ This is almost same as [`column.editCellStyle`](#columneditcellstyle-object-func ## column.editorClasses - [String | Function] This is almost same as [`column.editCellClasses`](#columneditcellclasses-string-function), but `column.editorClasses` is for 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' + } + } +]; +``` + +Please check [here](./basic-celledit.html#rich-editors) for more detail about rich editors. + +## 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) => + ; + } +]; +``` +Please check [here](./basic-celledit.html#customize-editor) for more detail. + ## 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/docs/pagination-props.md b/docs/pagination-props.md index f8dbef1..4f22d81 100644 --- a/docs/pagination-props.md +++ b/docs/pagination-props.md @@ -40,6 +40,7 @@ const pagination = paginationFactory({ * [hidePageListOnlyOnePage](#paginationhidepagelistonlyonepage-bool) * [onPageChange](#paginationonpagechange-function) * [onSizePerPageChange](#paginationonsizeperpagechange-function) +* [showTotal](#paginationshowtotal-bool) ----- ## pagination.page - [Number] @@ -105,11 +106,14 @@ A quick way to specify the title on the next page button. A quick way to specify the title on the last page button. ## pagination.hideSizePerPage - [Bool] -You can hide it :) +You can hide the size per page dropdown. ## pagination.hidePageListOnlyOnePage - [Bool] You can hide the pagination when there's only one page in table. Default is `false`. +## pagination.showTotal - [Bool] +Default is `false`, if enable will display a text to indicate the row range of current page. + ## pagination.onPageChange - [Function] Accept a callback function and will be called when page changed. This callback function get below arguments: diff --git a/website/blog/2018-05-07-version-bump.md b/website/blog/2018-05-07-version-bump.md new file mode 100644 index 0000000..fbb9fca --- /dev/null +++ b/website/blog/2018-05-07-version-bump.md @@ -0,0 +1,26 @@ +--- +title: New Release (2018-05-07) +author: Allen Fang +authorURL: https://twitter.com/allenfang_tw +--- + +## Changed Packages + +This release bump following packages: + +* `react-bootstrap-table-next@0.1.9` +* `react-bootstrap-table2-editor@0.2.0` +* `react-bootstrap-table2-paginator@0.1.2` + +## Changelog + +### Bug fixes +N/A + +### Features +* Rich cell editors([#322](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/322)) +* Allow to custom cell editors([#322](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/322)) +* Implement pagination total indication([#323](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/323)) + +### Enhancements +* `rowEvents` support `onDoubleClick`([#324](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/324))