Material UI Drawer for filtering local arrays
This project was bootstrapped with nwb
Material UI filter is a filter drawer that lets you filter any Array. You can sort the array and add as many filters as you please.
Just try out the DEMO. You can find the full code of the demo in the 'demo' folder above.
(Demo data generated with: http://www.json-generator.com/).
Material UI filter allows you to filter and sort arrays. The filter currently supports
We will use code snippets from the demo project to explain how to implement the filter:
The first step is to install the filter:
npm install material-ui-filter
Then you have to import the filter:
import { FilterDrawer, filterSelectors, filterActions } from 'material-ui-filter'
After that you have to add the filter component to the rest of your components in the render function.
The filter takes a few props:
const filterFields = [
{ name: 'name', label: 'Name' },
{ name: 'email', label: 'Email' },
{ name: 'registered', label: 'Registered', type: 'date' },
{ name: 'isActive', label: 'Is Active', type: 'bool' },
];
<FilterDrawer
name={'demo'}
fields={filterFields}
//localising the DatePicker
locale={'de-DE'}
DateTimeFormat={global.Intl.DateTimeFormat}
okLabel="OK"
cancelLabel="Abbrechen"
/>
In your mapStateToProps function you have to set the filter props and filter the array.
The getFilteredList function takes the following parameters:
const { hasFilters } = filterSelectors.selectFilterProps('demo', filters);
const list = filterSelectors.getFilteredList('demo', filters, source /*, fieldValue => fieldValue.val*/);
And last but not least you have to add the reducer to your combineReducers function to make it work with your store.
import { filterReducer } from '../../src'
const reducers = combineReducers({
//your other reducers
filters: filterReducer
})
export default reducers
For more information feel free to play around with the DEMO.
Tarik Huber (https://github.com/TarikHuber)
Maximilian Pichler (https://github.com/MaximilianPichler)
MIT @TarikHuber & @MaximilianPichler