Skip to content

Commit e96916b

Browse files
authored
Various text and code fixes (#1418)
Fixed some typos, reworded some phrases and corrected a couple lines in example code
1 parent ef22dc4 commit e96916b

File tree

1 file changed

+28
-28
lines changed
  • packages/react-bootstrap-table2-editor

1 file changed

+28
-28
lines changed

packages/react-bootstrap-table2-editor/README.md

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# react-bootstrap-table2-editor
22

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.
44

55
**[Live Demo For Cell Edit](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing)**
66

@@ -16,12 +16,12 @@ $ npm install react-bootstrap-table2-editor --save
1616

1717
## How
1818

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 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:
2020

2121
* click
2222
* dbclick
2323

24-
That's look into how we enable the cell edit on tabe:
24+
Here's how to enable cell editing on the table:
2525

2626
```js
2727
import cellEditFactory from 'react-bootstrap-table2-editor';
@@ -36,17 +36,17 @@ import cellEditFactory from 'react-bootstrap-table2-editor';
3636
/>
3737
```
3838

39-
How user save their new editings? We offer two ways:
39+
How does a user save their new edits? We offer two ways:
4040

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))
4343

4444
## 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:
4646

4747
* Row Level ([cellEdit.nonEditableRows](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditnoneditablerows-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)
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)
5050

5151
## Validation
5252

@@ -59,18 +59,18 @@ How user save their new editings? We offer two ways:
5959

6060
### Editor
6161
* 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)
6363

6464
## Rich Editors
65-
`react-bootstrap-table2` have following predefined editor:
65+
`react-bootstrap-table2` has the following predefined editors:
6666

67-
* Text(Default)
67+
* Text (**default**)
6868
* Dropdown
6969
* Date
7070
* Textarea
7171
* Checkbox
7272

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`:
7474

7575
```js
7676
import { Type } from 'react-bootstrap-table2-editor';
@@ -80,19 +80,19 @@ const columns = [
8080
text: 'Done',
8181
editor: {
8282
type: Type.SELECT | Type.TEXTAREA | Type.CHECKBOX | Type.DATE,
83-
... // 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
8484
}
8585
}
8686
]
8787
```
8888

89-
In the following, we go though all the predefined editors:
89+
In the following sections, we go though all the predefined editors:
9090

9191
### 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.
9393

9494
#### 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.
9696

9797
```js
9898
import { Type } from 'react-bootstrap-table2-editor';
@@ -123,12 +123,12 @@ const columns = [
123123
```
124124

125125
#### 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.
127127

128-
There are two case for `getOptions`:
128+
There are two cases for `getOptions`:
129129

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.
132132

133133

134134
```js
@@ -163,7 +163,7 @@ const columns = [
163163
[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.
164164

165165
### 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:
167167

168168
```js
169169
const columns = [
@@ -184,7 +184,7 @@ const columns = [
184184
```
185185

186186
### 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`.
188188

189189
```js
190190
const columns = [
@@ -197,7 +197,7 @@ const columns = [
197197
}];
198198
```
199199
### 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.
201201

202202
```js
203203
const columns = [
@@ -212,7 +212,7 @@ const columns = [
212212
```
213213

214214
## 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:
216216

217217
* `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
218218
* `value`: Current cell value
@@ -221,11 +221,11 @@ If you feel above predefined editors are not satisfied to your requirement, you
221221
* `rowIndex`: Current row index
222222
* `columnIndex`: Current column index
223223

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
225225
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
227227
228-
Following is a short example:
228+
Here is a short example:
229229

230230
```js
231231
class QualityRanger extends React.Component {

0 commit comments

Comments
 (0)