Skip to content

Commit 3c6aaac

Browse files
committed
Update row-selection.md documentation
Add `nonSelectableStyle` documentation Add `nonSelectableClasses` documentation
1 parent defcd04 commit 3c6aaac

File tree

1 file changed

+53
-3
lines changed

1 file changed

+53
-3
lines changed

docs/row-selection.md

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
# Row selection
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 prepend a new selection column.
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 prepend a new selection column.
44

55
## Required
66
* [mode (**required**)](#mode)
@@ -11,6 +11,8 @@
1111
* [classes)](#classes)
1212
* [bgColor](#bgColor)
1313
* [nonSelectable)](#nonSelectable)
14+
* [nonSelectableStyle](#nonSelectableStyle)
15+
* [nonSelectableClasses](#nonSelectableClasses)
1416
* [clickToSelect)](#clickToSelect)
1517
* [clickToExpand)](#clickToExpand)
1618
* [clickToEdit](#clickToEdit)
@@ -139,6 +141,54 @@ const selectRow = {
139141
};
140142
```
141143

144+
### <a name='nonSelectableStyle'>selectRow.nonSelectableStyle - [Object | Function]</a>
145+
This prop allow you to customize the non selectable rows. `selectRow.nonSelectableStyle` accepts an style object
146+
and a callback function for more flexible customization.
147+
148+
### Style Object
149+
150+
```js
151+
const selectRow = {
152+
mode: 'checkbox',
153+
nonSelectable: [1, 3 ,5],
154+
nonSelectableStyle: { backgroundColor: 'gray' }
155+
};
156+
```
157+
158+
### Callback Function
159+
160+
```js
161+
const selectRow = {
162+
mode: 'checkbox',
163+
nonSelectable: [1, 3 ,5],
164+
nonSelectableStyle: (row, rowIndex) => { return ...; }
165+
};
166+
```
167+
168+
### <a name='nonSelectableClasses'>selectRow.nonSelectableClasses - [String | Function]</a>
169+
This prop allow you to set a custom class for the non selectable rows, or use a callback function for more
170+
flexible customization
171+
172+
### String
173+
174+
```js
175+
const selectRow = {
176+
mode: 'checkbox',
177+
nonSelectable: [1, 3 ,5],
178+
nonSelectableClasses: 'my-class'
179+
};
180+
```
181+
182+
### Callback Function
183+
184+
```js
185+
const selectRow = {
186+
mode: 'checkbox',
187+
nonSelectable: [1, 3 ,5],
188+
nonSelectableClasses: (row, rowIndex) => { return ...; }
189+
};
190+
```
191+
142192
### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
143193
Allow user to select row by clicking on the row.
144194

@@ -149,7 +199,7 @@ const selectRow = {
149199
};
150200
```
151201

152-
> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
202+
> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
153203
> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
154204
155205
### <a name='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
@@ -307,7 +357,7 @@ const selectRow = {
307357
mode: 'checkbox',
308358
onSelectAll: (isSelect, rows, e) => {
309359
if (isSelect && SOME_CONDITION) {
310-
return [1, 3, 4]; // finally, key 1, 3, 4 will being selected
360+
return [1, 3, 4]; // finally, key 1, 3, 4 will being selected
311361
}
312362
}
313363
};

0 commit comments

Comments
 (0)