@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 | - | |

Filter

Usage (no hooks)

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

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.

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 AND and OR by setting the onChangeOperator prop to null and including the operator to use.

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG