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 (