> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/filtry.md).

# Фильтры

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2Fy1V5g6dE0AUbyGDEHacN%2Fimage.png?alt=media\&token=1b9ed937-1e5b-4453-9136-6a937392404e)

Компонент для создания меню фильтров данных.

#### Свойства:

* *<mark style="color:purple;">componentId</mark>*- id компонента, данные которого необходимо отфильтровать
* *<mark style="color:purple;">filterStyles</mark>* - набор параметров для управления стилями компонента
* *<mark style="color:purple;">filterGroups</mark>* - набор настроек параметров фильтрации
  * *<mark style="color:purple;">title</mark>* - заголовок группы полей ввода
  * *<mark style="color:purple;">selectedConfig</mark>* - тип полей ввода группы. Может принимать значения **radio**, **checkbox**, **range**
  * *<mark style="color:purple;">filters</mark>* - список полей ввода группы и их настроек

Список настроек полей ввода формируется в зависимости от выбранного типа *<mark style="color:purple;">selectedConfig</mark>*

**radio** - тип конфигурации "radio button". Поле для выбора одного из нескольких фиксированных значений. Имеет настройки:

* *<mark style="color:purple;">key</mark>* - ключ поля значения элемента массива данных, по которому необходимо выполнить фильтрацию
* *<mark style="color:purple;">label</mark>* - заголовок поля ввода
* *<mark style="color:purple;">value</mark>* *(readonly)* - выбранное пользователем значение поля ввода / значение по умолчанию
* *<mark style="color:purple;">conditionType</mark>* - тип условия фильтрации. Может принимать значения **match**, **range**, **boolean**
* *<mark style="color:purple;">showToggler</mark>* - показывать переключатель значений в панели отображения установленных фильтров. Логика переключателя дублирует логику поля ввода в модальном окне фильтров
* *<mark style="color:purple;">items</mark>* - список опций, доступных пользователю для выбора
  * *<mark style="color:purple;">id</mark>* - значение опции, которое будет участвовать в фильтрации
  * *<mark style="color:purple;">title</mark>* - заголовок опции, который будет отображен в UI

{% hint style="info" %}
Если необходимо добавить опцию, которая будет отвечать за "сброс" фильтрации  по данному полю (как, например, опция "отобразить всё"), в *<mark style="color:purple;">id</mark>* такой опции необходимо указать falsey значение, например, **null**
{% endhint %}

**checkbox** - тип конфигурации "чекбокс". Имеет настройки:

* *<mark style="color:purple;">label</mark>* - заголовок поля ввода
* *<mark style="color:purple;">value</mark>* *(readonly)* - выбранное пользователем значение поля ввода / значение по умолчанию
* *<mark style="color:purple;">conditions</mark>* - список условий фильтрации, которые будут применяться при активации текущего чекбокса.&#x20;
  * *<mark style="color:purple;">key</mark>* - ключ поля значения элемента массива данных, по которому необходимо выполнить фильтрацию
  * *<mark style="color:purple;">conditionType</mark>* - тип условия фильтрации. Может принимать значения **match**, **range**, **boolean**
  * *<mark style="color:purple;">conditionValue</mark>* - значение, которое будет использовано для сравнения

{% hint style="info" %}
Для типов **range** и **match** возможно указание нескольких значений через запятую. Таким образом, сравнение будет выполняться по всем указанным значениям, например, при значении *<mark style="color:purple;">conditionValue</mark>*: **offline, dnd, away** и *<mark style="color:purple;">conditionType</mark>*: **match** будут отображены только те элементы, значение указанного поля которых будет совпадать с любым из перечисленных.
{% endhint %}

{% hint style="info" %}
Один чекбокс может иметь несколько условий, по которым будет выполняться фильтрация. Это реализовано для случаев, когда необходимо объединить такие условия "по смыслу". Для примера - в качестве массива данных имеем список "звонков". Необходимо вывести опцию фильтра для отображения наиболее срочных звонков. Имеет смысл создать один чекбокс, который при активации будет отображать необходимые данные. Таким образом мы имеем возможность присвоить ему сразу ряд условий, по которым будут отбираться требуемые звонки. Например *\[время ожидания > 30сек]*, *\[свободных операторов < n]*, *\[состояние регистрации звонящего пользователя - зарегистрирован]*.
{% endhint %}

**range** - тип конфигурации "диапазон". Необходим для вывода фильтра с возможностью пользовательского ввода необходимых значений диапазона. Имеет следующие настройки:

* *<mark style="color:purple;">key</mark>* - ключ поля значения элемента массива данных, по которому необходимо выполнить фильтрацию

* *<mark style="color:purple;">mask</mark>* - маска ввода значения. Необходима для ограничения ввода пользователем неподходящих значений. Более подробно можно ознакомиться в [документации ](https://www.npmjs.com/package/react-input-mask)модуля маски

* *<mark style="color:purple;">value</mark>* *(readonly)* - выбранное пользователем значение поля ввода / значение по умолчанию

* *<mark style="color:purple;">appliedFilters</mark> (readonly)* - список применённых условий фильтрации

Подробнее о практическом применении компонента рассказано в разделе [Примеры](/ui-konstruktor-oktell/primery/filtry.md)