DEV Community

Adele Beitvashahi
Adele Beitvashahi

Posted on • Edited on

1

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.

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs