2.1.3 • Published 1 year ago
react-filter-control-mobin v2.1.3
React Filter Control
The React component for building the composite filter criteria
Overview
Installation
npm
npm install react-filter-control
yarn
yarn add react-filter-control
Usage
A basic example
import React from "react";
import ReactDOM from "react-dom";
import FilterControl from "react-filter-control";
import { fields, filterValue } from "./data.js";
const handleFilterValueChange = filterValue => {
// ...
};
const App = () => {
return (
<FilterControl
filterValue={filterValue}
fields={fields}
onFilterValueChanged={handleFilterValueChange}
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
API
FilterControl
Properties
Name | Type | Description |
---|---|---|
fields | Array.<Field> | The fields settings |
filterValue | FilterValue | The filterValue settings |
groups | Array.<Group> | The groups settings |
onFilterValueChanged | event | The filter value changed handler |
FilterValue : Object
Properties
Name | Type | Description |
---|---|---|
groupName | string | Group name |
items | Array.<(FilterValueGroup|FilterValueItem)> | Items in group |
FilterValueGroup : Object
Properties
Name | Type | Description |
---|---|---|
key | key | Item key |
groupName | string | Group name |
items | Array.<(FilterValueGroup|FilterValueItem)> | Items in group |
FilterValueItem : Object
Properties
Name | Type | Description |
---|---|---|
key | key | Item key |
field | string | Field |
operator | string | Operator |
value | any | Value |
Field : Object
Properties
Name | Type | Description |
---|---|---|
name | string | Field name |
caption | string | Field caption |
operators | Array.<Operator> | Field operators |
Group : Object
Properties
Name | Type | Description |
---|---|---|
name | string | Group name |
caption | string | Group caption |
Operator : Object
Properties
Name | Type | Description |
---|---|---|
name | string | Operator name |
caption | string | Operator caption |
License
This project is licensed under the terms of the MIT license.