How to modify filter icon functionality in table in PrimeReact

Question

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:

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

Thanks.

Answer 1

I fixed your example:

const UserNameFilterTemplate = (options) => {
    setTimeout(() => {
      multiselectRef && multiselectRef.current && multiselectRef.current.show();
    }, 500);

    return (
      <MultiSelect
        ref={multiselectRef}
        value={options.value}
        options={usernames}
        itemTemplate={userNameItemTemplate}
        onChange={(e) => options.filterCallback(e.value)}
        optionLabel="name"
        optionValue="name"
        placeholder="Any"
        autoFocus
        className="p-column-filter"
      />
    );
  };

https://codesandbox.io/s/primereact-demo-forked-56mh8j

You were missing optionValue="name" so it was making the whole object the value instead of the String value of the username selected.