[DataGrid] Add filterValueGetter property to the column definition

[TiagoPortfolio]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently, the data grid filters a column based on the value if the column has a valueGetter.
In many use cases, we want to use the raw value for sorting and the formattedValue for display. One example is:

{
  value: 60, // seconds
  formattedValue: '1:00', // formatted to hours and minutes
}

But if the user filters this column, the filter will not be based on the displayed value as he is expecting. I didn't find a good way to achieve this behavior in the docs.

I believe a value accessor should be used to customize what value should be used to filter.
For instance, a filterValueGetter property could be added to the column definition:

{
  valueGetter: ({ row }) => row.seconds,
  valueFormatter: ({ value }) => formatHourMinute(value),
  filterValueGetter: ({ formattedValue}) => formattedValue
}

Inspired from AG Grid:
https://www.ag-grid.com/javascript-data-grid/value-getters/#filter-value-getters

Examples 🌈

A filterValueGetter property could be added to the column definition:

{
  valueGetter: ({ row }) => row.seconds,
  valueFormatter: ({ value }) => formatHourMinute(value),
  filterValueGetter: ({ formattedValue}) => formattedValue
}

Inspired from AG Grid:
https://www.ag-grid.com/javascript-data-grid/value-getters/#filter-value-getters

Motivation 🔦

There is no easy way to filter by the displayed value of a column. There should be a property to customized the value to be used in the filters.

Order ID 💳 (optional)

54728

[m4theushw]

You can already have that by customizing the operators. Looking at the specific example you gave with seconds, you can also achieve it providing a custom filter component and using a number column. By default, a number column filters based on value, but since you are formatting the value for display you'll also need to allow the user to enter the filter value in the same format (e.g. enter 1:00 to filter for 60). In this context, something will have to convert the value and the filter component is a place to do that. In the custom filter component, you display the value entered as 1:00 but calls applyValue with 60. We still need to discuss if filterValueGetter make sense, since there already some options to achieve the same outcome.

[TiagoPortfolio]

Thanks for the answer @m4theushw !
To make it work for my use case I used the wrap built-in operators example where I changed all operators of the type 'string' to use the formattedValue:

if (params.colDef.type === 'string') {
  return innerFilterFn({
    ...params,
    value: params.formattedValue,
  })
}

I think this approach is fine to handle more complex cases but for simple cases like the example I shared, I think a quick solution through a filterValueGetter prop would make more sense.

[cherniavskii]

Another use case for filterValueGetter: #9817
Although we will also need to allow transforming the filterItem.value before it's used for filtering.

[romgrk]

Note that the valueGetter, valueFormatter and proposed filterValueGetter APIs create a performance bottleneck in their current form. They will need to go through the same transformation we did in #9254 to be efficient.

[ehsanshahidi]

There is a valueGetter under filterParams too. Does that server the same purpose?

[romgrk]

@ebengtso Please refer to github's docs for code formatting if you want to share snippets of code, and use stackblitz or codesandbox if you want to share runnable examples.