Publish

- react-bootstrap-table2-example@1.0.34
 - react-bootstrap-table-next@3.3.1

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 = {
 };
 ```
 
+### <a name='nonSelectableStyle'>selectRow.nonSelectableStyle - [Object | Function]</a>
+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 ...; }
+};
+```
+
+### <a name='nonSelectableClasses'>selectRow.nonSelectableClasses - [String | Function]</a>
+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 ...; }
+};
+```
+
 ### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
 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)
 
 ### <a name='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
@@ -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
     }
   }
 };

package.json

@@ -53,7 +53,7 @@
     "enzyme": "3.4.0",
     "enzyme-adapter-react-16.3": "1.0.0",
     "enzyme-to-json": "3.3.4",
-    "eslint": "4.18.2",
+    "eslint": "4.5.0",
     "eslint-config-airbnb": "15.1.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-import": "2.7.0",

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'
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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' }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "",
   "main": "index.js",
   "private": true,

packages/react-bootstrap-table2-example/stories/index.js

@@ -152,6 +152,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';
@@ -410,6 +412,8 @@ storiesOf('Row Selection', module)
   .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
+  .add('Not Selectabled Rows Style', () => <NonSelectableRowsStyleTable />)
+  .add('Not Selectabled Rows Class', () => <NonSelectableRowsClassTable />)
   .add('Selection Hooks', () => <SelectionHooks />)
   .add('Hide Selection Column', () => <HideSelectionColumnTable />)
   .add('Custom Selection Column Style', () => <SelectionColumnStyleTable />)

packages/react-bootstrap-table2-filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "description": "Next generation of react-bootstrap-table",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -182,6 +182,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,

packages/react-bootstrap-table2/src/filters.js

@@ -21,6 +21,7 @@ const Filters = (props) => {
   columns.forEach((column, i) => {
     filterColumns.push(<FiltersCell
       index={ i }
+      key={ column.dataField }
       column={ column }
       currFilters={ currFilters }
       onExternalFilter={ onExternalFilter }

packages/react-bootstrap-table2/src/row-expand/expand-cell.js

@@ -44,7 +44,7 @@ export default class ExpandCell extends Component {
     if (tabIndex !== -1) attrs.tabIndex = tabIndex;
 
     return (
-      <td onClick={ this.handleClick } { ...attrs }>
+      <td className="expand-cell" onClick={ this.handleClick } { ...attrs }>
         {
           expandColumnRenderer ? expandColumnRenderer({
             expandable,

packages/react-bootstrap-table2/src/row-expand/expand-header-cell.js

@@ -28,7 +28,7 @@ export default class ExpansionHeaderCell extends Component {
     };
 
     return (
-      <th data-row-selection { ...attrs }>
+      <th className="expand-cell-header" data-row-selection { ...attrs }>
         {
           expandHeaderColumnRenderer ?
             expandHeaderColumnRenderer({ isAnyExpands }) :

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 (
       <Component
         { ...props }

packages/react-bootstrap-table2/src/row-selection/selection-cell.js

@@ -86,7 +86,7 @@ export default class SelectionCell extends Component {
       <BootstrapContext.Consumer>
         {
           ({ bootstrap4 }) => (
-            <td onClick={ this.handleClick } { ...attrs }>
+            <td className="selection-cell" onClick={ this.handleClick } { ...attrs }>
               {
                 selectionRenderer ? selectionRenderer({
                   mode: inputType,

packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js

@@ -112,7 +112,7 @@ export default class SelectionHeaderCell extends Component {
               );
             }
             return (
-              <th data-row-selection { ...attrs }>{ content }</th>
+              <th className="selection-cell-header" data-row-selection { ...attrs }>{ content }</th>
             );
           }
         }

packages/react-bootstrap-table2/test/row-selection/__snapshots__/selection-cell.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`<SelectionCell /> render should render component correctly 1`] = `
 <td
+  className="selection-cell"
   onClick={[Function]}
 >
   <input

yarn.lock

@@ -54,15 +54,10 @@ acorn@^4.0.3, acorn@^4.0.4:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0:
+acorn@^5.0.0, acorn@^5.2.1:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
 
-acorn@^5.5.0:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
-
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
@@ -78,7 +73,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0:
+ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -2538,10 +2533,9 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0, doctrine@^2.1.0:
+doctrine@^2.0.0:
-  version "2.1.0"
+  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
-  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
   dependencies:
     esutils "^2.0.2"
 
@@ -2958,38 +2952,32 @@ eslint-scope@^3.7.1:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-visitor-keys@^1.0.0:
+eslint@4.5.0:
-  version "1.1.0"
+  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.5.0.tgz#bb75d3b8bde97fb5e13efcd539744677feb019c3"
-  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
-
-eslint@4.18.2:
-  version "4.18.2"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.18.2.tgz#0f81267ad1012e7d2051e186a9004cc2267b8d45"
-  integrity sha512-qy4i3wODqKMYfz9LUI8N2qYDkHkoieTbiHpMrYUI/WbjhXJQr7lI4VngixTgaG+yHX+NBCv7nW4hA0ShbvaNKw==
   dependencies:
-    ajv "^5.3.0"
+    ajv "^5.2.0"
     babel-code-frame "^6.22.0"
     chalk "^2.1.0"
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
-    debug "^3.1.0"
+    debug "^2.6.8"
-    doctrine "^2.1.0"
+    doctrine "^2.0.0"
     eslint-scope "^3.7.1"
-    eslint-visitor-keys "^1.0.0"
+    espree "^3.5.0"
-    espree "^3.5.2"
     esquery "^1.0.0"
+    estraverse "^4.2.0"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
     functional-red-black-tree "^1.0.1"
     glob "^7.1.2"
-    globals "^11.0.1"
+    globals "^9.17.0"
     ignore "^3.3.3"
     imurmurhash "^0.1.4"
     inquirer "^3.0.6"
     is-resolvable "^1.0.0"
     js-yaml "^3.9.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
+    json-stable-stringify "^1.0.1"
     levn "^0.3.0"
     lodash "^4.17.4"
     minimatch "^3.0.2"
@@ -2997,21 +2985,20 @@ eslint@4.18.2:
     natural-compare "^1.4.0"
     optionator "^0.8.2"
     path-is-inside "^1.0.2"
-    pluralize "^7.0.0"
+    pluralize "^4.0.0"
     progress "^2.0.0"
     require-uncached "^1.0.3"
     semver "^5.3.0"
     strip-ansi "^4.0.0"
     strip-json-comments "~2.0.1"
-    table "4.0.2"
+    table "^4.0.1"
     text-table "~0.2.0"
 
-espree@^3.5.2:
+espree@^3.5.0:
-  version "3.5.4"
+  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
-  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
   dependencies:
-    acorn "^5.5.0"
+    acorn "^5.2.1"
     acorn-jsx "^3.0.0"
 
 esprima@^2.6.0:
@@ -3724,12 +3711,7 @@ global-prefix@^1.0.1:
     is-windows "^1.0.1"
     which "^1.2.14"
 
-globals@^11.0.1:
+globals@^9.17.0, globals@^9.18.0:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
-  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
-
-globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -5043,11 +5025,6 @@ json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
 
-json-stable-stringify-without-jsonify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
-  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
-
 json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
@@ -6483,10 +6460,9 @@ plugin-error@0.1.2, plugin-error@^0.1.2:
     arr-union "^2.0.1"
     extend-shallow "^1.1.2"
 
-pluralize@^7.0.0:
+pluralize@^4.0.0:
-  version "7.0.0"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
-  integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
 
 pn@^1.0.0:
   version "1.1.0"
@@ -7536,7 +7512,11 @@ semver-greatest-satisfied-range@^1.0.0:
   dependencies:
     sver-compat "^1.5.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1:
+"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.1.0, semver@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
+semver@^5.4.1:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
@@ -8063,10 +8043,9 @@ symbol-tree@^3.2.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
 
-table@4.0.2:
+table@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
-  integrity sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==
   dependencies:
     ajv "^5.2.3"
     ajv-keywords "^2.1.0"