React Filter Control

The React component for building the composite filter criteria

Demo

Overview

!Filter Control

Installation

npm
``sh
npm install react-filter-control
`
yarn
`sh
yarn add react-filter-control
`

Usage

$3

`js
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 (
filterValue={filterValue}
fields={fields}
onFilterValueChanged={handleFilterValueChange}
/>
);
};

ReactDOM.render(, document.querySelector("#root"));
``

Open Example in CodeSandbox

API

$3

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 |

$3

Properties

| Name | Type | Description |
| --- | --- | --- |
| groupName | string | Group name |
| items | Array.<(FilterValueGroup\|FilterValueItem)> | Items in group |

$3

Properties

| Name | Type | Description |
| --- | --- | --- |
| key | key | Item key |
| groupName | string | Group name |
| items | Array.<(FilterValueGroup\|FilterValueItem)> | Items in group |

$3

Properties

| Name | Type | Description |
| --- | --- | --- |
| key | key | Item key |
| field | string | Field |
| operator | string | Operator |
| value | any | Value |

$3

Properties

| Name | Type | Description |
| --- | --- | --- |
| name | string | Field name |
| caption | string | Field caption |
| operators | Array.<Operator> | Field operators |

$3

Properties

| Name | Type | Description |
| --- | --- | --- |
| name | string | Group name |
| caption | string | Group caption |

$3

Properties

| Name | Type | Description |
| --- | --- | --- |
| name | string | Operator name |
| caption | string | Operator caption |

License

This project is licensed under the terms of the MIT license.