Skip to main content

Filterable List

Example#

Simple filterable list. It can be checked.

  • First test
  • Second test
  • Third test
<>
<FilterableList items={[
{_id:"0", title:"First test"},
{_id:"1", title:"Second test"},
{_id:"2", title:"Third test"}]}
/>
</>

Blank filterable list#

When items have no list it shows emptyState.

    There aren’t any data at the moment.
<>
<FilterableList items={""} />
</>

Loading#

Show loading spinner instead of the list by loading prop.

<>
<FilterableList items={[
{_id:"0", title:"First test"},
{_id:"1", title:"Second test"},
{_id:"2", title:"Third test"}]}
loading={true} />
</>

Custom style#

Add custom style to list item by style prop.

  • First test
  • Second test
  • Third test
<>
<FilterableList items={[
{_id:0, title:"First test", style:{color:"purple"}},
{_id:1, title:"Second test", style:{color:"red"}},
{_id:2, title:"Third test", style:{color:"green"}}]}
/>
</>

Avatar#

Add avatar by avatar prop to items array.

  • First test
  • Second test
  • Third test
<>
<FilterableList items={[
{_id:"0", title:"First test", avatar:"https://erxes.io/static/images/logo/logo_dark.svg"},
{_id:"1", title:"Second test", avatar:"https://erxes.io/static/images/logo/logo_dark.svg"},
{_id:"2", title:"Third test", avatar:"https://erxes.io/static/images/logo/logo_dark.svg"}]}
/>
</>

Additional icon#

Add additional icon to list item by additionalIconClass prop.

  • First test
  • Second test
  • Third test
<>
<FilterableList items={[
{_id:"0", title:"First test", avatar:"https://erxes.io/static/images/logo/logo_dark.svg", additionalIconClass:"info-circle"},
{_id:"1", title:"Second test", avatar:"https://erxes.io/static/images/logo/logo_dark.svg", additionalIconClass:"info-circle"},
{_id:"2", title:"Third test", avatar:"https://erxes.io/static/images/logo/logo_dark.svg", additionalIconClass:"info-circle"}]}
/>
</>

Links#

Add links below the list by links prop.

  • First test
  • Second test
  • Third test
<>
<FilterableList items={[
{_id:"0", title:"First test"},
{_id:"1", title:"Second test"},
{_id:"2", title:"Third test"}]}
links={[{title:"Google", href:"https://www.google.com"}]}
/>
</>

Show Checkmark#

Hide checkmark by showCheckmark prop.

  • First test
  • Second test
  • Third test
<>
<FilterableList items={[
{_id:"0", title:"First test"},
{_id:"1", title:"Second test"},
{_id:"2", title:"Third test"}]}
showCheckmark={false} />
</>

Tree view#

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

    • Parent 1
    • Parent 2
<>
<FilterableList items={[
{_id:"0", title:"Parent 1", iconClass:"iconClass"},
{_id:"1", title:"Parent 2", iconClass:"iconClass"},
{_id:"2", parentId:"0", title:"Child of parent 1"},
{_id:"3", parentId:"1", title:"Child of parent 2"},
{_id:"4", parentId:"1", title:"Child of parent 2"}]}
treeView={true} isIndented={true} />
</>

API#

import FilterableList from "erxes-ui/lib/components/filterableList/FilterableList";

* required prop

NameTypeDefualtDescription
items* (array)_idstringDefine id of item array
titlestringDefine list item name
avatarstringShow image before item title
additionalIconClassstringShow additional icon on the right side of item title
styleobjectAdd style to item title
parentIdstringDefine parent by id
iconClassstringShow icon before item title to hide or show children item
linksany[]Define links below list
showCheckmarkbooleantrueShow checkmart when item list is clicked
selectableboolean30pxTakes spacing on the right
loadingbooleanActivates loading spinner
classNamestringDefine className
treeViewbooleanActivates tree view of list
isIndentedbooleanTake space between arrow and title
onClickfunctionDefine click handler function when list item is clicked
onSearchfunctionDefine search function
Last updated on by enkhzule