Skip to main content

Filter by Params

Example#

Simple list that can become searchable by parameters.

<>
<FilterByParams paramKey="tag" counts={[]} fields={[
{_id:"0", name:"First test"},
{_id:"1", name:"Second test"},
{_id:"2", name:"Third test"}]} />
</>

Empty#

When fields have no list it shows emptyState.

Empty
<>
<FilterByParams paramKey="tag" counts={[]} fields={[]} />
</>

Loading#

Show loading spinner by loading prop.

<>
<FilterByParams paramKey="tag" counts={[]} loading fields={[
{_id:"0", name:"First test"},
{_id:"1", name:"Second test"},
{_id:"2", name:"Third test"}]} />
</>

Count#

Show count numbers by giving them to counts prop.

<>
<FilterByParams paramKey="tag" counts={[1,2,3]} fields={[
{_id:"0", name:"First test"},
{_id:"1", name:"Second test"},
{_id:"2", name:"Third test"}]} />
</>

Multiple#

Make it possible to select multiple items by multiple prop.

<>
<FilterByParams paramKey="tag" counts={[]} multiple fields={[
{_id:"0", name:"First test"},
{_id:"1", name:"Second test"},
{_id:"2", name:"Third test"}]} />
</>

Searchable#

Add search bar on top of the list and make it searchable with searchable prop.

<>
<FilterByParams paramKey="tag" counts={[]} searchable fields={[
{_id:"0", name:"First test"},
{_id:"1", name:"Second test"},
{_id:"2", name:"Third test"}]} />
</>

Icon#

Add avatar by icon prop.

<>
<FilterByParams paramKey="tag" icon="tag-alt" counts={[]} fields={[
{_id:"0", name:"First test"},
{_id:"1", name:"Second test"},
{_id:"2", name:"Third test"}]} />
</>

Color#

Add custom color to icon by colorCode prop.

<>
<FilterByParams paramKey="tag" icon="tag-alt" counts={[]} fields={[
{_id:"0", name:"First test", colorCode:"red"},
{_id:"1", name:"Second test", colorCode:"blue"},
{_id:"2", name:"Third test", colorCode:"green"}]} />
</>

Tree view#

Show tree view list by treeView prop. Fields should have _id and parentId.

<>
<FilterByParams paramKey="tag" counts={[]} treeView fields={[
{_id:"0", name:"Parent 1"},
{_id:"1", name:"Parent 2"},
{_id:"2", parentId:"0", name:"Child of parent 1"},
{_id:"3", parentId:"1", name:"Child of parent 2"},
{_id:"4", parentId:"1", name:"Child of parent 2"}]} />
</>

Related#

Find sum of all the related items by id with relatedIds prop. It shows on the item, defined the relatedId prop.

<>
<FilterByParams paramKey="tag" counts={[1,2,3,4,5]} treeView fields={[
{_id:"0", name:"Parent 1", relatedIds:[2]},
{_id:"1", name:"Parent 2", relatedIds:[3,4]},
{_id:"2", parentId:"0", name:"Child of parent 1"},
{_id:"3", parentId:"1", name:"Child of parent 2"},
{_id:"4", parentId:"1", name:"Child of parent 2"}]} />
</>

API#

import FilterByParams from "erxes-ui/lib/components/FilterByParams";

* required prop

NameTypeDefualtDescription
fields*_idstringDefine id
namestringDefine name
colorCodenumberAdd custom color
parentIdstringDefine parent id
relatedIdsarrayDefine related items' ids
counts*anyDefine count numbers of list items
paramKey*stringKey, used when onClick function runs.
iconstringAdd icon to list items
loading*booleanActivates loading spinner
searchablebooleanAdd search bar and make the list searchable
multiplebooleanfalseMake it possible to select multiple items
treeViewbooleanActivates tree view of list
updatebooleanDefine function to filter items
Last updated on by enkhzule