mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
20180507 release
This commit is contained in:
AllenFang
parent
02aa4a4e82
commit
5edfdeea0d
@ -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 `<input type="date">`, 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 `<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`.
|
||||
|
||||
```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 [
|
||||
<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 } />
|
||||
)
|
||||
}];
|
||||
```
|
||||
|
||||
@ -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`
|
||||
|
||||
|
||||
@ -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 [
|
||||
<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: 'done',
|
||||
text: 'Done',
|
||||
editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) =>
|
||||
<QualityRanger { ...editorProps } value={ value } />;
|
||||
}
|
||||
];
|
||||
```
|
||||
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:
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
26
website/blog/2018-05-07-version-bump.md
Normal file
26
website/blog/2018-05-07-version-bump.md
Normal file
@ -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))
|
||||
Loading…
Reference in New Issue
Block a user