diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js b/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js new file mode 100644 index 0000000..d0005fd --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js @@ -0,0 +1,86 @@ +import React from 'react'; +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; +import Code from 'components/common/code-block'; +import { productsGenerator } from 'utils/common'; + +const products = productsGenerator(8); + +let nameFilter; +let priceFilter; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name', + filter: textFilter({ + getFilter: (filter) => { + nameFilter = filter; + } + }) +}, { + dataField: 'price', + text: 'Product Price', + filter: textFilter({ + getFilter: (filter) => { + priceFilter = filter; + } + }) +}]; + +const handleClick = () => { + nameFilter(''); + priceFilter(''); +}; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { textFilter } from 'react-bootstrap-table2-filter'; + +let nameFilter; + +const columns = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name', + filter: textFilter({ + getFilter: (filter) => { + // nameFilter was assigned once the component has been mounted. + nameFilter = filter; + } + }) +}, { + dataField: 'price', + text: 'Product Price', + filter: textFilter() +}]; + +const handleClick = () => { + nameFilter(0); +}; + +export default () => ( +
+ + + +
+); +`; + +export default () => ( +
+ + + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 0617922..8f319f5 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -62,6 +62,7 @@ import ProgrammaticallyDateFilter from 'examples/column-filter/programmatically- import ProgrammaticallyMultiSelectFilter from 'examples/column-filter/programmatically-multi-select-filter'; import CustomFilter from 'examples/column-filter/custom-filter'; import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter'; +import ClearAllFilters from 'examples/column-filter/clear-all-filters'; // work on rows import RowStyleTable from 'examples/rows/row-style'; @@ -200,7 +201,8 @@ storiesOf('Column Filter', module) .add('Programmatically Date Filter', () => ) .add('Programmatically Multi Select Filter', () => ) .add('Custom Filter', () => ) - .add('Advance Custom Filter', () => ); + .add('Advance Custom Filter', () => ) + .add('Clear All Filters', () => ); storiesOf('Work on Rows', module) .add('Customize Row Style', () => )