K3d-material-ui-filter NPM

material-ui-filter

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/).

Features

Material UI filter allows you to filter and sort arrays. The filter currently supports

strings
dates
booleans

Implementation

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:

name: Name of the filter
fields: An array of the properties you want to filter/ sort by. The array should consist of objects with at least a name property. Additionally you can add a label and a datatype for each property. The standard datatype is string. Other possible datatypes are bool and date.
locale, DateTimeFormat, okLabel, cancelLabel: Will be forwarded to the DatePicker.

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:

filter name
filters
array
A function to get the array values (eg. If your array value is in an Object.)

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.