fix #830

packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js

@@ -3,28 +3,70 @@ import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
+import { productsQualityGenerator } from 'utils/common';
 
-const products = productsGenerator(21);
+const products = productsQualityGenerator(21);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
 
 const columns = [{
   dataField: 'id',
-  text: 'Product ID',
-  filter: textFilter({})
+  text: 'Product ID'
 }, {
   dataField: 'name',
   text: 'Product Name',
   filter: textFilter()
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    defaultValue: 0
+  })
 }];
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    defaultValue: 0
+  })
+}];
 
 class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsQualityGenerator(40, 7) });
+  }
+
   render() {
     const options = {
       custom: true,
@@ -39,10 +81,11 @@ class Table extends React.Component {
       firstPageTitle: 'Next page',
       lastPageTitle: 'Last page',
       showTotal: true,
-      totalSize: products.length
+      totalSize: this.state.products.length
     };
     const contentTable = ({ paginationProps, paginationTableProps }) => (
       <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
         <PaginationListStandalone { ...paginationProps } />
         <div>
           <div>
@@ -50,10 +93,9 @@ class Table extends React.Component {
               striped
               hover
               keyField="id"
-              data={ products }
+              data={ this.state.products }
               columns={ columns }
               filter={ filterFactory() }
-              cellEdit={ cellEditFactory() }
               { ...paginationTableProps }
             />
           </div>
@@ -72,7 +114,6 @@ class Table extends React.Component {
         >
           { contentTable }
         </PaginationProvider>
-        <Code>{ sourceCode }</Code>
       </div >
     );
   }
@@ -80,6 +121,12 @@ class Table extends React.Component {
 `;
 
 export default class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsQualityGenerator(40, 7) });
+  }
+
   render() {
     const options = {
       custom: true,
@@ -94,10 +141,11 @@ export default class Table extends React.Component {
       firstPageTitle: 'Next page',
       lastPageTitle: 'Last page',
       showTotal: true,
-      totalSize: products.length
+      totalSize: this.state.products.length
     };
     const contentTable = ({ paginationProps, paginationTableProps }) => (
       <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
         <PaginationListStandalone { ...paginationProps } />
         <div>
           <div>
@@ -105,7 +153,7 @@ export default class Table extends React.Component {
               striped
               hover
               keyField="id"
-              data={ products }
+              data={ this.state.products }
               columns={ columns }
               filter={ filterFactory() }
               { ...paginationTableProps }

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

@@ -29,10 +29,10 @@ export const withOnSale = rows => rows.map((row) => {
   return row;
 });
 
-export const productsQualityGenerator = (quantity = 5) =>
+export const productsQualityGenerator = (quantity = 5, factor = 0) =>
   Array.from({ length: quantity }, (value, index) => ({
-    id: index,
-    name: `Item name ${index}`,
+    id: index + factor,
+    name: `Item name ${index + factor}`,
     quality: index % 3
   }));
 

packages/react-bootstrap-table2-filter/src/context.js

@@ -27,9 +27,8 @@ export default (
       this.onFilter = this.onFilter.bind(this);
       this.doFilter = this.doFilter.bind(this);
       this.onExternalFilter = this.onExternalFilter.bind(this);
-      this.state = {
-        data: props.data
-      };
+      this.data = props.data;
+      this.isEmitDataChange = false;
     }
 
     componentDidMount() {
@@ -39,13 +38,10 @@ export default (
     }
 
     componentWillReceiveProps(nextProps) {
-      let nextData = nextProps.data;
-      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.state.data)) {
-        nextData = this.doFilter(nextProps);
+      // let nextData = nextProps.data;
+      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
+        this.doFilter(nextProps, undefined, this.isEmitDataChange);
       }
-      this.setState({
-        data: nextData
-      });
     }
 
     onFilter(column, filterType, initialize = false) {
@@ -83,9 +79,7 @@ export default (
         if (filter.props.onFilter) {
           result = filter.props.onFilter(filterVal);
         }
-
-        result = this.doFilter(this.props, result);
-        this.setState({ data: result });
+        this.doFilter(this.props, result);
       };
     }
 
@@ -95,21 +89,25 @@ export default (
       };
     }
 
-    doFilter(props, customResult) {
+    doFilter(props, customResult, ignoreEmitDataChange = false) {
       let result = customResult;
 
       const { dataChangeListener, data, columns } = props;
       result = result || filters(data, columns, _)(this.currFilters);
-      if (dataChangeListener) {
+      this.data = result;
+      if (dataChangeListener && !ignoreEmitDataChange) {
+        this.isEmitDataChange = true;
         dataChangeListener.emit('filterChanged', result.length);
+      } else {
+        this.isEmitDataChange = false;
+        this.forceUpdate();
       }
-      return result;
     }
 
     render() {
       return (
         <FilterContext.Provider value={ {
-          data: this.state.data,
+          data: this.data,
           onFilter: this.onFilter,
           onExternalFilter: this.onExternalFilter
         } }

packages/react-bootstrap-table2-filter/test/context.test.js

@@ -283,9 +283,9 @@ describe('FilterContext', () => {
         expect(onFilter).toHaveBeenCalledWith(filterVal);
       });
 
-      it('should set state.data correctly', () => {
+      it('should set data correctly', () => {
         instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
-        expect(instance.state.data).toEqual(mockReturn);
+        expect(instance.data).toEqual(mockReturn);
       });
     });
 

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

@@ -50,11 +50,17 @@ class StateProvider extends React.Component {
 
     // user should align the page when the page is not fit to the data size when remote enable
     if (this.isRemotePagination() || custom) {
+      if (typeof nextProps.pagination.options.page !== 'undefined') {
         this.currPage = nextProps.pagination.options.page;
+      }
+      if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
         this.currSizePerPage = nextProps.pagination.options.sizePerPage;
+      }
+      if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
         this.dataSize = nextProps.pagination.options.totalSize;
       }
     }
+  }
 
   getPaginationProps = () => {
     const { pagination: { options }, bootstrap4 } = this.props;