finish pagination and remote docs

This commit is contained in:
AllenFang
2018-01-12 23:00:31 +08:00
parent 73774fcdbf
commit fb3cabc7e5
4 changed files with 75 additions and 1 deletions
+32
View File
@@ -0,0 +1,32 @@
---
id: basic-pagination
title: Pagination
sidebar_label: Pagination
---
`react-bootstrap-table2` separate the pagination code base to [`react-bootstrap-table2-pagination`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-paginator), so there's a little bit different when you use pagination. In the following, we are going to show you how to enable and configure the a pagination table
**[Live Demo For Pagination](../storybook/index.html?selectedKind=Pagination)**
-----
## Install
```sh
$ npm install react-bootstrap-table2-pagination --save
```
## How
Let's enable a pagination on your table:
```js
import paginator from 'react-bootstrap-table2-paginator';
// omit...
<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginator() } />
```
## Customization
See [pagination props](./pagination-props.html)
+33
View File
@@ -0,0 +1,33 @@
---
id: basic-remote
title: Remote Table
sidebar_label: Work on Remote
---
## What is Remote
By default, `react-bootstrap-table2` always handle the data changes internally, such as sorting, paging, filtering etc. However, you may want to handle those logic or sync up to backend or Redux store so that `remote` can help you on it as well.
-----
## How
Make sure you already see [`remote`](./table-props.html#remote-bool-object) props on `BootstrapTable` firstly. In the beginning, you can assign `true` to enable the remote mode on table but few people doing like that, because it will enable all the functionalities(sort, filter etc) become `remote` mode.
In the most of case, you probably only need some functionalites handled on the remote, so `remote` allow you to pass an object to control it.
## Table/Data Change
It's the key point that you need to know something changed so that you can handle your data or logic externally. In the `remote` mode, you are supposed to give [`onTableChange`](./table-props.html#ontablechange-function) on `BootstrapTable` and it will being called when table have any changes if you enable the `remote` mode.
> All the changes are go though `onTableChange` listener,
> it's only way that table give fully control to you
Please read [`onTableChange`](./table-props.html#ontablechange-function) docs to understand how to leverage it.
## Remote Pagination
Pagination remote is a particular case in `react-bootstrap-table2`. If you enable the pagination remote mode, `react-bootstrap-table2` will not handle **sort** and **filter** internally, instead your application is supposed to handle it in the remote way.
Because, **sort** and **filter** need to work on overall data. In the remote pagination, `react-bootstrap-table2` doesn't know all the data, only have the data on current page. So that's why you need to handle the remote filtering or sorting also.
You can see [this](../storybook/index.html?selectedKind=Remote&selectedStory=Remote%20All) example to see how it work for above case.
A good news is we are consider to easing this limitation through partical sorting/filtering on current page.
+5
View File
@@ -12,6 +12,10 @@
"Work on Column": "Work on Column",
"basic-filter": "Column Filter",
"Column Filter": "Column Filter",
"basic-pagination": "Pagination",
"Pagination": "Pagination",
"basic-remote": "Remote Table",
"Work on Remote": "Work on Remote",
"basic-row-select": "Row Selection",
"Row Selection": "Row Selection",
"basic-sort": "Table Sort",
@@ -30,6 +34,7 @@
"Help": "Help",
"Blog": "Blog",
"Basic Usage": "Basic Usage",
"Remote Table": "Remote Table",
"Table Definitation": "Table Definitation",
"Column Definitation": "Column Definitation",
"Cell Editing Definitation": "Cell Editing Definitation",
+5 -1
View File
@@ -9,7 +9,11 @@
"basic-sort",
"basic-row-select",
"basic-filter",
"basic-celledit"
"basic-celledit",
"basic-pagination"
],
"Remote Table": [
"basic-remote"
]
},
"api": {