@licuido/ui_filter

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 [e-mail]

Link

Story Book Link ButtonGroup

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido/ui_filter

Import component

import { Filter } from '@licuido/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.