DataTable: Global SearchBar doesn't work with Date

[LovisCoding]

Describe the bug

Hi, In your example of using DataTable with advanced_filter we can't search the Date Column in the upper right SearchBar. See : https://primereact.org/datatable/#advanced_filter

Reproducer

https://stackblitz.com/edit/hhcpxt?file=src%2FApp.jsx

PrimeReact version

10.6.3

React version

18.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Type a date in the Keyword Search

Expected behavior

When we search a Date it work.

[melloware]

There is no date in that Advanced Search: globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']}

[github-actions[bot]]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[LovisCoding]

Ok, this is not a bug but when u say 'keyword Search' we expect a search in all fields added 'date' but change nothing https://stackblitz.com/edit/hhcpxt?file=src%2FApp.jsx

[LovisCoding]

I think the Search bar doesn't work with Date because it's an Object and not a String.

[melloware]

Agreed I marked it as an enhancement.

[LovisCoding]

Perfect, Thank you !

[KirilCycle]

Keyword searching don't work with balance to. Since data fields store values differently from those displayed in table, how a value is displayed depends on how the specific body function represents it as a string.

Solution

When filtering, check if the current field value is a string, if not, use the appropriate body function to represent it as the same string that appears in the table. We can get the specific body function from the DataTable props, since we know the name of the current field, we can get the corresponding column body function from the array of child DataTable props.

@melloware Hello! What do you think about this approach, should i open a PR ?

[melloware]

i would say raise the PR for review.

[KirilCycle]

@melloware Hello! I can allow users to pass the same function they used to convert a date or number to a string in their own format?

It would look like this Inside the keywordsearch logic, I would use this methods to convert the date to a string in the same format as the user displays the date in the datatable. Is this approach worth trying, or additional props make it too complicated for users?

[melloware]

Not sure about that approach....