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`) 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
+
There is a apecial case for remote pagination, 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-table2` only know the data of current page, but filtering, searching or sort need to work on overall datas.
63
63
64
64
### <aname='loading'>loading - [Bool]</a>
65
65
Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
66
-
When `loading` is `true`, `react-bootstrap-table` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table` will ignore the overlay rendering.
66
+
When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
67
67
68
68
### <aname='overlay'>overlay - [Function]</a>
69
-
`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table-overlay` can be a good option for you:
69
+
`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
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.
70
+
This prop is not often used. Only used when you want to keep the error message in your application state and also handle the cell editing on remote mode.
`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter)
76
+
`text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
77
77
78
78
## <aname='hidden'>column.hidden - [Bool]</a>
79
79
`hidden` allow you to hide column when `true` given.
`headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
91
91
92
-
*`column`: column object itself
93
-
*`colIndex`
94
-
*`components`: it's an object which contain all of other react element, like sort caret or filter etc.
92
+
*`column`: current column object itself
93
+
*`colIndex`: index of current column
94
+
*`components`: an object which contain all of other react element, like sort caret or filter etc.
95
95
96
96
The third argument: `components` have following specified properties:
97
97
```js
@@ -131,7 +131,7 @@ It's availabe to have custom class on table column:
131
131
classes:'id-custom-cell'
132
132
}
133
133
```
134
-
In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take `4` arguments and a `string` is expect to return:
134
+
In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take **4** arguments and a `String` is expected to return::
135
135
136
136
137
137
```js
@@ -148,7 +148,7 @@ In addition, `classes` also accept a callback function which have more power to
148
148
149
149
**Return value**
150
150
151
-
A new `String` will be the result of element class.
151
+
A new `String` will be the result as element class.
It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
@@ -185,7 +185,7 @@ It's availabe to have custom style on table column:
185
185
}
186
186
```
187
187
188
-
In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes `4` arguments and an `Object` is expect to return:
188
+
In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes **4** arguments and an `Object` is expect to return:
189
189
190
190
191
191
```js
@@ -215,7 +215,7 @@ It's availabe to have customized inline-style on table header column:
215
215
}
216
216
```
217
217
218
-
Moreover, it also accept a callback function which takes 2 arguments and an `Object` is expect to return:
218
+
Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
219
219
220
220
```js
221
221
{
@@ -233,7 +233,7 @@ A new `Object` will be the result of element headerStyle.
`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column and take `cell content` as default value. Additionally, you could customize title via a callback. It takes `4` arguments and a `String` is expect to return:
236
+
`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column and take `cell content` as default value. Additionally, you could customize title via a callback. It takes **4** arguments and a `String` is expect to return:
237
237
238
238
239
239
```js
@@ -282,7 +282,7 @@ A new `String` will be the result of element headerTitle.
You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property.
284
284
285
-
Besides, `align` also accept a callback function for dynamically setting text align. It takes `4` arguments and a `String` is expect to return:
285
+
Besides, `align` also accept a callback function for dynamically setting text align. It takes **4** arguments and a `String` is expect to return:
286
286
287
287
```js
288
288
{
@@ -385,14 +385,14 @@ Not only `Object`, `callback function` is also acceptable. It takes `4` argument
385
385
386
386
A new `Object` will be the result of element HTML attributes.
387
387
388
-
#### * Caution
388
+
> Caution:
389
389
390
-
If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited.
390
+
> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited.
391
391
392
392
```js
393
393
{
394
394
// omit...
395
-
title:true, //it will be chosen.
395
+
title:true, //get higher priority
396
396
attrs: { title:'test' }
397
397
}
398
398
```
@@ -409,7 +409,7 @@ If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.
409
409
}
410
410
```
411
411
412
-
Additionally, customize the header attributes by a `2-arguments` callback function:
412
+
Additionally, customize the header attributes by a **2**arguments callback function:
413
413
414
414
```js
415
415
{
@@ -556,4 +556,25 @@ import { textFilter } from 'react-bootstrap-table2-filter';
556
556
}
557
557
```
558
558
559
-
For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
559
+
For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
Copy file name to clipboardExpand all lines: docs/row-selection.md
+18-22
Original file line number
Diff line number
Diff line change
@@ -2,13 +2,10 @@
2
2
# Row selection
3
3
`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first.
4
4
5
-
6
-
## Available properties
7
-
8
-
The following are available properties in `selectRow`:
9
-
10
-
#### Required
5
+
## Required
11
6
*[mode (**required**)](#mode)
7
+
8
+
## Optional
12
9
*[style](#style)
13
10
*[classes)](#classes)
14
11
*[bgColor](#bgColor)
@@ -19,22 +16,21 @@ The following are available properties in `selectRow`:
19
16
*[onSelectAll](#onSelectAll)
20
17
*[hideSelectColumn](#hideSelectColumn)
21
18
22
-
#### Optional
23
-
24
-
## <aname="mode">selectRow.mode - [String]</a>
19
+
### <aname="mode">selectRow.mode - [String]</a>
25
20
26
21
Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `radio` was assigned, there will be a radio button in the selection column; otherwise, the `checkbox` instead.
0 commit comments