mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
patch docs for date filter
This commit is contained in:
parent
c3f279fb0c
commit
4da8ba7ecc
@ -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`:
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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...
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user