react-bootstrap-table2-filter
react-bootstrap-table2
separate the filter core code base to react-bootstrap-table2-filter
, so there's a little bit different when you use column filter than react-bootstrap-table
. In the following, we are going to show you how to enable the column filter:
Install
$ npm install react-bootstrap-table2-filter --save
You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:
- TextFilter
- SelectFilter
- MultiSelectFilter
- NumberFilter
- DateFilter
- CustomFilter
- Coming soon!
Add CSS
// es5 ; // es6;
Text Filter
Following is a quick demo for enable the column filter on Product Price column!!
; // omit...const columns = ... dataField: 'price' text: 'Product Price' filter: ; <BootstrapTable keyField='id' data= products columns= columns filter= />
In addition, we preserve all of the filter features and functionality in legacy react-bootstrap-table
, but in different way to do it:
;// omit... const priceFilter = ; // omit...
Select Filter
A quick example:
; // omit...const selectOptions = 0: 'good' 1: 'Bad' 2: 'unknown'; const columns = ... dataField: 'quality' text: 'Product Quailty' selectOptionscell filter: ; <BootstrapTable keyField='id' data= products columns= columns filter= />
Following is an example for custom select filter:
;// omit... const qualityFilter = ; // omit...
Note, the selectOptions can be an array or a function which return an array:
Array as options
const selectOptions = value: 0 label: 'good' value: 1 label: 'Bad' value: 2 label: 'unknown' ;const columns = ... dataField: 'quality' text: 'Product Quailty' selectOptionslabel filter: ;
Function as options
const selectOptions = value: 0 label: 'good' value: 1 label: 'Bad' value: 2 label: 'unknown' ;const columns = ... dataField: 'quality' text: 'Product Quailty' selectOptionslabel filter: ;
The benifit is react-bootstrap-table2
will render the select options by the order of array.
MultiSelect Filter
A quick example:
; // omit...const selectOptions = 0: 'good' 1: 'Bad' 2: 'unknown'; const columns = ... dataField: 'quality' text: 'Product Quailty' selectOptionscell filter: ; <BootstrapTable keyField='id' data= products columns= columns filter= />
Following is an example for custom select filter:
;// omit... const qualityFilter = ; // omit...
Number Filter
; const columns = ... dataField: 'price' text: 'Product Price' filter: ; <BootstrapTable keyField='id' data= products columns= columns filter= />
Numner filter is same as other filter, you can custom the number filter via numberFilter
factory function:
;// omit... const numberFilter = // omit...
Date Filter
; const columns = ... dataField: 'date' text: 'Product date' filter: ; <BootstrapTable keyField='id' data= products columns= columns filter= />
Notes: date filter accept a Javascript Date object in your raw data and you have to use
column.formatter
to make it as your prefer string result
Date filter is same as other filter, you can custom the date filter via dateFilter
factory function:
;// omit... const dateFilter = // omit...
Custom Filter
; const columns = ... dataField: 'date' text: 'Product Name' filter: ...; <BootstrapTable keyField='id' data= products columns= columns filter= />
In custom filter case, you are suppose to finish following two steps:
- Call
customFilter
and pass tocolumn.filter
- Give
column.filterRenderer
as a callback function and return your custom filter element.
column.filterRenderer
This function will pass two argument to you:
onFilter
: call it to trigger filter when you need.column
: Just the column object!
In the end, please remember to return your custom filter element!
customFilter
customFilter
function just same as textFilter
, selectFilter
etc, it is for customization reason. However, in the custom filter case, there's only one props is valid: type
; const customFilter =
type
is a way to ask react-bootstrap-table
to filter you data as number, select, date or normal text.
FILTER_TYPES
Following properties is valid in FILTER_TYPES
:
- TEXT
- SELECT
- NUMBER
- DATE
- MULTISELECT
Position
Default filter is rendered inside the table column header, but you can choose to render them as a row by filterPosition
:
Render in the top of table body
<BootstrapTable keyField='id' data= products columns= columns filter= filterPosition="top"/>
Render in the bottom of table body
<BootstrapTable keyField='id' data= products columns= columns filter= filterPosition="bottom"/>
Configuration
filterFactory
is a factory function for initializing some internal config. Below is available options for filterFactory
:
afterFilter
This hook function will be called with two arguments(new filter result and filter object) when filtering completed.
{ console; console;} <div> <BootstrapTable keyField="id" data= products columns= columns filter= /> </div>;