reactjsdatatableprimereact

Primereact datatable: filter null values or template values


I have a datatable in primereact with a list of customers which has a column validTo which returns a date or null. I want to filter all valid customers, so I would filter for equals null, but that doesn't work because null resets the filter.

Second Option would be to replace null with something like "-" in a template, but how do I filter the value returned by the template, as it seems, that datatable only filters the source data?

Update 1:

I got a bit further.

my column looks like this

    <Column
       field="giltbis"
       header="giltbis"
       filter={true}
       filterElement={giltbisFilterElement}
       filterMatchMode="custom"
       filterFunction={filterGiltbis}
       sortable={true}
       body={dateTemplate_giltbis}
    />

And here is my filter setup:

  const handleFilterClick = (value) => {
    setgiltbisSelected(value);
    dt.current.filter(value, "giltbis", "custom");
  };
  const filterGiltbis = (value) => {
    if (giltbisSelected === "Gültig") {
      return value == null;
    } else if (giltbisSelected === "Ungültig") {
      return value != null;
    } else {
      //how to cancel filter or show all values
    }
  };
  const giltbisFilterElement = (
    <SelectButton
      style={{ width: "100%" }}
      value={giltbisSelected}
      options={giltbisoptions}
      onChange={(e) => handleFilterClick(e.value)}
    />
  );

So only one problem left. How to I cancel the filtering or show all values?


Solution

  • You need to implement a custom filter function. Here is an example

    filterMatchMode="custom" filterFunction={customFunction}
    
    
    export const customFunction = (value, filter) => {
      return value.toUpperCase().indexOf(filter.toUpperCase()) >= 0
    }