DEV Community

Adele Beitvashahi
Adele Beitvashahi

Posted on • Updated on

How to use Filters in PrimeReact DataTables

[UPDATE]: I've made a comprehensive demo on blitzstack which goes in depth on the different filtering scenarios that are neglected in the primereact docs. I'll update this article into a full writeup when I get the chance but for now that should serve all your filtering needs and then some! check it out

[EDIT]: insightful github discussion

I wrote a very long post then decided an image is worth a thousand words, so there you go.

Code diagram

Although the images uploaded to dev.to get downscaled so maybe this one is only worth 250 words.

The aim of this post was to reduce headaches induced by things unsaid in the official docs. There was a lack of resources online for using filters with MultiSelect and Dropdown components correctly with a more-than-basic data structure setup. So I'm using this post as a resource for future me and anyone else that might find this useful

If you look at the top left of that image there is a string[] that holds fruit names, that's because you can also use string[] instead of Object[] for the filter item list. I didn't expand on it because the official docs do a good enough job doing it.

I tried to cover things the docs failed to cover.

Top comments (0)