Filter

A Filter. Make selections and filter your data.

Filter Gif

Usage

import { Filter } from @motor-js/core
//...
<Filter
dimension={['myAwesomeDimension']}
label='AwesomeDimension'
/>

Props

PropDescriptionOptions / Example
labelFilter labelis required
string
dimensionDimension to be renderedis required
array
sizeSize of the filteroneOf
'tiny'
'small'
'medium'
'large'
'xlarge'
widthwidth of the filterstring
'100%'
dropHeightHeight of the dropdownstring
'250px'
marginmargin around the filterstring
'5px'
onSelectionChangefunction fired on a change in selectionfunction
onSearchfunction fired on searchfunction
singleoption to enable only single selections in the Filter listboolean
false
sortByStateoption that sorts our Filter by selection stateboolean
true
selectionsTitleAdd the Filter selections to the titleboolean
true

Examples

Simple Filter example

function FilterTest() {
return (
<Motor config={config}>
<Filter
dimension={['Product Sub Group Desc']}
label='Product Group'
/>
</Motor>
)
}

Singe Selection

function FilterTest() {
return (
<Motor config={config}>
<Filter
dimension={['Product Sub Group Desc']}
label='Product Group'
single
/>
</Motor>
)
}

Theme API

filter

Settings in filter are below:

e.g. global.filter.color.selected = 'brand'

or

global.filter.title.border = '1px solid'

SettingDescriptionOptions / Example
colorfilter.color
selectedbackground color of selected itemstring
iconcolor of the filter iconsstring
backgroundColorbackground colorstring
selectedFontfont color of selected itemstring
fontTitlecolor of Filter labelstring
notSelectedcolor not selected itemstring
altSelectioncolor of alternate selectionsstring
titlefilter.title
borderfilter title borderstring
borderColorfilter title border colorstring
radiusfilter title border radiusstring
justifyContenttitle alignmentstring
mainfilter.main
borderfilter borderstring
selectedfilter.selected
borderselected item borderstring
borderColorselected item border colorstring
dropdownfilter.dropdown
borderdropdown borderstring
borderColordropdown border colorstring
borderItemsdropdown border colorstring
radiusdropdown border radiusstring
marginTopmargin at the top of the dropdownstring
shadowdropdown shadowstring
itemHeightheight of the dropdown itemsobject{
tiny: 'number',
small: 'number',
medium: 'number',
large: 'number',
xlarge: 'number'
}
hoverfilter.hover
borderColorborder color on hoverstring