patch docs for date filter

This commit is contained in:
AllenFang 2018-06-03 14:08:29 +08:00
parent c3f279fb0c
commit 4da8ba7ecc
3 changed files with 45 additions and 3 deletions

View File

@ -648,6 +648,8 @@ Configure `column.filter` will able to setup a column level filter on the header
* Text(`textFilter`)
* Select(`selectFilter`)
* Number(`numberFilter`)
* Date(`dateFilter`)
We have a quick example to show you how to use `column.filter`:

View File

@ -72,7 +72,7 @@ Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](ht
Please see [Work with selection](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-row-select.html).
Please see [available selectRow configurations](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-select-props.html).
No huge change for row selection, but can not custom the selection column currently. Coming soon!!!
No huge change for row selection.
## Column Filter
@ -87,9 +87,9 @@ Please see [available filter configuration](https://react-bootstrap-table.github
- [x] Select Filter
- [x] Custom Select Filter
- [X] Number Filter
- [ ] Date Filter
- [X] Date Filter
- [ ] Array Filter
- [ ] Programmatically Filter
- [X] Programmatically Filter
Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.

View File

@ -19,6 +19,7 @@ You can get all types of filters via import and these filters are a factory func
* TextFilter
* SelectFilter
* NumberFilter
* DateFilter
* **Coming soon!**
## Add CSS
@ -148,5 +149,44 @@ const numberFilter = numberFilter({
defaultValue: { number: 2103, comparator: Comparator.GT } // default value
})
// omit...
```
## Date Filter
```js
import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
const columns = [..., {
dataField: 'date',
text: 'Product date',
filter: dateFilter()
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
```
> **Notes:** date filter accept a Javascript Date object in your raw data.
Date filter is same as other filter, you can custom the number filter via `dateFilter` factory function:
```js
import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
// omit...
const dateFilter = dateFilter({
delay: 600, // how long will trigger filtering after user typing, default is 500 ms
placeholder: 'custom placeholder', // placeholder for date input
withoutEmptyComparatorOption: true, // dont render empty option for comparator
comparators: [Comparator.EQ, Comparator.GT, Comparator.LT], // Custom the comparators
style: { display: 'inline-grid' }, // custom the style on date filter
className: 'custom-dateFilter-class', // custom the class on date filter
comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
comparatorClassName: 'custom-comparator-class', // custom the class on comparator select
dateStyle: { backgroundColor: 'cadetblue', margin: '0px' }, // custom the style on date input
dateClassName: 'custom-date-class', // custom the class on date input
defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT } // default value
})
// omit...
```