You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In pagination case, 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-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
62
+
In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort`) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
57
63
58
64
### <aname='loading'>loading - [Bool]</a>
59
65
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
@@ -250,6 +256,7 @@ There's only two arguments will be passed to `onTableChange`: `type` and `newSta
250
256
*`filter`
251
257
*`pagination`
252
258
*`sort`
259
+
*`cellEdit`
253
260
254
261
Following is a shape of `newState`
255
262
@@ -260,6 +267,11 @@ Following is a shape of `newState`
260
267
sortField, // newest sort field
261
268
sortOrder, // newest sort order
262
269
filters, // an object which have current filter status per column
263
-
data // when you enable remote sort, you may need to base on data to sort if data is filtered/searched
270
+
data, // when you enable remote sort, you may need to base on data to sort if data is filtered/searched
271
+
cellEdit: { // You can only see this prop when type is cellEdit
If you want to control the cell updating process by yourself, for example, connect with `Redux` or saving data to backend database, `cellEdit.onUpdate` is a great chance you can work on it.
68
-
69
-
Firsylt, `react-bootstrap-table2` allow `cellEdit.onUpdate` to return a promise:
70
-
71
-
```js
72
-
constcellEdit= {
73
-
// omit...
74
-
onUpdate: (rowId, dataField, newValue) => {
75
-
returnapiCall().then(response=> {
76
-
console.log('update cell to backend successfully');
77
-
// Actually, you dont do any thing here, we will update the new value when resolve your promise
78
-
})
79
-
.catch(err=>thrownewError(err.message));
80
-
}
81
-
};
82
-
```
83
-
84
-
If your promise is resolved successfully, `react-bootstrap-table2` will default help you to update the new cell value.
85
-
If your promise is resolved failure, you can throw an `Error` instance, `react-bootstrap-table2` will show up the error message (Same behavior like [`column.validator`](./columns.md#validator)).
86
-
87
-
In some case, backend will return a new value to client side and you want to apply this new value instead of the value that user input. In this situation, you can return an object which contain a `value` property:
88
-
89
-
```js
90
-
constcellEdit= {
91
-
// omit...
92
-
onUpdate: (rowId, dataField, newValue) => {
93
-
returnapiCall().then(response=> {
94
-
return { value:response.value }; // response.value is from your backend api
95
-
})
96
-
.catch(err=>thrownewError(err.message));
97
-
}
98
-
};
99
-
```
100
-
101
-
If your application integgrate with `Redux`, you may need to dispatch an action in `cellEdit.onUpdate` callback. In this circumstances, you need to return `false` explicity which `react-bootstrap-table2` will stop any operation internally and wait rerender by your application.
102
-
103
-
In a simple redux application, you probably need to handle those props by your application:
104
-
105
-
*[`cellEdit.editing`](#editing): Is cell still on editing or not? This value should always be `true` when saving cell failure.
106
-
*[`cellEdit.errorMessage`](#errorMessage): Error message when save the cell failure.
107
-
*[`cellEdit.onErrorMessageDisappear`](#onErrorMessageDisappear): This callback will be called when error message alert closed automatically.
Please check [this](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/develop/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js) exmaple to learn how use `cellEdit` with a redux application
This only used when you want to control cell saving externally, `cellEdit.editing` will be a flag to tell `react-bootstrap-table2` whether currecnt editing cell is still editing or not. Because, it's possible that some error happen when you saving cell, in this situation, you need to configre this value as `false` to keep the cell as edtiable and show up an error message.
0 commit comments