Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/komarovalexander/react-filter-control

The react UI component for building complex filter criteria
https://github.com/komarovalexander/react-filter-control

Last synced: 3 months ago
JSON representation

The react UI component for building complex filter criteria

Awesome Lists containing this project

README 

        
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/komarovalexander/react-filter-control/blob/master/LICENSE) [![Build Status](https://travis-ci.com/komarovalexander/react-filter-control.svg?branch=master)](https://travis-ci.com/komarovalexander/react-filter-control)

[![Coverage Status](https://coveralls.io/repos/github/komarovalexander/react-filter-control/badge.svg?branch=master)](https://coveralls.io/github/komarovalexander/react-filter-control?branch=master)

# React Filter Control

The React component for building the composite filter criteria



[Demo (JS)](https://codesandbox.io/s/4xk994jovw)    |    [Demo (TS)](https://codesandbox.io/s/react-typescript-uhtxt)   



[Together With Data Table](https://komarovalexander.github.io/ka-table/#/filter-extended)



## Overview

![Filter Control](https://github.com/komarovalexander/react-filter-control/raw/master/static/filter-control.png)



## Installation

npm

```sh

npm install react-filter-control

```

yarn

```sh

yarn add react-filter-control

```



## Usage

### A basic example



```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 (

    

  );

};



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

```



[Open Example in CodeSandbox](https://codesandbox.io/s/mqnmlypmkp)



## API





### FilterControl

**Properties**



| Name | Type | Description |

| --- | --- | --- |

| fields | [Array.<Field>](#Field) | The fields settings |

| filterValue | [FilterValue](#FilterValue) | The filterValue settings |

| groups | [Array.<Group>](#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>](#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](/LICENSE).