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: 8 months ago
JSON representation

The react UI component for building complex filter criteria

• Host: GitHub
• URL: https://github.com/komarovalexander/react-filter-control
• Owner: komarovalexander
• License: mit
• Created: 2018-11-10T22:52:27.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-01-29T21:05:56.000Z (almost 6 years ago)
• Last Synced: 2024-11-24T20:08:50.103Z (12 months ago)
• Language: JavaScript
• Homepage:
• Size: 60.5 KB
• Stars: 51
• Watchers: 3
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-filter-control - The React filterbuilder component for building the filter criteria in the UI. (UI Components / Miscellaneous)
• awesome-react-components - react-filter-control - The React filterbuilder component for building the filter criteria in the UI. (UI Components / Miscellaneous)
• awesome-react-components - react-filter-control - The React filterbuilder component for building the filter criteria in the UI. (UI Components / Miscellaneous)
• awesome-react-components - react-filter-control - The React filterbuilder component for building the filter criteria in the UI. (UI Components / Miscellaneous)
• fucking-awesome-react-components - react-filter-control - The React filterbuilder component for building the filter criteria in the UI. (UI Components / Miscellaneous)
• awesome-react-components - react-filter-control - The React filterbuilder component for building the filter criteria in the UI. (UI Components / Miscellaneous)
• awesome-react-components - react-filter-control - The React filterbuilder component for building the filter criteria in the UI. (UI Components / Miscellaneous)

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