DataTable: Column Filter Typescript fix

[fullstackomar]

Describe the bug

I found 2 issues related to datatable If i tried to filter with MultiSelect in datatable the page crash with error

TypeError: filter.trim is not a function

also the addLocale api function when I tried to translate datatable its not working ( i noticed that this issue started to happen in patch 10.3.0 )

// try to add this code to _app.tsx app it was working with version 10.2.0 but stopped working on version 10.3.0+ , i have to add addLocale to the component itself but when adding it to _app.tsx file it doesn't work like it should be in version 10.2.0

addLocale("ar", { contains: "يحتوي على", notContains: "لا يحتوي على", startsWith: "يبدأ بـ", endsWith: "ينتهي بـ", equals: "يساوي", notEquals: "لا يساوي", noFilter: "بدون فلتر", lt: "أقل من", lte: "أقل من أو يساوي", gt: "أكبر من", gte: "أكبر من أو يساوي", dateIs: "تاريخ يساوي", dateIsNot: "تاريخ لا يساوي", dateBefore: "تاريخ قبل", dateAfter: "تاريخ بعد", today: "اليوم", clear: "تعيين فلتر", apply: "نعم", addRule: "إضافة القاعدة", matchAll: "مطابقة الكل", matchAny: "اي تطابق", removeRule: "حذف قاعدة" });

locale("ar");

Reproducer

https://stackblitz.com/edit/vitejs-vite-prpdvs?file=src%2FApp.tsx

PrimeReact version

10.3.0

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

chrome,firefox

Steps to reproduce the behavior

1- create datatable normally with any data 2 - create a MultiSelect function to use in datatable 3- add filterElement to the datatable with the MultiSelect selection 4- when you try to filter with multiple items with MultiSelect it doesn't work and crash the page ( it works fine with dropdown component but not with MultiSelect )

Expected behavior

expected to filter with multiple selected items , also expected to see the translation when trying to change addLocale to _app.tsx file

[melloware]

First your StackBlitz is a mess. Here is how to properly do a locale to Arabic.

https://stackblitz.com/edit/pt46mo?file=src%2Fmain.tsx

You didn't follow the PrimeTek instructions https://primereact.org/configuration/#Locale

[melloware]

Second how do I get your filter.trim issue its not happening for me? Your stackblitz doesn't even have a multi-select filter in it?

[melloware]

Here is a working Multiselect Filter in Arabic: https://stackblitz.com/edit/zwnmig?file=src%2Fmain.jsx,src%2FApp.jsx

Just change the Agent column you will see its all working...

[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.

[fullstackomar]

I am using next.js , maybe its because next.js has the issue , its working on vite but not in next.js not sure why

will try to make an example and upload it here with next js

[melloware]

Nope look at my example it works fine it won't matter next.js or vite you have a bug in your code...

Make sure you have representative: { value: null, matchMode: FilterMatchMode.IN }, correct? as FilterMatchMode.IN for the type of multi-select filter?

[fullstackomar]

will try to debug and tell the results

[fullstackomar]

I found the issue , the issue that I must add filterMatchMode="in" to the column but there is a typescript issue when I did that

No overload matches this call.
  Overload 1 of 2, '(props: ColumnProps | Readonly<ColumnProps>): Column', gave the following error.
    Type '"in"' is not assignable to type 'FilterMatchMode | undefined'.
  Overload 2 of 2, '(props: ColumnProps, context: any): Column', gave the following error.
    Type '"in"' is not assignable to type 'FilterMatchMode | undefined'.ts(2769)
column.d.ts(967, 5): The expected type comes from property 'filterMatchMode' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Column> & Readonly<ColumnProps>'
column.d.ts(967, 5): The expected type comes from property 'filterMatchMode' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Column> & Readonly<ColumnProps>'
(property) filterMatchMode?: FilterMatchMode | undefined
Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".

[melloware]

@fullstackomar here is a TypeScript version it works fine with in...

https://stackblitz.com/edit/ewtchr?file=src%2FApp.tsx

[fullstackomar]

thank you melloware , I was using it inside the Column but I think there is a typescript that needs to be changed inside the column files i used @ts-ignore for now but I think it should be added into the next update

<Column field="city" header="المنطقة" filter filterElement={dropDownTemplate(cities.map((c) => c.value),"choose city")} showFilterOperator={false} showFilterMatchModes={false} filterMatchMode="in" showAddButton={false} style={{ minWidth: "120px" }} />

[fullstackomar]

I added an extra string to the filterMatchMode inside column and the problem is fixed but please if u can add it to the next patch it would be amazing :)

filterMatchMode?: FilterMatchMode | undefined | string;

[melloware]

PR submitted.

[ssode]

Hey all, the change that was made to the type for filterMatchModeOptions seems to have broken the match mode dropdown when supplying custom options as it was relying on the property name being value.

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

[melloware]

@ssode your stackblitz is not even typescript? these changes were only to Typescript defs.

[ssode]

https://stackblitz.com/edit/wwhfur?file=src%2FApp.tsx

[melloware]

@ssode i am still not seeing any compiler Typescript complaining? What exactly is your issue?

[ssode]

@melloware The issue is that the change to the type for filterMatchModeOptions is breaking the match mode dropdown in the filter menu (for me at least). The option isn't getting selected by default and when you do click on it and try to filter it doesn't return any results.

It looks like internally the matchMode on the filter object is being set to the entire object from filterMatchModeOptions:

Since the key was changed from value to matchMode the dropdown isn't handling it correctly, I think either the optionValue prop needs to be set on the Dropdown that gets created to specify the new key or the options need to be mapped back to a { label, value } object here.

https://github.com/primefaces/primereact/blob/308e350423d177e5c6ca2964c888141a65d8a5a3/components/lib/datatable/ColumnFilter.js#L86-L92

[melloware]

@ssode my bad PR submitted: https://github.com/primefaces/primereact/pull/6314

was a cut and paste mistake.

[ssode]

@melloware awesome, thank you!