fix #891

docs/README.md

@@ -33,6 +33,7 @@
 * [pagination](#pagination)
 * [filter](#filter)
 * [onTableChange](#onTableChange)
+* [onDataSizeChange](#onDataSizeChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
 Tells `react-bootstrap-table2` which column is unique.
@@ -317,4 +318,20 @@ Following is a shape of `newState`
     newValue
   }
 }
+```
+
+### <a name='onDataSizeChange'>onDataSizeChange - [Function]</a>
+This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
+
+* `dataSize`: The new data size
+
+```js
+handleDataChange = ({ dataSize }) => {
+  this.setState({ rowCount: dataSize });
+}
+
+<BootstrapTable
+  onDataSizeChange={ handleDataChange }
+  ....
+/>
 ```

packages/react-bootstrap-table2-example/examples/data/data-change-listener.js

@@ -0,0 +1,151 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Case1 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+class Case2 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+`;
+
+const products1 = productsGenerator(8);
+class WithoutPaginationCase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products1.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>Without Pagination Case</h3>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products1 }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode2 }</Code>
+      </div>
+    );
+  }
+}
+
+const products2 = productsGenerator(88);
+class WithPaginationCase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products2.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>Without Pagination Case</h3>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products2 }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+        />
+        <Code>{ sourceCode1 }</Code>
+      </div>
+    );
+  }
+}
+
+export default () => (
+  <div>
+    <WithoutPaginationCase />
+    <WithPaginationCase />
+  </div>
+);
+

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

@@ -217,6 +217,7 @@ import RemoteCellEdit from 'examples/remote/remote-celledit';
 import RemoteAll from 'examples/remote/remote-all';
 
 // data
+import DataChangeListener from 'examples/data/data-change-listener';
 import LoadDataWithFilter from 'examples/data/load-data-on-the-fly-with-filter';
 import LoadDataWithDefaultFilter from 'examples/data/load-data-on-the-fly-with-default-filter';
 import LoadDataWithSearch from 'examples/data/load-data-on-the-fly-with-search';
@@ -467,6 +468,7 @@ storiesOf('Remote', module)
 
 storiesOf('Data', module)
   .addDecorator(bootstrapStyle())
+  .add('Data Change Listener', () => <DataChangeListener />)
   .add('Load data with Filter', () => <LoadDataWithFilter />)
   .add('Load data with Default Filter', () => <LoadDataWithDefaultFilter />)
   .add('Load data with Search', () => <LoadDataWithSearch />)

packages/react-bootstrap-table2-paginator/src/data-context.js

@@ -46,6 +46,9 @@ class PaginationDataProvider extends Provider {
         this.currPage = newPage;
       }
     }
+    if (nextProps.onDataSizeChange && nextProps.data.length !== this.props.data.length) {
+      nextProps.onDataSizeChange({ dataSize: nextProps.data.length });
+    }
   }
 
   isRemotePagination = () => this.props.isRemotePagination();

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

@@ -18,6 +18,14 @@ class BootstrapTable extends PropsBaseResolver(Component) {
     this.validateProps();
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.onDataSizeChange && !nextProps.pagination) {
+      if (nextProps.data.length !== this.props.data.length) {
+        nextProps.onDataSizeChange({ dataSize: nextProps.data.length });
+      }
+    }
+  }
+
   // Exposed APIs
   getData = () => {
     return this.visibleRows();
@@ -192,6 +200,7 @@ BootstrapTable.propTypes = {
   onSort: PropTypes.func,
   onFilter: PropTypes.func,
   onExternalFilter: PropTypes.func,
+  onDataSizeChange: PropTypes.func,
   // Inject from toolkit
   search: PropTypes.shape({
     searchText: PropTypes.string,

packages/react-bootstrap-table2/src/contexts/index.js

@@ -211,6 +211,7 @@ const withContext = Base =>
           bootstrap4={ this.props.bootstrap4 }
           isRemotePagination={ this.isRemotePagination }
           remoteEmitter={ this.remoteEmitter }
+          onDataSizeChange={ this.props.onDataSizeChange }
         >
           <this.PaginationContext.Consumer>
             {