This commit is contained in:
AllenFang
2018-03-18 23:02:24 +08:00
parent 6d2746ea1d
commit b27e7eb13c
4 changed files with 28 additions and 22 deletions

View File

@@ -123,7 +123,7 @@ Enable the column sort via a `true` value given.
```
## column.classes - [String | Function]
It's availabe to have custom class on table column:
It's available to have custom class on table column:
```js
{
@@ -151,7 +151,7 @@ In addition, `classes` also accept a callback function which have more power to
A new `String` will be the result as element class.
## column.headerClasses - [String | Function]
It's similar to [`column.classes`](#columnclasses-string-function), `headerClasses` is availabe to have customized class on table header column:
It's similar to [`column.classes`](#columnclasses-string-function), `headerClasses` is available to have customized class on table header column:
```js
{
@@ -176,7 +176,7 @@ Furthermore, it also accept a callback function which takes 2 arguments and a `S
A new `String` will be the result of element headerClasses.
## column.style - [Object | Function]
It's availabe to have custom style on table column:
It's available to have custom style on table column:
```js
{
@@ -206,7 +206,7 @@ A new `Object` will be the result of element style.
## column.headerStyle - [Object | Function]
It's availabe to have customized inline-style on table header column:
It's available to have customized inline-style on table header column:
```js
{
@@ -264,7 +264,7 @@ A new `String` will be the result of element title.
}
```
It's also availabe to custom via a callback function:
It's also available to custom via a callback function:
```js
{
headerTitle: function callback(column, colIndex) { ... }
@@ -386,7 +386,7 @@ Not only `Object`, `callback function` is also acceptable. It takes **4** argume
A new `Object` will be the result of element HTML attributes.
> Caution:
> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited:
> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priority and it will be overwritten:
```js
{
@@ -397,7 +397,7 @@ A new `Object` will be the result of element HTML attributes.
```
## column.headerAttrs - [Object | Function]
`headerAttrs` is similiar to [`column.attrs`](#columnattrs-object-function) but it works for header column.
`headerAttrs` is similar to [`column.attrs`](#columnattrs-object-function) but it works for header column.
```js
{
// omit...
@@ -487,7 +487,7 @@ If a callback function given, you can control the editable level as cell level:
}
```
The return value can be a bool or an object. If your valiation is pass, return `true` explicitly. If your valiation is invalid, return following object instead:
The return value can be a bool or an object. If your validation is pass, return `true` explicitly. If your validation is invalid, return following object instead:
```js
{
valid: false,
@@ -558,7 +558,7 @@ import { textFilter } from 'react-bootstrap-table2-filter';
For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
## column.filterValue - [Function]
Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filterd:
Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filtered:
**Parameters**
* `cell`: The value of current cell.

View File

@@ -7,8 +7,8 @@ sidebar_label: Migration
## Migration Guide
* Please see the [CHANGELOG](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/new-version-0.1.0.html) for `react-bootstrap-table2` first drop.
* Please see the [Roadmap](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html) for `react-bootstrap-table2` in 2018/Q1.
* Feel free to see the [offical docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!!
* Please see the [Road Map](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html) for `react-bootstrap-table2` in 2018/Q1.
* Feel free to see the [official docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!!
## Preface
@@ -29,11 +29,11 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
* Overlay/Loading Addons
This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernal module(SRP). Hence, which means you probably need to install above addons when you need specific features.
This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
## Core Table Migration
There is a big chagne is that there's no `TableHeaderColumn` in the `react-bootstrap-table2`, instead you are supposed to be define the `columns` prop on `BootstrapTable`:
There is a big change is that there's no `TableHeaderColumn` in the `react-bootstrap-table2`, instead you are supposed to be define the `columns` prop on `BootstrapTable`:
```js
import BootstrapTable from 'react-bootstrap-table-next';
@@ -54,8 +54,8 @@ const columns = [{
The `text` property is just same as the children for the `TableHeaderColumn`, if you want to custom the header, there's a new property is: [`headerFormatter`](./column-props.html#columnheaderformatter-function).
* [`BootstrapTable` Definitation](./table-props.html)
* [Column Definitation](./column-props.html)
* [`BootstrapTable` Definition](./table-props.html)
* [Column Definition](./column-props.html)
## Table Sort
@@ -71,7 +71,7 @@ Please see [Work with table sort](./basic-sort.html).
- [ ] Sort management
- [ ] Multi sort
Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](./column-props.html#columnsort-bool) property on column definitation.
Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](./column-props.html#columnsort-bool) property on column definition.
## Row Selection

View File

@@ -103,7 +103,7 @@ const selectRow = {
```
## selectRow.bgColor - [String | Function]
A quick way to specify the backgroud color when row is selected
A quick way to specify the background color when row is selected
```js
const selectRow = {

View File

@@ -17,6 +17,8 @@ title: BootstrapTable Props
* [bordered](#bordered-bool)
* [hover](#hover-bool)
* [condensed](#condensed-bool)
* [id](#id-string)
* [classes](#classes-string)
* [cellEdit](#celledit-object)
* [selectRow](#selectrow-object)
* [rowStyle](#rowstyle-object-function)
@@ -63,7 +65,7 @@ A special case for remote pagination:
remote={ { pagination: true, filter: false, sort: false } }
```
There'r a apecial case for remote pagination, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall datas.
There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data.
## noDataIndication - [Function]
`noDataIndication` should be a callback function which return anything that will be showed in the table when data is **empty**.
@@ -73,7 +75,7 @@ Telling if table is loading or not, for example: waiting data loading, filtering
When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay-function) prop, if [`overlay`](#overlay-function) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
## overlay - [Function]
`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
`overlay` accept a factory function which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
```sh
$ npm install react-bootstrap-table2-overlay
@@ -107,6 +109,10 @@ Same as bootstrap `.table-hover` class for adding mouse hover effect (grey backg
## condensed - [Bool]
Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half.
## id - [String]
Customize id on `table` element.
## classes - [String]
Customize class on `table` element.
## cellEdit - [Object]
Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
@@ -170,7 +176,7 @@ const defaultSorted = [{
```
## pagination - [Object]
`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly.
`pagination` allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionally.
```sh
$ npm install react-bootstrap-table2-paginator --save
@@ -212,7 +218,7 @@ paginationFactory({
prePageTitle: 'Go to previous', // the title of previous page button
firstPageTitle: 'Go to first', // the title of first page button
lastPageTitle: 'Go to last', // the title of last page button
hideSizePerPage: true, // hide the size per page dorpdown
hideSizePerPage: true, // hide the size per page dropdown
hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
@@ -220,7 +226,7 @@ paginationFactory({
```
## filter - [Object]
`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
`filter` allow user to filter data by column. However, filter functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
```sh
$ npm install react-bootstrap-table2-filter --save