88* [ columns (** required** )] ( #columns )
99
1010#### Optional
11+ * [ remote] ( #remote )
1112* [ caption] ( #caption )
1213* [ striped] ( #striped )
1314* [ bordered] ( #bordered )
2021* [ rowEvents] ( #rowEvents )
2122* [ defaultSorted] ( #defaultSorted )
2223* [ pagination] ( #pagination )
24+ * [ onTableChange] ( #onTableChange )
2325
2426### <a name =' keyField ' >keyField(** required** ) - [ String] </a >
2527Tells ` react-bootstrap-table2 ` which column is unique.
@@ -30,6 +32,20 @@ Provides data for your table. It accepts a single Array object.
3032### <a name =' columns ' >columns(** required** ) - [ Object] </a >
3133Accepts a single Array object, please see [ columns definition] ( ./columns.md ) for more detail.
3234
35+ ### <a name =' remote ' >remote - [ Bool | Object] </a >
36+ Default is ` false ` , if enable` remote ` , you are suppose to handle all the table change events, like: pagination, insert, filtering etc.
37+ This is a chance that you can connect to your remote server or database to manipulate your data.
38+ For flexibility reason, you can control what functionality should be handled on remote via a object return:
39+
40+ ``` js
41+ remote= { { pagination: true } }
42+ ```
43+
44+ In above case, only pagination will be handled on remote.
45+
46+ > Note: when remote is enable, you are suppose to give [ ` onTableChange ` ] ( #onTableChange ) prop on ` BootstrapTable `
47+ > It's the only way to communicate to your remote server and update table states.
48+
3349### <a name =' caption ' >caption - [ String | Node] </a >
3450Same as HTML [ caption tag] ( https://www.w3schools.com/TAgs/tag_caption.asp ) , you can set it as String or a React JSX.
3551
@@ -148,3 +164,22 @@ paginator({
148164 hidePageListOnlyOnePage: true // hide pagination bar when only one page, default is false
149165})
150166```
167+
168+ ### <a name =' onTableChange ' >onTableChange - [ Function] </a >
169+ This callback function will be called when [ ` remote ` ] ( #remote ) enabled only.
170+
171+ ``` js
172+ const onTableChange = (newState ) => {
173+ // handle any data change here
174+ }
175+ < BootstrapTable data= { data } columns= { columns } onTableChange= { onTableChange } / >
176+ ```
177+
178+ There's only one argument will be passed to ` onTableChange ` , ` newState ` :
179+
180+ ``` js
181+ {
182+ page, // newest page
183+ sizePerPage // newest sizePerPage
184+ }
185+ ```
0 commit comments