diff --git a/docs/row-selection.md b/docs/row-selection.md
index af2d16a5f..dce1f9f07 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -1,6 +1,6 @@
# Row selection
-`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.
+`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.
## Required
* [mode (**required**)](#mode)
@@ -11,6 +11,8 @@
* [classes)](#classes)
* [bgColor](#bgColor)
* [nonSelectable)](#nonSelectable)
+* [nonSelectableStyle](#nonSelectableStyle)
+* [nonSelectableClasses](#nonSelectableClasses)
* [clickToSelect)](#clickToSelect)
* [clickToExpand)](#clickToExpand)
* [clickToEdit](#clickToEdit)
@@ -139,6 +141,54 @@ const selectRow = {
};
```
+### selectRow.nonSelectableStyle - [Object | Function]
+This prop allow you to customize the non selectable rows. `selectRow.nonSelectableStyle` accepts an style object
+and a callback function for more flexible customization.
+
+### Style Object
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5],
+ nonSelectableStyle: { backgroundColor: 'gray' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5],
+ nonSelectableStyle: (row, rowIndex) => { return ...; }
+};
+```
+
+### selectRow.nonSelectableClasses - [String | Function]
+This prop allow you to set a custom class for the non selectable rows, or use a callback function for more
+flexible customization
+
+### String
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5],
+ nonSelectableClasses: 'my-class'
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5],
+ nonSelectableClasses: (row, rowIndex) => { return ...; }
+};
+```
+
### selectRow.clickToSelect - [Bool]
Allow user to select row by clicking on the row.
@@ -149,7 +199,7 @@ const selectRow = {
};
```
-> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
+> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
### selectRow.clickToExpand - [Bool]
@@ -307,7 +357,7 @@ const selectRow = {
mode: 'checkbox',
onSelectAll: (isSelect, rows, e) => {
if (isSelect && SOME_CONDITION) {
- return [1, 3, 4]; // finally, key 1, 3, 4 will being selected
+ return [1, 3, 4]; // finally, key 1, 3, 4 will being selected
}
}
};
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js
new file mode 100644
index 000000000..a1a8df7da
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4],
+ nonSelectableClasses: 'row-index-bigger-than-2101'
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4],
+ nonSelectableClasses: 'row-index-bigger-than-2101'
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js
new file mode 100644
index 000000000..d3fd7f0fd
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4],
+ nonSelectableStyle: { backgroundColor: 'gray' }
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4],
+ nonSelectableStyle: { backgroundColor: 'gray' }
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 5587d0b80..43baae62f 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -151,6 +151,8 @@ import HeaderStyleTable from 'examples/row-selection/header-style';
import HideSelectAllTable from 'examples/row-selection/hide-select-all';
import CustomSelectionTable from 'examples/row-selection/custom-selection';
import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
+import NonSelectableRowsStyleTable from 'examples/row-selection/non-selectable-rows-style';
+import NonSelectableRowsClassTable from 'examples/row-selection/non-selectable-rows-class';
import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
import SelectionHooks from 'examples/row-selection/selection-hooks';
import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
@@ -408,6 +410,8 @@ storiesOf('Row Selection', module)
.add('Custom Selection', () => )
.add('Selection Background Color', () => )
.add('Not Selectabled Rows', () => )
+ .add('Not Selectabled Rows Style', () => )
+ .add('Not Selectabled Rows Class', () => )
.add('Selection Hooks', () => )
.add('Hide Selection Column', () => )
.add('Custom Selection Column Style', () => )
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 338a428fb..21fd65be3 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -166,6 +166,8 @@ BootstrapTable.propTypes = {
style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
nonSelectable: PropTypes.array,
+ nonSelectableStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ nonSelectableClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
hideSelectColumn: PropTypes.bool,
selectionRenderer: PropTypes.func,
diff --git a/packages/react-bootstrap-table2/src/row-selection/row-consumer.js b/packages/react-bootstrap-table2/src/row-selection/row-consumer.js
index a8b14dba2..ff8d6feac 100644
--- a/packages/react-bootstrap-table2/src/row-selection/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-selection/row-consumer.js
@@ -9,6 +9,7 @@ export default (Component) => {
const key = props.value;
const selected = _.contains(selectRow.selected, key);
const selectable = !selectRow.nonSelectable || !_.contains(selectRow.nonSelectable, key);
+ const notSelectable = _.contains(selectRow.nonSelectable, key);
let {
style,
@@ -38,6 +39,22 @@ export default (Component) => {
}
}
+ if (notSelectable) {
+ const notSelectableStyle = _.isFunction(selectRow.nonSelectableStyle)
+ ? selectRow.nonSelectableStyle(props.row, props.rowIndex)
+ : selectRow.nonSelectableStyle;
+
+ const notSelectableClasses = _.isFunction(selectRow.nonSelectableClasses)
+ ? selectRow.nonSelectableClasses(props.row, props.rowIndex)
+ : selectRow.nonSelectableClasses;
+
+ style = {
+ ...style,
+ ...notSelectableStyle
+ };
+ className = cs(className, notSelectableClasses) || undefined;
+ }
+
return (