CODEWITHSUNDEEP
javascriptreactjsdatatablefilteringprimereact
Luke Peña
Luke Peña

Reputation: 81

PrimeReact DataTable custom filterFunction does nothing

We're using PrimeReact in our latest project, and we have a filter we want to implemented where the column data is an array and we want the user to be able to select an array of options to filter that column by. (So the column represents assigned users and the filter would be a multiselect of users to filter by).

This would require a filter mode of CUSTOM, and the documents mention a filterFunction property on columns, but absolutely no other details outside of that. I set the mode to CUSTOM and gave it a filter function and it does... absolutely nothing. The table automatically filters everything the moment I set the mode to custom.

Right now I'm just testing it on a string column for simplicity. Here are the filters:

const [filters, setFilters] = useState({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
    name: { value: null, matchMode: FilterMatchMode.CUSTOM },
});

And here is the column:

<Column
    key="name"
    field="name"
    header="Name"
    sortable
    filter
    filterElement={searchFilterTemplate}
    filterFunction={() => console.log('test!')}
    showFilterMenu={false}
/>

Note: it doesn't matter what I put in filterFunction - nothing happens. Also, in the types for this method in the node_modules, filterFunction on the Column has a return type of "void", whereas every example I've seen has a return type of "boolean", which makes waaaay more sense to me. Seems completely borked, or maybe I'm missing something?

Upvotes: 5

Views: 3291

Answers (1)

Benhamou Simon david
Benhamou Simon david

Reputation: 1

I have been struggling also with this one but actually the FilterFunction does not work you need to register your custom function instead:

import { FilterService } from "primereact/api"; 

 // use custom_[filterField] as example tags: { value: null, matchMode: FilterMatchMode.CUSTOM } 

FilterService.register('custom_tags', (value, filters) => {     if (!filters) return true;  if(!value) return false;    const array = value?.tags ?? value  return array.some((tagId) => filters?.includes(tagId)); });

import { FilterService } from "primereact/api";  /*use custom_[filterField] as example tags: { value: null, matchMode: >FilterMatchMode.CUSTOM }*/ 

FilterService.register('custom_tags', (value, filters) => {     if (!filters) return true;  if(!value) return false;    const array = value?.tags ?? value  return array.some((tagId) => filters?.includes(tagId)); });

Register at the top of your table component.

Upvotes: 0

Related Questions