DataTable : How to access both values in a range for custom filter

[liamoshea]

I am trying to create a custom filter for my DataTable to be applied to columns wherein the data is numbers. The custom filter will accept maximum and minimum values pertaining to the range. If the user only enters a maximum value, the filter functions as a less than filter. Similarly, a minimum value will operate as a greater than filter. If the user enters both a max and min value, I'd like to show values that lie within that range.

I have the structure of the filter implemented but I am unsure how to access both possible values. In my filter function I see that we have access to two values -> value and filter. However, the filter value only contains the last number entered into the filter (max or min), rather than both max and min simultaneously so that I can write my logic.

Is there a better way to write a filter which consists of two values to represent a range? How can I access both the max and min values in my filterFunction?

Thank you,
- Liam

My Code

Based on the documentation I have come up with the following:

Code: Select all

const [maxMinRange, setMaxMinRange] = useState({ max: "", min: "" })

  const onMaxMinRangeChange = (e) => {
    dt.current.filter(e.value, 'id', 'custom')
    const { name, value } = e.target
    setMaxMinRange({
      ...maxMinRange,
      [name]: value
    })
  }
  
  const maxMinRangeLogic = (value, filter) => {
    // console.log(filter) // Displays only the last number entered, not state with both numbers
    
    
    // If only min present
    // Return true if value greater than filter
    // Else if only max present
    // Return true if value less than filter
    // If both max and min present
    // Return true if value between max and min

    // Currently returns true all the time for development purposes.
    return true;
  }

  const maxMinFilter = <React.Fragment>
    <InputNumber value={maxMinRange.max} onValueChange={onMaxMinRangeChange} name="max" placeholder="Max" />
    <InputNumber value={maxMinRange.min} onValueChange={onMaxMinRangeChange} name="min" placeholder="Min" />
  </React.Fragment>
  
  return (
    <div className="datatable-filter-demo">
      <div className="card">
        <DataTable ref={dt} value={customers} paginator rows={10}
          header={header} className="p-datatable-customers"
          globalFilter={globalFilter} emptyMessage="No customers found."
          stateStorage="custom" customSaveState={onCustomSaveState} customRestoreState={onCustomRestoreState}
        >
          <Column field="id" header="ID" filter filterElement={maxMinFilter} filterFunction={maxMinRangeLogic} />
        </DataTable>
      </div>
    </div>
  );