mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-08-16 21:50:17 +00:00
correct the typo of documents
This commit is contained in:
Chun-MingChen
+5
-5
@@ -59,14 +59,14 @@ A special case for remote pagination:
|
||||
remote={ { pagination: true, filter: false, sort: false } }
|
||||
```
|
||||
|
||||
There is 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.
|
||||
|
||||
### <a name='loading'>loading - [Bool]</a>
|
||||
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
|
||||
When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
|
||||
|
||||
### <a name='overlay'>overlay - [Function]</a>
|
||||
`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
|
||||
@@ -163,7 +163,7 @@ const defaultSorted = [{
|
||||
```
|
||||
|
||||
### <a name='pagination'>pagination - [Object]</a>
|
||||
`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
|
||||
@@ -205,7 +205,7 @@ paginator({
|
||||
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
|
||||
@@ -213,7 +213,7 @@ paginator({
|
||||
```
|
||||
|
||||
### <a name='filter'>filter - [Object]</a>
|
||||
`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
|
||||
|
||||
+11
-11
@@ -137,7 +137,7 @@ Enable the column sort via a `true` value given.
|
||||
```
|
||||
|
||||
## <a name='classes'>column.classes - [String | Function]</a>
|
||||
It's availabe to have custom class on table column:
|
||||
It's available to have custom class on table column:
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -165,7 +165,7 @@ In addition, `classes` also accept a callback function which have more power to
|
||||
A new `String` will be the result as element class.
|
||||
|
||||
## <a name='headerClasses'>column.headerClasses - [String | Function]</a>
|
||||
It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
|
||||
It's similar to [`column.classes`](#classes), `headerClasses` is available to have customized class on table header column:
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -190,7 +190,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.
|
||||
|
||||
## <a name='style'>column.style - [Object | Function]</a>
|
||||
It's availabe to have custom style on table column:
|
||||
It's available to have custom style on table column:
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -220,7 +220,7 @@ A new `Object` will be the result of element style.
|
||||
|
||||
|
||||
## <a name='headerStyle'>column.headerStyle - [Object | Function]</a>
|
||||
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
|
||||
{
|
||||
@@ -278,7 +278,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) { ... }
|
||||
@@ -401,7 +401,7 @@ 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
|
||||
{
|
||||
@@ -412,7 +412,7 @@ A new `Object` will be the result of element HTML attributes.
|
||||
```
|
||||
|
||||
## <a name='headerAttrs'>column.headerAttrs - [Object | Function]</a>
|
||||
`headerAttrs` is similiar to [`column.attrs`](#attrs) but it works for header column.
|
||||
`headerAttrs` is similar to [`column.attrs`](#attrs) but it works for header column.
|
||||
```js
|
||||
{
|
||||
// omit...
|
||||
@@ -444,7 +444,7 @@ A new `Object` will be the result of element headerAttrs.
|
||||
|
||||
> Caution:
|
||||
> Same as [column.attrs](#attrs), it has lower priority and will be
|
||||
> overwrited when other props related to HTML attributes were given.
|
||||
> overwritten when other props related to HTML attributes were given.
|
||||
|
||||
### <a name='headerSortingClasses'>headerSortingClasses - [String | Function]</a>
|
||||
|
||||
@@ -467,7 +467,7 @@ const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { .
|
||||
|
||||
### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
|
||||
|
||||
It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
|
||||
It's similar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
|
||||
|
||||
```js
|
||||
const sortingHeaderStyle = {
|
||||
@@ -502,7 +502,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,
|
||||
@@ -574,7 +574,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.
|
||||
|
||||
## <a name='filterValue'>column.filterValue - [Function]</a>
|
||||
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.
|
||||
|
||||
+8
-8
@@ -1,8 +1,8 @@
|
||||
# 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
|
||||
|
||||
@@ -23,11 +23,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';
|
||||
@@ -48,8 +48,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`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnheaderformatter-function).
|
||||
|
||||
* [`BootstrapTable` Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html)
|
||||
* [Column Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html)
|
||||
* [`BootstrapTable` Definition](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html)
|
||||
* [Column Definition](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html)
|
||||
|
||||
## Table Sort
|
||||
|
||||
@@ -65,7 +65,7 @@ Please see [Work with table sort](https://react-bootstrap-table.github.io/react-
|
||||
- [ ] Sort management
|
||||
- [ ] Multi sort
|
||||
|
||||
Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnsort-bool) property on column definitation.
|
||||
Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnsort-bool) property on column definition.
|
||||
|
||||
## Row Selection
|
||||
|
||||
@@ -93,7 +93,7 @@ Please see [available filter configuration](https://react-bootstrap-table.github
|
||||
|
||||
Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.
|
||||
|
||||
Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnfilter-object) property on column definitation and [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#filter-object) prop on `BootstrapTable`.
|
||||
Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnfilter-object) property on column definition and [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#filter-object) prop on `BootstrapTable`.
|
||||
|
||||
## Cell Edit
|
||||
|
||||
|
||||
@@ -102,7 +102,7 @@ const selectRow = {
|
||||
```
|
||||
|
||||
### <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
|
||||
The backgroud color when row is selected
|
||||
The background color when row is selected
|
||||
|
||||
```js
|
||||
const selectRow = {
|
||||
|
||||
Reference in New Issue
Block a user