diff --git a/docs/migration.md b/docs/migration.md index 60edbd2..32d137d 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -88,7 +88,7 @@ Please see [available filter configuration](https://react-bootstrap-table.github - [x] Custom Select Filter - [X] Number Filter - [X] Date Filter -- [ ] Array Filter +- [X] Array Filter - [X] Programmatically Filter Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly. diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md index 6cf47a0..38c278e 100644 --- a/packages/react-bootstrap-table2-filter/README.md +++ b/packages/react-bootstrap-table2-filter/README.md @@ -18,6 +18,7 @@ You can get all types of filters via import and these filters are a factory func * TextFilter * SelectFilter +* MultiSelectFilter * NumberFilter * DateFilter * CustomFilter @@ -114,6 +115,52 @@ const qualityFilter = selectFilter({ // omit... ``` +## MultiSelect Filter + +A quick example: + +```js +import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter'; + +// omit... +const selectOptions = { + 0: 'good', + 1: 'Bad', + 2: 'unknown' +}; + +const columns = [ + ..., { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptions[cell], + filter: multiSelectFilter({ + options: selectOptions + }) +}]; + + +``` + +Following is an example for custom select filter: + +```js +import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table2-filter'; +// omit... + +const qualityFilter = multiSelectFilter({ + options: selectOptions, + placeholder: 'My Custom PlaceHolder', // custom the input placeholder + className: 'my-custom-text-filter', // custom classname on input + defaultValue: '2', // default filtering value + comparator: Comparator.LIKE, // default is Comparator.EQ + style: { ... }, // your custom styles on input + withoutEmptyOption: true // hide the default select option +}); + +// omit... +``` + ## Number Filter ```js