Filtering Dropdowns/MultiSelect & Tables for React components

[OmarSherif96]

Hello, How can I add a filter option to these components ? I read the docs and checked github issues but I can't find it.

I tried embedding the Search component as well in the Dropdown but it doesn't work.

Can someone please provide a working example of how to filter lists/tables ?

Thanks

[jnm2377]

Hi, you can view an example of our filterable multiselect here: https://www.carbondesignsystem.com/components/dropdown/code#filterable-multiselect You simply have to use <MultiSelect.Filterable/> rather than just MultiSelect.

As for the data table, there's a prop that is used to filter rows, although it has a default filter already. If you wanna customize the filtering, though, you can do that with the filterRows prop.

You can view the working example here: https://react.carbondesignsystem.com/?path=/story/datatable--with-batch-actions Whatever you type into the search bar will be filtered.

Does that help?

[OmarSherif96]

Hello Josefina, Thanks that works for the Multiselect and Tables.

But I have two questions: 1) Does this feature exist in the Dropdown ? 2) How can I use the Search component, like passing a data props to it so it can be able to search for it ? it's not clear in the docs.

[jnm2377]

@OmarSherif96 the Dropdown component doesn't support filtering or search. The ComboBox component is like dropdown but with filtering. https://react.carbondesignsystem.com/?path=/story/combobox--default It's like dropdown in that you can only select one option, but has filtering like the multiselect.