@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