Filters: Allow filters on primitive arrays

[bhkangw]

Describe the feature you would like to see added

Is it possible to add filterable dropdowns within DataTable filter templates? Dropdown's filterBy prop can be specified to match by name, label, etc but what about when options must be strings in the case of filter templates?

const statuses = [
    "unqualified",
    "qualified",
    "new",
    "negotiation",
    "renewal",
    "proposal"
];

const statusFilterTemplate = (options) => {
   return (
      <Dropdown
        value={options.value}
        options={statuses}
        onChange={(e) => options.filterCallback(e.value, options.index)}
        itemTemplate={statusItemTemplate}
        placeholder="Select a Status"
        className="p-column-filter"
        showClear
        filter
        filterBy="name" // this doesn't work as DataTable filter templates only accept options as strings
      />
   );
};

Is your feature request related to a problem?

In a column with many options, it is useful to give the user the option to type and filter through the dropdown like one may expect anywhere else.

Describe the solution you'd like

The ability to use filterBy prop in Dropdown even when options is a list of strings rather than object.

Perhaps an option to set filterBy="string" or leave filterBy unset which defaults to searching for un-nested strings in the options list.

Additional context

Here's a codesandbox with a simplified DataTable and the filterBy prop under Status column displaying the proper UI -- but not matching when you type in any valid status

[melloware]

I don't understand your code sandbox is working for me. If I pick "qualified" in the Status dropdown filter it filters by Qualified?

[bhkangw]

Thanks @melloware - it's not that you can't select it. But with the filter & filterBy prop enabled for Dropdown you should be able to "filter" the dropdown options by typing. For example, typing in "qua" should filter out all the options but Qualified

[bhkangw]

Hi @melloware I updated the code sandbox with a separate Country dropdown to demonstrate the differences.

You can filter countries successfully within the dropdown menu

But the status options never return a match

[melloware]

AHHH OK now i understand what you are asking for. :)

[melloware]

OK with my fix in 8.6.2 you only need to add filter to Dropdown for primitive strings and it will filter the primitive strings. You can add filterBy it will just be ignored if I detect the value is just a String

[bhkangw]

@melloware I gotta say I am SUPER impressed by PrimeReact and your speed & effort

Thank you so much!!!

[melloware]

Thanks for the report! I agree it should definitely support native strings and the fix was pretty easy!