npm package: @paprika/filter
Description: Filter
Author: @paprika
Latest version: 5.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/filter

## Description

Filter

## Installation

```
yarn add @paprika/filter
```

or with npm:

```
npm install @paprika/filter
```

## Props

### Filter

| Prop              | Type                                       | required | default                   | Description |
| ----------------- | ------------------------------------------ | -------- | ------------------------- | ----------- |
| numberApplied     | number                                     | false    | 0                         |             |
| children          | node                                       | false    | null                      |             |
| columns           | arrayOf                                    | true     | -                         |             |
| data              | arrayOf                                    | false    | null                      |             |
| maxFiltersAllowed | number                                     | false    | 9999                      |             |
| onAddFilter       | func                                       | true     | -                         |             |
| onApply           | func                                       | true     | -                         |             |
| onCancel          | func                                       | false    | () => {}                  |             |
| onChangeOperator  | func                                       | false    | null                      |             |
| onClear           | func                                       | false    | () => {}                  |             |
| operator          | [ Filter.operator.AND, Filter.operator.OR] | false    | Filter.operator.AND       |             |
| rulesByType       | objectOf                                   | false    | Filter.defaultRulesByType |             |
| zIndex            | number                                     | false    | undefined                 |             |

### Item

| Prop             | Type                       | required | default | Description |
| ---------------- | -------------------------- | -------- | ------- | ----------- |
| columnId         | string                     | true     | -       |             |
| id               | [string,number]            | false    | null    |             |
| index            | number                     | true     | -       |             |
| onChangeFilter   | func                       | true     | -       |             |
| onDeleteFilter   | func                       | true     | -       |             |
| renderValueField | func                       | false    | null    |             |
| rule             | string                     | true     | -       |             |
| value            | [string,bool,array,number] | true     | -       |             |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Filter

### Usage (no hooks)

```js
import Filter from "@paprika/filter";

<Filter
  columns={columnsSettings}
  data={data}
  numberApplied={1}
  onAddFilter={() => {}}
  onApply={() => {}}
  onCancel={() => {}}
  onChangeOperator={() => {}}
  onClear={() => {}}
>
  <Filter.Item
    columnId="name"
    id={1234}
    index={0}
    type="TEXT"
    rule="CONTAINS"
    value="abc"
    onChangeFilter={() => {}}
    onRemoveFilter={() => {}}
  />
</Filter>;
```

[More detail about props](https://github.com/acl-services/paprika/blob/aa770ab261d6364c2f14717c8edeb7d1e560a3d5/packages/Filter/src/components/Filter/Filter.js)

### Usage (with hooks)

Please note that the built-in filter functions only work with flat data arrary. Please pass in a flattened array if you want to use the built-in feature. If you want to use your own filter algorithm you can still use the hook, just do not pass in the `data` property and ignore the `filteredData` in the returned value.

```js
const { filteredData, filters, getFilterProps, getFilterItemProps } = useFilter({ columns, rulesByType, data });

const handleDeleteFilter = filterId => () => {
  onDeleteFilter(filterId);
};
const handleChangeFilter = filterId => params => {
  onChangeFilter({ ...params, id: filterId });
};

return (
  <Filter {...getFilterProps()} columns={columnsSettings} data={data}>
    {filters.map((filter, index) => (
      <Filter.Item
        {...getFilterItemProps()}
        columnId={filter.columnId}
        id={filter.id}
        index={index}
        key={filter.id}
        type={filter.type}
        rule={filter.rule}
        value={filter.value}
      />
    ))}
  </Filter>

  // display filteredData
);
```

### Variations

- You can prevent the user from having to choose between <code>AND</code> and <code>OR</code> by setting the <code>onChangeOperator</code> prop to <code>null</code> and including the <code>operator</code> to use.

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/table-filter--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Filter/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/filter%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Filter/CHANGELOG.md)