2

I have a prime react table and a multiselect dropdown filter for one of the column like "Agent" column (Link)

When we click on the filter icon, "Agent Picker" multiselect dropdown will display. Then we again need to click on the dropdown to see the options and choose for filtering the results.

But my requirement is, as soon as we click on filter icon, the multiselect should display default options open, reducing one click for the user. Is this achievable? Please suggest any idea/reference link. Thanks.

I wanna achieve like this:

enter image description here

Here is what I tried: https://codesandbox.io/s/primereact-demo-forked-c6kw73?file=/src/App.js

Thanks.

Melloware
  • 10,435
  • 2
  • 32
  • 62
Maulik Patel
  • 344
  • 1
  • 10
  • I am not sure I understand? I don't "see" a filter icon in your sandbox demo just the dropdown. – Melloware Jun 23 '23 at 15:49
  • @Melloware Mistakenly, I have shared wrong link. Here is the updated link (https://codesandbox.io/s/primereact-demo-forked-c6kw73?file=/src/App.js), the problem is when click on filtericon on username, list is appeared but select something from it and after submit nothing is displayed !! Please help me to fix this... – Maulik Patel Jun 26 '23 at 06:09
  • @Melloware I guess problem is with the callback function, Just for your reference (It might be helpful for you). – Maulik Patel Jun 26 '23 at 06:11
  • OK answered below please mark it correct if it answered your original issue. – Melloware Jun 26 '23 at 17:04

1 Answers1

1

I fixed your example: https://codesandbox.io/s/primereact-demo-forked-56mh8j

Please upvote if this fixes your issue

Melloware
  • 10,435
  • 2
  • 32
  • 62
  • Thank you so much for your response, It worked !! Marking your answer as accepted. – Maulik Patel Jun 27 '23 at 09:13
  • I have implemented sort functionality on above mentioned code..(https://codesandbox.io/s/primereact-demo-forked-5x3psw?file=/src/App.js) I noticed some unexpected behaviour here, When user apply filter on "name" column first by clicking sort icon and he is repeatedly doing it. but when he suddenly click on username arrow icon - it's not working. some light violet colour border coming and it's unclickable for that specific area. Is it a bug or I am doing some mistakes here? Please help me to fix this. Reference screenshots. (https://yourimageshare.com/ib/k7yeKOc9No) – Maulik Patel Jun 27 '23 at 12:15
  • I am not seeing that behavior in my sandbox everything is working fine? – Melloware Jun 27 '23 at 20:47
  • I want to highlight color of row which have the username "Bret". Something like this - (https://yourimageshare.com/ib/AxZUw6Vuo0) I have searched about this and tried with rowClassName,but none of the method is working. Can you please help me with the same? Here is my sandbox: https://codesandbox.io/s/primereact-demo-forked-56mh8j – Maulik Patel Aug 17 '23 at 08:47