Publish

- react-bootstrap-table-next@1.4.4

README.md

@@ -1,43 +1,56 @@
 # react-bootstrap-table2
+
 [![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)  
-Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
+Rebuilt of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
-> `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to some guys already used it   
+> Note that `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to the name being already taken.
 
-`react-bootstrap-table2` separate some functionalities from core modules to other modules like following:
+`react-bootstrap-table2` separates some functionalities from its core modules to other modules as listed in the following:
 
-* [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
-* [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
-* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
-* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
-* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
-* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
+- [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+- [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+- [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+- [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+- [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+- [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
 
-This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernel module(SRP).
+Not only does this reduce the bundle size of your apps but also helps us have a cleaner design to avoid handling too much logic in the kernel module(SRP).
 
 ## Migration
-If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./docs/migration.md).
+
+If you are coming from the legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please check out the [migration guide](./docs/migration.md).
 
 ## Usage
+
 See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
 
 ## Online Demo
+
 See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
 
 ## Roadmap
+
 See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
 
 ## Development
-Please check [development guide](./docs/development.md).
 
-## How should I run storybook example in my local?
+Please check the [development guide](./docs/development.md).
+
+## Running storybook example on your local machine
 
 ```sh
+# Clone the repo
 $ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
+
+# change dir to the cloned repo
 $ cd react-bootstrap-table2
+
+# Install all dependencies with yarn
 $ yarn install
+
+# Start the stroybook server, then go to localhost:6006
 $ yarn storybook
-$ Go to localhost:6006
+
 ```
 
 **Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**

docs/README.md

@@ -27,6 +27,7 @@
 * [rowStyle](#rowStyle)
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
+* [hiddenRows](#hiddenRows)
 * [defaultSorted](#defaultSorted)
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
@@ -181,6 +182,14 @@ const rowEvents = {
 <BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />
 ```
 
+### <a name='hiddenRows'>hiddenRows - [Array]</a>
+Hide rows, this props accept an array of row keys:
+
+```js
+const hiddenRows = [1, 4];
+<BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
+```
+
 ### <a name='defaultSorted'>defaultSorted - [Array]</a>
 `defaultSorted` accept an object array which allow you to define the default sort columns when first render.
 

docs/row-expand.md

@@ -92,13 +92,16 @@ const expandRow = {
 ```
 
 ### <a name='expandColumnRenderer'>expandRow.expandColumnRenderer - [Function]</a>
-Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain one property  `expanded` which indicate if current row is expanded
+Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain these properties:
+* `expanded`: If current row is expanded or not
+* `rowKey`: Current row key
+* `expandable`: If currnet row is expandable or not 
 
 
 ```js
 const expandRow = {
   renderer: (row) => ...
-  expandColumnRenderer: ({ expanded }) => (
+  expandColumnRenderer: ({ expanded, rowKey, expandable }) => (
     // ....
   )
 };

docs/row-selection.md

@@ -211,18 +211,44 @@ const selectRow = {
 };
 ```
 
+> If you want to reject current select action, just return `false`:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelect: (row, isSelect, rowIndex, e) => {
+    if (SOME_CONDITION) {
+      return false;
+    }
+  }
+};
+```
+
 ### <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
 This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelectAll: (isSelect, results, e) => {
+  onSelectAll: (isSelect, rows, e) => {
     // ...
   }
 };
 ```
 
+> If you want to control the final selection result, just return a row key array:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelectAll: (isSelect, rows, e) => {
+    if (isSelect && SOME_CONDITION) {
+      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
+    }
+  }
+};
+```
+
 ### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {

packages/react-bootstrap-table2-editor/src/editor-indicator.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 const EditorIndicator = ({ invalidMessage }) =>
   (
-    <div className="alert alert-danger fade in">
+    <div className="alert alert-danger in" role="alert">
       <strong>{ invalidMessage }</strong>
     </div>
   );

packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js

@@ -103,7 +103,7 @@ const columns = [{
 }, {
   dataField: 'quality',
   text: 'Product Quality',
-  editorRenderer: (editorProps, value, row, rowIndex, columnIndex) => (
+  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
     <QualityRanger { ...editorProps } value={ value } />
   )
 }];

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js

@@ -0,0 +1,70 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h3><code>selectFilter.options</code> accept an Array and we keep that order when rendering the options</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/columns/column-format-table.js

@@ -2,9 +2,9 @@ import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
+import { productsGenerator, withOnSale } from 'utils/common';
 
-const products = productsGenerator();
+const products = withOnSale(productsGenerator());
 
 function priceFormatter(cell, row) {
   if (row.onSale) {

packages/react-bootstrap-table2-example/examples/row-expand/custom-expand-column.js

@@ -1,4 +1,5 @@
 /* eslint react/prop-types: 0 */
+/* eslint no-unused-vars: 0 */
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
@@ -33,7 +34,7 @@ const expandRow = {
     }
     return <b>+</b>;
   },
-  expandColumnRenderer: ({ expanded }) => {
+  expandColumnRenderer: ({ expanded, rowKey, expandable }) => {
     if (expanded) {
       return (
         <b>-</b>

packages/react-bootstrap-table2-example/examples/row-expand/expand-by-column-only.js

@@ -51,7 +51,8 @@ const expandRow = {
       <p>expandRow.renderer callback will pass the origin row object to you</p>
     </div>
   ),
-  showExpandColumn: true
+  showExpandColumn: true,
+  expandByColumnOnly: true
 };
 
 <BootstrapTable

packages/react-bootstrap-table2-example/examples/row-expand/non-expandable-rows.js

@@ -25,6 +25,7 @@ const expandRow = {
       <p>expandRow.renderer callback will pass the origin row object to you</p>
     </div>
   ),
+  showExpandColumn: true,
   nonExpandable: [1, 3]
 };
 
@@ -50,6 +51,7 @@ const expandRow = {
       <p>expandRow.renderer callback will pass the origin row object to you</p>
     </div>
   ),
+  showExpandColumn: true,
   nonExpandable: [1, 3]
 };
 

packages/react-bootstrap-table2-example/examples/row-selection/selection-advance-management.js

@@ -0,0 +1,88 @@
+/* eslint no-alert: 0 */
+/* eslint consistent-return: 0 */
+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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class AdvSelectionManagment extends React.Component {
+  handleOnSelect = (row, isSelect) => {
+    if (isSelect && row.id < 3) {
+      alert('Oops, You can not select Product ID which less than 3');
+      return false; // return false to deny current select action
+    }
+    return true; // return true or dont return to approve current select action
+  }
+
+  handleOnSelectAll = (isSelect, rows) => {
+    if (isSelect) {
+      return rows.filter(r => r.id >= 3).map(r => r.id);
+    }
+  }
+
+  render() {
+    const selectRow = {
+      mode: 'checkbox',
+      clickToSelect: true,
+      onSelect: this.handleOnSelect,
+      onSelectAll: this.handleOnSelectAll
+    };
+    return (
+      <div>
+        <h3>You can not select Product ID less than 3</h3>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class AdvSelectionManagment extends React.Component {
+  handleOnSelect = (row, isSelect) => {
+    if (isSelect && row.id < 3) {
+      alert('Oops, You can not select Product ID which less than 3');
+      return false; // return false to deny current select action
+    }
+    return true; // return true or dont return to approve current select action
+  }
+
+  handleOnSelectAll = (isSelect, rows) => {
+    if (isSelect) {
+      return rows.filter(r => r.id >= 3).map(r => r.id);
+    }
+  }
+
+  render() {
+    const selectRow = {
+      mode: 'checkbox',
+      clickToSelect: true,
+      onSelect: this.handleOnSelect,
+      onSelectAll: this.handleOnSelectAll
+    };
+    return (
+      <div>
+        <h3>You can not select Product ID less than 3</h3>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/rows/row-hidden.js

@@ -0,0 +1,57 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-console: 0 */
+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 rowEvents = {
+  onClick: (e, row, rowIndex) => {
+    console.log(`clicked on row with index: ${rowIndex}`);
+  },
+  onMouseEnter: (e, row, rowIndex) => {
+    console.log(`enter on row with index: ${rowIndex}`);
+  }
+};
+
+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 hiddenRowKeys = [1, 3];
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } hiddenRows={ hiddenRowKeys } />
+`;
+
+const hiddenRowKeys = [1, 3];
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } hiddenRows={ hiddenRowKeys } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -1,4 +1,5 @@
 /* eslint no-mixed-operators: 0 */
+/* eslint no-param-reassign: 0 */
 
 /**
  * products generator for stories
@@ -22,6 +23,12 @@ export const productsGenerator = (quantity = 5, callback) => {
   );
 };
 
+export const withOnSale = rows => rows.map((row) => {
+  if (row.id > 2) row.onSale = false;
+  else row.onSale = true;
+  return row;
+});
+
 export const productsQualityGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,

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

@@ -55,6 +55,7 @@ import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 import SelectFilter from 'examples/column-filter/select-filter';
 import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
 import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
+import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order';
 import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
 import MultiSelectFilter from 'examples/column-filter/multi-select-filter';
 import MultiSelectFilterDefaultValue from 'examples/column-filter/multi-select-filter-default-value';
@@ -78,6 +79,7 @@ import ClearAllFilters from 'examples/column-filter/clear-all-filters';
 import RowStyleTable from 'examples/rows/row-style';
 import RowClassTable from 'examples/rows/row-class';
 import RowEventTable from 'examples/rows/row-event';
+import RowHiddenTable from 'examples/rows/row-hidden';
 
 // table sort
 import EnableSortTable from 'examples/sort/enable-sort-table';
@@ -118,6 +120,7 @@ import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
 import ClickToSelectTable from 'examples/row-selection/click-to-select';
 import DefaultSelectTable from 'examples/row-selection/default-select';
 import SelectionManagement from 'examples/row-selection/selection-management';
+import AdvanceSelectionManagement from 'examples/row-selection/selection-advance-management';
 import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
 import SelectionWithExpansionTable from 'examples/row-selection/selection-with-expansion';
 import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
@@ -262,12 +265,14 @@ storiesOf('Column Filter', module)
   .add('Programmatically Multi Select Filter', () => <ProgrammaticallyMultiSelectFilter />)
   .add('Custom Filter', () => <CustomFilter />)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
+  .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
   .add('Clear All Filters', () => <ClearAllFilters />);
 
 storiesOf('Work on Rows', module)
   .addDecorator(bootstrapStyle())
   .add('Customize Row Style', () => <RowStyleTable />)
   .add('Customize Row Class', () => <RowClassTable />)
+  .add('Hide Rows', () => <RowHiddenTable />)
   .add('Row Event', () => <RowEventTable />);
 
 storiesOf('Sort Table', module)
@@ -312,6 +317,7 @@ storiesOf('Row Selection', module)
   .add('Click to Select', () => <ClickToSelectTable />)
   .add('Default Select', () => <DefaultSelectTable />)
   .add('Selection Management', () => <SelectionManagement />)
+  .add('Advance Selection Management', () => <AdvanceSelectionManagement />)
   .add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
   .add('Row Select and Expand', () => <SelectionWithExpansionTable />)
   .add('Selection without Data', () => <SelectionNoDataTable />)

packages/react-bootstrap-table2-filter/README.md

@@ -115,6 +115,27 @@ const qualityFilter = selectFilter({
 // omit...
 ```
 
+> Note, the selectOptions can be an array also: 
+
+```js
+const selectOptions = [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+```
+
+The benifit is `react-bootstrap-table2` will render the select options by the order of array.
+
 ## MultiSelect Filter
 
 A quick example: 

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

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

packages/react-bootstrap-table2-filter/src/components/select.js

@@ -7,6 +7,17 @@ import { LIKE, EQ } from '../comparison';
 import { FILTER_TYPE } from '../const';
 
 function optionsEquals(currOpts, prevOpts) {
+  if (Array.isArray(currOpts)) {
+    for (let i = 0; i < currOpts.length; i += 1) {
+      if (
+        currOpts[i].value !== prevOpts[i].value ||
+        currOpts[i].label !== prevOpts[i].label
+      ) {
+        return false;
+      }
+    }
+    return currOpts.length === prevOpts.length;
+  }
   const keys = Object.keys(currOpts);
   for (let i = 0; i < keys.length; i += 1) {
     if (currOpts[keys[i]] !== prevOpts[keys[i]]) {
@@ -16,11 +27,21 @@ function optionsEquals(currOpts, prevOpts) {
   return Object.keys(currOpts).length === Object.keys(prevOpts).length;
 }
 
+function getOptionValue(options, key) {
+  if (Array.isArray(options)) {
+    const result = options
+      .filter(({ label }) => label === key)
+      .map(({ value }) => value);
+    return result[0];
+  }
+  return options[key];
+}
+
 class SelectFilter extends Component {
   constructor(props) {
     super(props);
     this.filter = this.filter.bind(this);
-    const isSelected = props.options[props.defaultValue] !== undefined;
+    const isSelected = getOptionValue(props.options, props.defaultValue) !== undefined;
     this.state = { isSelected };
   }
 
@@ -66,9 +87,14 @@ class SelectFilter extends Component {
         <option key="-1" value="">{ placeholder || `Select ${column.text}...` }</option>
       ));
     }
-    Object.keys(options).forEach(key =>
-      optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
-    );
+    if (Array.isArray(options)) {
+      options.forEach(({ value, label }) =>
+        optionTags.push(<option key={ value } value={ value }>{ label }</option>));
+    } else {
+      Object.keys(options).forEach(key =>
+        optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
+      );
+    }
     return optionTags;
   }
 
@@ -128,7 +154,7 @@ class SelectFilter extends Component {
 SelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
-  options: PropTypes.object.isRequired,
+  options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
   style: PropTypes.object,

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "it's the pagination addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-paginator/src/pagination-total.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const PaginationTotal = props => (
   <span className="react-bootstrap-table-pagination-total">
-    &nbsp;Showing rows { props.from } to&nbsp;{ props.to + 1 } of&nbsp;{ props.dataSize }
+    &nbsp;Showing rows { props.from } to&nbsp;{ props.to } of&nbsp;{ props.dataSize }
   </span>
 );
 

packages/react-bootstrap-table2/package.json

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

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

@@ -21,7 +21,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
   // Exposed APIs
   getData() {
-    return this.props.data;
+    return this.visibleRows();
   }
 
   render() {
@@ -39,12 +39,12 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
   renderTable() {
     const {
-      data,
       columns,
       keyField,
       tabIndexCell,
       id,
       classes,
+      bootstrap4,
       striped,
       hover,
       bordered,
@@ -66,7 +66,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       'table-striped': striped,
       'table-hover': hover,
       'table-bordered': bordered,
-      'table-condensed': condensed
+      [(bootstrap4 ? 'table-sm' : 'table-condensed')]: condensed
     }, classes);
 
     const tableCaption = (caption && <Caption>{ caption }</Caption>);
@@ -87,7 +87,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             expandRow={ expandRow }
           />
           <Body
-            data={ data }
+            data={ this.getData() }
             keyField={ keyField }
             tabIndexCell={ tabIndexCell }
             columns={ columns }

packages/react-bootstrap-table2/src/contexts/row-expand-context.js

@@ -23,7 +23,10 @@ class RowExpandProvider extends React.Component {
   }
 
   handleRowExpand = (rowKey, expanded, rowIndex, e) => {
-    const { data, keyField, expandRow: { onExpand, onlyOneExpanding } } = this.props;
+    const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
+    if (nonExpandable && nonExpandable.includes(rowKey)) {
+      return;
+    }
 
     let currExpanded = [...this.state.expanded];
 
@@ -73,6 +76,7 @@ class RowExpandProvider extends React.Component {
       <RowExpandContext.Provider
         value={ {
           ...this.props.expandRow,
+          nonExpandable: this.props.expandRow.nonExpandable,
           expanded: this.state.expanded,
           isAnyExpands: dataOperator.isAnyExpands(data, keyField, this.state.expanded),
           onRowExpand: this.handleRowExpand,

packages/react-bootstrap-table2/src/contexts/selection-context.js

@@ -43,20 +43,24 @@ class SelectionProvider extends React.Component {
 
     let currSelected = [...this.state.selected];
 
-    if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
-      currSelected = [rowKey];
-    } else if (checked) { // when select mode is checkbox
-      currSelected.push(rowKey);
-    } else {
-      currSelected = currSelected.filter(value => value !== rowKey);
-    }
-
+    let result = true;
     if (onSelect) {
       const row = dataOperator.getRowByRowId(data, keyField, rowKey);
-      onSelect(row, checked, rowIndex, e);
+      result = onSelect(row, checked, rowIndex, e);
     }
 
-    this.setState(() => ({ selected: currSelected }));
+    this.setState(() => {
+      if (result === true || result === undefined) {
+        if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
+          currSelected = [rowKey];
+        } else if (checked) { // when select mode is checkbox
+          currSelected.push(rowKey);
+        } else {
+          currSelected = currSelected.filter(value => value !== rowKey);
+        }
+      }
+      return { selected: currSelected };
+    });
   }
 
   handleAllRowsSelect = (e, isUnSelect) => {
@@ -78,8 +82,9 @@ class SelectionProvider extends React.Component {
       currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
     }
 
+    let result;
     if (onSelectAll) {
-      onSelectAll(
+      result = onSelectAll(
         !isUnSelect,
         dataOperator.getSelectedRows(
           data,
@@ -88,8 +93,10 @@ class SelectionProvider extends React.Component {
         ),
         e
       );
+      if (Array.isArray(result)) {
+        currSelected = result;
+      }
     }
-
     this.setState(() => ({ selected: currSelected }));
   }
 

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

@@ -18,8 +18,7 @@ const Header = (props) => {
     sortOrder,
     selectRow,
     onExternalFilter,
-    expandRow,
-    bootstrap4
+    expandRow
   } = props;
 
   let SelectionHeaderCellComp = () => null;
@@ -50,7 +49,6 @@ const Header = (props) => {
               return (
                 <HeaderCell
                   index={ i }
-                  bootstrap4={ bootstrap4 }
                   key={ column.dataField }
                   column={ column }
                   onSort={ onSort }
@@ -78,8 +76,7 @@ Header.propTypes = {
   selectRow: PropTypes.object,
   onExternalFilter: PropTypes.func,
   className: PropTypes.string,
-  expandRow: PropTypes.object,
-  bootstrap4: PropTypes.bool
+  expandRow: PropTypes.object
 };
 
 export default Header;

packages/react-bootstrap-table2/src/props-resolver/index.js

@@ -1,3 +1,4 @@
+import _ from '../utils';
 import ColumnResolver from './column-resolver';
 
 export default ExtendBase =>
@@ -15,4 +16,13 @@ export default ExtendBase =>
     isEmpty() {
       return this.props.data.length === 0;
     }
+
+    visibleRows() {
+      const { data, hiddenRows, keyField } = this.props;
+      if (!hiddenRows || hiddenRows.length === 0) return data;
+      return data.filter((row) => {
+        const key = _.get(row, keyField);
+        return !hiddenRows.includes(key);
+      });
+    }
   };

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

@@ -10,6 +10,7 @@ export default class ExpandCell extends Component {
   static propTypes = {
     rowKey: PropTypes.any,
     expanded: PropTypes.bool.isRequired,
+    expandable: PropTypes.bool.isRequired,
     onRowExpand: PropTypes.func.isRequired,
     expandColumnRenderer: PropTypes.func,
     rowIndex: PropTypes.number,
@@ -33,12 +34,12 @@ export default class ExpandCell extends Component {
 
   handleClick(e) {
     const { rowKey, expanded, onRowExpand, rowIndex } = this.props;
-
+    e.stopPropagation();
     onRowExpand(rowKey, !expanded, rowIndex, e);
   }
 
   render() {
-    const { expanded, expandColumnRenderer, tabIndex } = this.props;
+    const { expanded, expandable, expandColumnRenderer, tabIndex, rowKey } = this.props;
     const attrs = {};
     if (tabIndex !== -1) attrs.tabIndex = tabIndex;
 
@@ -46,8 +47,10 @@ export default class ExpandCell extends Component {
       <td onClick={ this.handleClick } { ...attrs }>
         {
           expandColumnRenderer ? expandColumnRenderer({
-            expanded
-          }) : (expanded ? '(-)' : '(+)')
+            expandable,
+            expanded,
+            rowKey
+          }) : (expandable ? (expanded ? '(-)' : '(+)') : '')
         }
       </td>
     );

packages/react-bootstrap-table2/src/row/aggregate-row.js

@@ -31,6 +31,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
     if (
       this.props.selected !== nextProps.selected ||
       this.props.expanded !== nextProps.expanded ||
+      this.props.expandable !== nextProps.expandable ||
       this.props.selectable !== nextProps.selectable ||
       this.shouldUpdatedBySelfProps(nextProps)
     ) {
@@ -54,6 +55,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
       selectRow,
       expandRow,
       expanded,
+      expandable,
       selected,
       selectable,
       visibleColumnSize,
@@ -84,6 +86,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
               rowKey={ key }
               rowIndex={ rowIndex }
               expanded={ expanded }
+              expandable={ expandable }
               tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
             />
           ) : null

packages/react-bootstrap-table2/test/props-resolver/index.test.js

@@ -25,6 +25,51 @@ describe('TableResolver', () => {
   const BootstrapTableMock = extendTo(ExtendBase);
   let wrapper;
 
+  describe('visibleRows', () => {
+    describe('if hiddenRows prop is not existing', () => {
+      beforeEach(() => {
+        const mockElement = React.createElement(BootstrapTableMock, {
+          data, columns, keyField
+        }, null);
+        wrapper = shallow(mockElement);
+      });
+
+      it('should return correct data', () => {
+        expect(wrapper.instance().visibleRows()).toEqual(data);
+      });
+    });
+
+    describe('if hiddenRows prop is an empty array', () => {
+      beforeEach(() => {
+        const mockElement = React.createElement(BootstrapTableMock, {
+          data, columns, keyField, hiddenRows: []
+        }, null);
+        wrapper = shallow(mockElement);
+      });
+
+      it('should return correct data', () => {
+        expect(wrapper.instance().visibleRows()).toEqual(data);
+      });
+    });
+
+    describe('if hiddenRows prop is not an empty array', () => {
+      const hiddenRows = [1];
+
+      beforeEach(() => {
+        const mockElement = React.createElement(BootstrapTableMock, {
+          data, columns, keyField, hiddenRows
+        }, null);
+        wrapper = shallow(mockElement);
+      });
+
+      it('should return correct data', () => {
+        const result = wrapper.instance().visibleRows();
+        expect(result).toHaveLength(data.length - hiddenRows.length);
+        expect(result).toEqual(data.filter(d => !hiddenRows.includes(d.id)));
+      });
+    });
+  });
+
   describe('validateProps', () => {
     describe('if keyField is defined and columns is all visible', () => {
       beforeEach(() => {