react-mui-filter provides FilterField component which gives the user the possibility to choose the filter he needs while searching for a particular value.

Can be used to perform filtrable requests from the server.

The values and the filter selected by the user can be used to formulate the request, by adding them properly to the payload or injecting them in the query-string parameters to retrieve filtrable data.

A user can filter a table based on the chosen value and filter :

📑 Installation

Install via NPM:

npm install react-mui-filter

Or via YARN:

yarn add react-mui-filter

📖 Usage

Basic Text Filter

The FilterField component uses type props (which can take: text or number for now ) to display filters according to the specified type.

When the filter icon is clicked, a menu will appear letting the user pick the filter he needs.

FilterField props:

• type: whether 'text' or 'number' default is 'text'
• locale: to choose the FilterField language default is 'en' (see supported languages below)
• onFilterChange: callback takes the filter (e.g: 'EE', 'NE', 'CONTAINS',... see filters list below) as an argument, fired once the user changes the filter
• onChangeFilterValue: callback takes the filter and the value as arguments, fired once the user types a character in the Filter input field.
• onFilterValueChanged: callback takes the filter and the value as arguments, fired once the user press the 'Enter' key or the Filter input field is blurred.

import { FilterField } from "react-mui-filter";

const MyApp = () => (
  <FilterField
    type='number' // default 'text'
    locale='fr' // default 'en'
    onFilterChange={(filter) => {
        console.log(`The filter has been changed,
            filter: ${filter}`)
    }}
    onFilterValueChanged={(filter, value) => {
        console.log(`Filter value has been changed,
            filter : ${filter}
            value: ${value}`
        )
    }}
  </FilterField>
);

Filters list

The list of filters depends on the selected filter type. Since react-mui-filter support currently only text and number input types, the list is restricted as the following :

text

filter code	filter name	description
CONTAINS	Contains	To get values where what the user has entered in the input field is a sub-string of each value
NOT_CONTAINS	Not contains	The inverse of CONTAINS filter
EE	Equal	To get values equal to the user has entered in the input field
NE	Not Equal	To get values NOT equal to what the user has entered in the input field

number

filter code	filter name	description
EE	Equal	To get values equal to the user has entered in the input field
NE	Not Equal	To get values NOT equal to what the user has entered in the input field
LT	Less than	To get values less than the entered value
LTE	Less than or equal	To get values less than or equal to the entered value
GT	Greater than	To get values great than the entered value
GTE	Greater than or equal	To get values great than or equal to the entered value
BETWEEN	Between	To get values between the range specified by the user (between value 1 & value 2)

🌐 Languages

Currently react-mui-filter support 3 languages :

• 🇺🇸 English (English - en), Default
• 🇫🇷 French (Français - fr)
• 🇲🇦 Arabic (العربية - ar)
  

💻 Technologies

react-mui-filter has been built using the viteJS and basically with the following tools & libs :

• Typescript
• Material Design : using Material-ui to create better ui components:
• I18n : using react-i18next library
• Testing : using vitest and react-testing-library (unit testing)
• Linting & code formatting : ESlint & prettier
  

🚧 Next steps

• Add new filter type : date to be implemented using material date-picker.
• Add 'pattern' props to the FilterField component (some commonly used pattern email, url, upperCase only, ...)
• Add 'inputProps' props to customize material Input field from the FilterField component
• validate value according to patterns
• Enhance unit test coverage
• ...
  

License

[MIT]