Implement remote filter

docs/README.md

@@ -40,14 +40,21 @@ This is a chance that you can connect to your remote server or database to manip
 For flexibility reason, you can control what functionality should be handled on remote via a object return:
 
 ```js
-remote={ { pagination: true } }
+remote={ { filter: true } }
 ```
 
-In above case, only pagination will be handled on remote.
+In above case, only column filter will be handled on remote.
 
 > Note: when remote is enable, you are suppose to give [`onTableChange`](#onTableChange) prop on `BootstrapTable`
 > It's the only way to communicate to your remote server and update table states.
 
+A special case for remote pagination:
+```js
+remote={ { pagination: true, filter: false, sort: false } }
+```
+
+In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort` etc) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
+
 ### <a name='loading'>loading - [Bool]</a>
 Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
 When `loading` is `true`, `react-bootstrap-table` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table` will ignore the overlay rendering.
@@ -230,17 +237,25 @@ const columns = [ {
 This callback function will be called when [`remote`](#remote) enabled only.
 
 ```js
-const onTableChange = (newState) => {
+const onTableChange = (type, newState) => {
  // handle any data change here
 }
 <BootstrapTable data={ data } columns={ columns } onTableChange={ onTableChange } />
 ```
 
-There's only one argument will be passed to `onTableChange`, `newState`:
+There's only two arguments will be passed to `onTableChange`: `type` and `newState`:
+
+`type` is tell you what kind of functionality to trigger this table's change: available values at the below:
+
+* `filter`
+* `pagination`
+
+Following is a shape of `newState`
 
 ```js
 {
  page, // newest page
- sizePerPage //newest sizePerPage
+ sizePerPage, //newest sizePerPage
+ filters // an object which have current filter status per column
 }
 ```

packages/react-bootstrap-table2-example/examples/remote/remote-all.js

@@ -0,0 +1,202 @@
+/* eslint guard-for-in: 0 */
+/* eslint no-restricted-syntax: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table2';
+import paginator from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table2';
+import paginator from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+// ...
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+ <div>
+ <BootstrapTable
+ remote={ { pagination: true } }
+ keyField="id"
+ data={ data }
+ columns={ columns }
+ filter={ filterFactory() }
+ pagination={ paginator({ page, sizePerPage, totalSize }) }
+ onTableChange={ onTableChange }
+ />
+ <Code>{ sourceCode }</Code>
+ </div>
+);
+
+RemoteAll.propTypes = {
+ data: PropTypes.array.isRequired,
+ page: PropTypes.number.isRequired,
+ totalSize: PropTypes.number.isRequired,
+ sizePerPage: PropTypes.number.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ data: products.slice(0, 10),
+ totalSize: products.length,
+ sizePerPage: 10
+ };
+ this.handleTableChange = this.handleTableChange.bind(this);
+ }
+
+ handleTableChange = (type, { page, sizePerPage, filters }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ const result = products.filter((row) => {
+ let valid = true;
+ for (const dataField in filters) {
+ const { filterVal, filterType, comparator } = filters[dataField];
+
+ if (filterType === 'TEXT') {
+ if (comparator === Comparator.LIKE) {
+ valid = row[dataField].toString().indexOf(filterVal) > -1;
+ } else {
+ valid = row[dataField] === filterVal;
+ }
+ }
+ if (!valid) break;
+ }
+ return valid;
+ });
+ this.setState(() => ({
+ page,
+ data: result.slice(currentIndex, currentIndex + sizePerPage),
+ totalSize: result.length,
+ sizePerPage
+ }));
+ }, 2000);
+ }
+
+ render() {
+ const { data, sizePerPage, page } = this.state;
+ return (
+ <RemoteAll
+ data={ data }
+ page={ page }
+ sizePerPage={ sizePerPage }
+ totalSize={ this.state.totalSize }
+ onTableChange={ this.handleTableChange }
+ />
+ );
+ }
+}
+`;
+
+const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+ <div>
+ <h3>When <code>remote.pagination</code> is enabled, the filtering,
+ sorting and searching will also change to remote mode automatically</h3>
+ <BootstrapTable
+ remote={ { pagination: true } }
+ keyField="id"
+ data={ data }
+ columns={ columns }
+ filter={ filterFactory() }
+ pagination={ paginator({ page, sizePerPage, totalSize }) }
+ onTableChange={ onTableChange }
+ />
+ <Code>{ sourceCode }</Code>
+ </div>
+);
+
+RemoteAll.propTypes = {
+ data: PropTypes.array.isRequired,
+ page: PropTypes.number.isRequired,
+ totalSize: PropTypes.number.isRequired,
+ sizePerPage: PropTypes.number.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ page: 1,
+ data: products.slice(0, 10),
+ totalSize: products.length,
+ sizePerPage: 10
+ };
+ this.handleTableChange = this.handleTableChange.bind(this);
+ }
+
+ handleTableChange = (type, { page, sizePerPage, filters }) => {
+ const currentIndex = (page - 1) * sizePerPage;
+ setTimeout(() => {
+ const result = products.filter((row) => {
+ let valid = true;
+ for (const dataField in filters) {
+ const { filterVal, filterType, comparator } = filters[dataField];
+
+ if (filterType === 'TEXT') {
+ if (comparator === Comparator.LIKE) {
+ valid = row[dataField].toString().indexOf(filterVal) > -1;
+ } else {
+ valid = row[dataField] === filterVal;
+ }
+ }
+ if (!valid) break;
+ }
+ return valid;
+ });
+ this.setState(() => ({
+ page,
+ data: result.slice(currentIndex, currentIndex + sizePerPage),
+ totalSize: result.length,
+ sizePerPage
+ }));
+ }, 2000);
+ }
+
+ render() {
+ const { data, sizePerPage, page } = this.state;
+ return (
+ <RemoteAll
+ data={ data }
+ page={ page }
+ sizePerPage={ sizePerPage }
+ totalSize={ this.state.totalSize }
+ onTableChange={ this.handleTableChange }
+ />
+ );
+ }
+}
+
+export default Container;

packages/react-bootstrap-table2-example/examples/remote/remote-filter.js

@@ -0,0 +1,105 @@
+/* eslint guard-for-in: 0 */
+/* eslint no-restricted-syntax: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table2';
+import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(17);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const sourceCode = `\
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+const RemoteFilter = props => (
+ <div>
+ <BootstrapTable
+ remote={ { filter: true } }
+ keyField="id"
+ data={ props.data }
+ columns={ columns }
+ filter={ filterFactory() }
+ onTableChange={ props.onTableChange }
+ />
+ <Code>{ sourceCode }</Code>
+ </div>
+);
+
+RemoteFilter.propTypes = {
+ data: PropTypes.array.isRequired,
+ onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: products
+ };
+ }
+
+ handleTableChange = (type, { filters }) => {
+ setTimeout(() => {
+ const result = products.filter((row) => {
+ let valid = true;
+ for (const dataField in filters) {
+ const { filterVal, filterType, comparator } = filters[dataField];
+
+ if (filterType === 'TEXT') {
+ if (comparator === Comparator.LIKE) {
+ valid = row[dataField].toString().indexOf(filterVal) > -1;
+ } else {
+ valid = row[dataField] === filterVal;
+ }
+ }
+ if (!valid) break;
+ }
+ return valid;
+ });
+ this.setState(() => ({
+ data: result
+ }));
+ }, 2000);
+ }
+
+ render() {
+ return (
+ <RemoteFilter
+ data={ this.state.data }
+ onTableChange={ this.handleTableChange }
+ />
+ );
+ }
+}
+
+export default Container;

packages/react-bootstrap-table2-example/examples/pagination/remote-pagination.js → packages/react-bootstrap-table2-example/examples/remote/remote-pagination.js

@@ -105,7 +105,7 @@ class Container extends React.Component {
  };
  }
 
- handleTableChange = ({ page, sizePerPage }) => {
+ handleTableChange = (type, { page, sizePerPage }) => {
  const currentIndex = (page - 1) * sizePerPage;
  setTimeout(() => {
  this.setState(() => ({