Skip to content

Commit d5f7ae5

Browse files
committed
refined docs for remote cell edit
1 parent beafef9 commit d5f7ae5

File tree

2 files changed

+16
-73
lines changed

2 files changed

+16
-73
lines changed

docs/README.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,13 @@ This is a chance that you can connect to your remote server or database to manip
4040
For flexibility reason, you can control what functionality should be handled on remote via a object return:
4141

4242
```js
43-
remote={ { filter: true } }
43+
remote={ {
44+
filter: true,
45+
pagination: true,
46+
filter: true,
47+
sort: true,
48+
cellEdit: true
49+
} }
4450
```
4551

4652
In above case, only column filter will be handled on remote.
@@ -53,7 +59,7 @@ A special case for remote pagination:
5359
remote={ { pagination: true, filter: false, sort: false } }
5460
```
5561

56-
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.
5763

5864
### <a name='loading'>loading - [Bool]</a>
5965
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
250256
* `filter`
251257
* `pagination`
252258
* `sort`
259+
* `cellEdit`
253260

254261
Following is a shape of `newState`
255262

@@ -260,6 +267,11 @@ Following is a shape of `newState`
260267
sortField, // newest sort field
261268
sortOrder, // newest sort order
262269
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
272+
rowId,
273+
dataField,
274+
newValue
275+
}
264276
}
265277
```

docs/cell-edit.md

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
* [timeToCloseMessage](#timeToCloseMessage)
66
* [beforeSaveCell](#beforeSaveCell)
77
* [afterSaveCell](#afterSaveCell)
8-
* [onUpdate](#onUpdate)
9-
* [editing](#editing)
108
* [errorMessage](#errorMessage)
119
* [onErrorMessageDisappear](#onErrorMessageDisappear)
1210

@@ -21,9 +19,7 @@ Following is the shape of `cellEdit` object:
2119
mode: 'click',
2220
blurToSave: true,
2321
timeToCloseMessage: 2500,
24-
editing: false|true,
2522
errorMessage: '',
26-
onUpdate: (rowId, dataField, newValue) => { ... },
2723
beforeSaveCell: (oldValue, newValue, row, column) => { ... },
2824
afterSaveCell: (oldValue, newValue, row, column) => { ... },
2925
onErrorMessageDisappear: () => { ... },
@@ -63,73 +59,8 @@ const cellEdit = {
6359
};
6460
```
6561

66-
### <a name='onUpdate'>cellEdit.onUpdate - [Function]</a>
67-
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-
const cellEdit = {
73-
// omit...
74-
onUpdate: (rowId, dataField, newValue) => {
75-
return apiCall().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 => throw new Error(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-
const cellEdit = {
91-
// omit...
92-
onUpdate: (rowId, dataField, newValue) => {
93-
return apiCall().then(response => {
94-
return { value: response.value }; // response.value is from your backend api
95-
})
96-
.catch(err => throw new Error(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.
108-
* `cellEdit.onUpdate`
109-
110-
```js
111-
const cellEdit = {
112-
editing: this.props.editing,
113-
errorMessage: this.props.errorMessage,
114-
onErrorMessageDisappear: () => {
115-
// cleanErrorMessage is an action creator
116-
this.props.dispatch(cleanErrorMessage());
117-
},
118-
onUpdate: (rowId, dataField, newValue) => {
119-
// updateCell is an action creator
120-
this.props.dispatch(updateCell(rowId, dataField, newValue)));
121-
return false; // Have to return false here
122-
}
123-
};
124-
```
125-
126-
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
127-
128-
### <a name='editing'>cellEdit.editing - [Bool]</a>
129-
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.
130-
13162
### <a name='errorMessage'>cellEdit.errorMessage - [String]</a>
132-
Same as [`cellEdit.editing`](#editing). This prop is not often used. Only used when you keep the error message in your application state.
63+
This prop is not often used. Only used when you keep the error message in your application state and also handle the cell editing on remote mode.
13364

13465
### <a name='onErrorMessageDisappear'>cellEdit.onErrorMessageDisappear - [Function]</a>
13566
This callback function will be called when error message discard.

0 commit comments

Comments
 (0)