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
Copy file name to clipboardExpand all lines: packages/react-bootstrap-table2-editor/README.md
+28-28
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# react-bootstrap-table2-editor
2
2
3
-
`react-bootstrap-table2`separate the cell edit code base to [`react-bootstrap-table2-editor`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-editor), so there's a little bit different when you use cell edit than `react-bootstrap-table`. In the following, we are going to show you how to enable the cell edit
3
+
`react-bootstrap-table2`separates the cell editing code base to [`react-bootstrap-table2-editor`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-editor), so it's a little bit different from `react-bootstrap-table` on how you use cell editing. In the following sections, we are going to show you how to enable cell editing.
4
4
5
5
**[Live Demo For Cell Edit](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing)**
We have [two ways](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditmode-string) to trigger a editable cell as editing cell:
19
+
We have [two ways](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditmode-string) to trigger a editable cell as the editing cell:
20
20
21
21
* click
22
22
* dbclick
23
23
24
-
That's look into how we enable the cell edit on tabe:
@@ -36,17 +36,17 @@ import cellEditFactory from 'react-bootstrap-table2-editor';
36
36
/>
37
37
```
38
38
39
-
How user save their new editings? We offer two ways:
39
+
How does a user save their new edits? We offer two ways:
40
40
41
-
* Press ENTER(**default**)
42
-
* Blur from current editing cell(Need to enable the[cellEdit.blurToSave](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditblurtosave-bool))
41
+
* Press ENTER(**default**)
42
+
* Blur from current editing cell (you need to enable [cellEdit.blurToSave](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditblurtosave-bool))
43
43
44
44
## Editable Cell
45
-
`react-bootstrap-table2`support you to configure the cell editable on three level:
45
+
`react-bootstrap-table2`supports you to configure the editable cell on three levels:
* Column Level (Configure[column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value)
49
-
* Cell Level (Configure[column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function)
48
+
* Column Level (configure[column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value)
49
+
* Cell Level (configure[column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function)
50
50
51
51
## Validation
52
52
@@ -59,18 +59,18 @@ How user save their new editings? We offer two ways:
59
59
60
60
### Editor
61
61
* Customize the editor style via [column.editorStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorstyle-object-function)
62
-
* Customize the editor classname via [column.editoClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorclasses-string-function)
62
+
* Customize the editor classname via [column.editorClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorclasses-string-function)
63
63
64
64
## Rich Editors
65
-
`react-bootstrap-table2`have following predefined editor:
65
+
`react-bootstrap-table2`has the following predefined editors:
66
66
67
-
* Text(Default)
67
+
* Text (**default**)
68
68
* Dropdown
69
69
* Date
70
70
* Textarea
71
71
* Checkbox
72
72
73
-
In a nutshell, you just only give a [column.editor](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditor-object) and define the `type`:
73
+
In a nutshell, you just set a [column.editor](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditor-object) and define the `type`:
74
74
75
75
```js
76
76
import { Type } from'react-bootstrap-table2-editor';
...// The rest properties will be rendered into the editor's DOM element
83
+
...// The rest of the properties will be rendered into the editor's DOM element
84
84
}
85
85
}
86
86
]
87
87
```
88
88
89
-
In the following, we go though all the predefined editors:
89
+
In the following sections, we go though all the predefined editors:
90
90
91
91
### Dropdown Editor
92
-
Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either `editor.options` or `editor.getOptions`should be required prop.
92
+
Dropdown editor gives a select menu to choose data from a list. When using the dropdown editor, either `editor.options` or `editor.getOptions`are required prop.
93
93
94
94
#### editor.options
95
-
This is most simple case for assign the dropdown options data directly.
95
+
This is the most simple way to assign the dropdown options data directly.
96
96
97
97
```js
98
98
import { Type } from'react-bootstrap-table2-editor';
@@ -123,12 +123,12 @@ const columns = [
123
123
```
124
124
125
125
#### editor.getOptions
126
-
It is much flexible which accept a function and you can assign the dropdown options dynamically.
126
+
It is more flexible and accepts a function to assign the dropdown options dynamically.
127
127
128
-
There are two case for `getOptions`:
128
+
There are two cases for `getOptions`:
129
129
130
-
**Synchronous*: Just return the options array in`getOptions` callback function
131
-
**Asynchronous*: Call `setOptions` function argument when you get the options from remote.
130
+
**Synchronous*: Just return the options array from`getOptions` callback function
131
+
**Asynchronous*: Call `setOptions` function argument to get the options from remote.
132
132
133
133
134
134
```js
@@ -163,7 +163,7 @@ const columns = [
163
163
[here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example.
164
164
165
165
### Date Editor
166
-
Date editor is use`<input type="date">`, the configuration is very simple:
166
+
Date editor uses`<input type="date">`, the configuration is very simple:
167
167
168
168
```js
169
169
constcolumns= [
@@ -184,7 +184,7 @@ const columns = [
184
184
```
185
185
186
186
### Textarea Editor
187
-
Textarea editor is use `<input type="textarea">`, user can press `ENTER` to change line and in the `react-bootstrap-table2`, user allow to save result via press`SHIFT` + `ENTER`.
187
+
Textarea editor uses `<input type="textarea">`, the user can press `ENTER` to enter a newline and in the `react-bootstrap-table2`, the user can save results pressing`SHIFT` + `ENTER`.
188
188
189
189
```js
190
190
constcolumns= [
@@ -197,7 +197,7 @@ const columns = [
197
197
}];
198
198
```
199
199
### Checkbox Editor
200
-
Checkbox editor allow you to have a pair value choice, the `editor.value` is required value to represent the actual value for check and uncheck.
200
+
Checkbox editor allows you to have a boolean value choice, the `editor.value` is required to represent the actual value for checked and unchecked.
201
201
202
202
```js
203
203
constcolumns= [
@@ -212,7 +212,7 @@ const columns = [
212
212
```
213
213
214
214
## Customize Editor
215
-
If you feel above predefined editors are not satisfied to your requirement, you can certainly custom the editor via [column.editorRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorrenderer-function). It accept a function and pass following arguments when function called:
215
+
If you feel the above predefined editors are not enough for your requirements, you can customize the editor via [column.editorRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorrenderer-function). It accepts a function and passes the following arguments to it:
216
216
217
217
*`editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
218
218
*`value`: Current cell value
@@ -221,11 +221,11 @@ If you feel above predefined editors are not satisfied to your requirement, you
221
221
*`rowIndex`: Current row index
222
222
*`columnIndex`: Current column index
223
223
224
-
> Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor
224
+
> **Note** when you implement a custom React editor component, this component must have a **getValue** function that returns the inserted value
225
225
226
-
> Note when you want to save value, you can call **editorProps.onUpdate** function
226
+
> **Note** when you want to save the value, you can call the**editorProps.onUpdate** function
0 commit comments