@licuido-ui/ui_filter
v0.0.2
Published
The Filter component is a flexible and customizable filtering tool. It allows users to apply filters and refine their data based on various criteria. The component provides a user-friendly interface with options like search functionality, chip display, an
Downloads
17
Readme
Filter
The Filter component is a flexible and customizable filtering tool. It allows users to apply filters and refine their data based on various criteria. The component provides a user-friendly interface with options like search functionality, chip display, and more. Users can select from a list of custom data items and use buttons to trigger specific actions based on their selected filters. With its configurable styles and options, the Filter component offers a powerful solution for creating interactive and dynamic filtering experiences in web applications.
Author
- @author Akila Kalaiyarasan [email protected]
Link
PlayGround
Installation
npm i @licuido-ui/ui_filterImport component
import { Filter } from '@licuido-ui/ui_filter';Usage
<Filter customData={[]} buttons={[]} />Image
Sample code
<Filter
icon={<FunnelIcon color='#fff' width='16px' height='16px' />,}
customData={[
{
listName: 'Category',
selected: false,
subList: [
{
list: 'Category1',
selected: false,
listStyle: {},
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: 'Category2',
selected: false,
listStyle: {},
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: 'Category3',
selected: false,
listStyle: {},
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: 'Category4',
selected: false,
listStyle: {},
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: 'Category5',
selected: false,
listStyle: {},
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: 'Category6',
selected: false,
listStyle: {},
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
],
listNameStyle: {},
subListType: 'checkbox',
}
{
listName: 'product',
selected: false,
subList: [
{
list: 'Product1',
selected: false,
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: 'product2',
selected: false,
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: 'product3',
selected: false,
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: 'product4',
selected: false,
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
],
subListType: 'chip',
},
{
listName: 'Price',
selected: false,
subList: [
{
list: '100',
selected: false,
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: '200',
selected: false,
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
{
list: '300',
selected: false,
LabelbgColor: '#E9E9E9',
LabelColor: '#666666',
},
],
subListType: 'checkbox',
},
]}
buttons={[
{
label: 'Clear all',
onClick: (data, getClearState) => {
getClearState();
},
btnstyle: {
backgroundColor: '#FFE8E9',
padding: '4px',
color: '#F44F5A',
width: '121px',
height: '36px',
},
},
{
label: 'Apply',
onClick: (data: any) => {
const selectedData: any = [];
data.forEach((item: any) => {
const { listName, subList } = item;
const selectedSubList = subList?.filter((subItem: any) => subItem.selected);
if (selectedSubList && selectedSubList.length > 0) {
selectedData.push({ listName, subList: selectedSubList });
}
});
console.log(selectedData);
},
btnstyle: {
backgroundColor: '#665CD7',
padding: '4px',
color: '#fff',
width: '121px',
height: '36px',
},
},
]}
rootStyle={{}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
filterTitle={'Filter'}
filterTitleStyle={{
fontSize: '16px',
textalign: 'left',
color: '#262626',
fontWeight: 'bold',
}}
listIconStyle={{}}
subListContainerStyle={{}}
buttonContainerStyle={{}}
PopoverStyle={{}}
contentWrapStyle={{}}
searchBarStyle={{}}
showSearchBar={true}
filterButtonStyle={{ height: '36px', width: '10px' }}
labelStyle={{}}
listItemStyle={{}}
maxLabelShow={}
moreLabelStyle={{
backgroundColor: '#E9E9E9',
fontSize: '10px',
m: 0,
borderRadius: '4px',
}}
titleWrapperStyle={{}}
btnWrapperStyle={{}}
selectedchipConStyle={{}}
searchPlaceHolder={'Search'}
searchVariant={'outlined'}
searchbarSize={'small'}
checkboxStyle={{}}
chipStyle={{}}
chipVariant={'outlined'}
visibleSubList={3}
badgeColor={'secondary'}
moreLabelcolor={'#666666'}
/>
Props
| Name | Type | Default Value | Description |
| ----------------------- | -------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------- |
| filterId | string | string | string |
| className | string | '' | Additional CSS class for styling the component. |
| sx | SxProps | {} | Custom style prop for using MUI's sx prop. |
| icon | JSX.Element | <FunnelIcon /> | The icon element to display as the filter button. |
| customData | CustomData[] | [] | An array of objects representing custom data for the filter. |
| buttons | ButtonItem[] | [] | An array of objects representing buttons in the filter. |
| rootStyle | SxProps | {} | Additional custom style for the root container. |
| filterButtonStyle | SxProps | {} | Additional custom style for the filter button. |
| anchorOrigin | { vertical: 'top' | 'bottom', horizontal: 'left' | 'center' | 'right' } | { vertical: 'bottom', horizontal: 'left' } | The anchor origin for the Popover component. |
| transformOrigin | { vertical: 'top' | 'bottom', horizontal: 'left' | 'center' | 'right' } | { vertical: 'top', horizontal: 'left' } | The transform origin for the Popover component. |
| filterTitle | string | '' | The title to display at the top of the filter. |
| filterTitleStyle | SxProps | {} | Additional custom style for the filter title. |
| listContainerStyle | SxProps | {} | Additional custom style for the list container. |
| listIconStyle | SxProps | {} | Additional custom style for the list icon. |
| subListContainerStyle | SxProps | {} | Additional custom style for the sublist container. |
| buttonContainerStyle | SxProps | {} | Additional custom style for the button container. |
| PopoverStyle | SxProps | {} | Additional custom style for the Popover component. |
| contentWrapStyle | SxProps | {} | Additional custom style for the content wrapper. |
| searchBarStyle | SxProps | {} | Additional custom style for the search bar. |
| showSearchBar | true | false | true | Whether to show the search bar in the filter. |
| chipStyle | SxProps | {} | Additional custom style for the chip. |
| labelStyle | SxProps | {} | Additional custom style for the label. |
| listItemStyle | SxProps | {} | Additional custom style for each list item. |
| maxLabelShow | number | 2 | The maximum number of labels to show before displaying the "more" label. |
| visibleSubList | number | 3 | The maximum number of sublist items to display before showing a "more" label. |
| moreLabelStyle | SxProps | {} | Additional custom style for the "more" label. |
| titleWrapperStyle | SxProps | {} | Additional custom style for the title wrapper. |
| btnWrapperStyle | SxProps | {} | Additional custom style for the button wrapper. |
| selectedchipConStyle | SxProps | {} | Additional custom style for the selected chip container. |
| searchPlaceHolder | string | '' | The placeholder text for the search bar. |
| searchVariant | 'standard' | 'filled' | 'outlined' | 'outlined' | The variant of the search bar. |
| searchbarSize | 'small' | 'medium' | 'small' | The size of the search bar. |
| checkboxStyle | SxProps | {} | Additional custom style for the checkbox (if sublistType is 'checkbox'). |
| chipVariant | 'filled' | 'outlined' | 'outlined' | The variant of the chip (if sublistType is 'chip'). |
| badgeColor | 'success' | 'primary' | 'secondary' | 'error' | 'primary' | The color of the badge on the filter button. |
| moreLabelcolor | string | '#666666' | The color of the text for the "more" label. |
| moreLabelbgColor | string | '#E9E9E9' | The background color of the "more" label. |