DataTable: ColumnFilter doesn't support column fields which are functions

[ansteele]

Describe the bug

DataTable/Column supports a field value which is a function, this is passed the data row to retrieve the column value out.

If you apply filtering to that column, the ColumnFilter component treats the column.field value as a string (it first throws a prop type warning and then DataTable.executeLocalFilter uses ObjectUtils.resolveFieldData with the field function coerced to a string to get the data (which obviously fails).

Reproducer

Sandbox

I had some trouble reproducing the issue in the sandbox, and ultimately the table overall isn't rendering now.

PrimeVue version

3.29.2

Vue version

3.x

Language

ES6

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

Essentially if you use a function as your 'field' prop for a Column (getValue in the sandbox), you can't then apply a filter to that column as the filtering system requires the 'field' (key of filters) to be a string that can then be used to access the field value within the row that the filter is applied to.

If you specify a function as the key within the filters object (as in the sandbox), JS converts it to a string and it can no longer be used to retrieve the value when applying the filter in DataTable.vue - executeLocalFilter. This might just be a permanent shortcoming for the DataTable filtering system but I didn't see it mentioned in the docs anywhere.

Expected behavior

The table filter works as expected.

Actual behavior

DataTable.vue - executeLocalFilter will pass a stringified version of the field function into ObjectUtils.resolveFieldData and the function will fail.

[github-actions[bot]]

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.

[ansteele]

I've added some more information into the ticket. :)

[mrgauthier]

Bump. I'm experiencing the same thing. I can get the Column to render the value per row based off my function, but the filter function fails.

[snoozbuster]

I have this same issue. All I did was try to pass a function to the filterField prop, which the proptypes claim it supports:

But doing so causes the exact same issue as described in the OP. As far as I can tell, there is no code which actually resolves this function into a string. This is a shame because this functionality is exactly what I wanted.

[joseph-sm]

Bump. Same issue here with primevue 3.35.0, when I try and use it I get a 500 error.

We really need this functionality and would appreciate an update or a workaround possibly with custom filter / FilterService example?

Example:

<Column
...
:filter-field="getFilterField"
/>

const getFilterField = (item: any) => {
    return 'field.in.the.data`;
}

Throws

"TypeError: Cannot read properties of undefined (reading 'value')"