primevue icon indicating copy to clipboard operation
primevue copied to clipboard

DataTable: improve globalFilterFields type

Open szymonmindfuel opened this issue 1 year ago • 1 comments

Describe the bug

Hello everyone,

We needed to implement custom search logic for a table row property that was an array. The specs say that globalFilterFields is a type of string[] but it seems that it also takes a function instead of string. So custom filtering actually works. The below example works just fine, eq.

<DataTable
      ...
      :globalFilterFields="[
        'name',
        'country.name',
        'representative.name',
        'status',
        (d) =>
          Array.isArray(d.country)
            ? d.country.map((c) => c.name).join(' ')
            : d.country.name,
      ]"
/>

Reproducer

https://stackblitz.com/edit/husnuh-yncidy?file=src%2FApp.vue,src%2Fservice%2FCustomerService.js

PrimeVue version

^3.46.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome

Steps to reproduce the behavior

Check this example

  1. Here I modified one record (id: 1001) so the country is an array with two countries.
  2. The globalFilterFields takes also a method as one of the list items
  3. Table search works correctly and also filters by countries that are arrays
  4. Countries declared as arrays are not displayed properly because I didn't handle it but that's a correct behavior

Expected behavior

globalFilterFields type should be improved by adding a function to it.

Something like:

globalFilterFields: (string | ((rowData: unknown) => string))[]

szymonmindfuel avatar Feb 05 '24 10:02 szymonmindfuel

Thanks a lot for your report! I set a milestone for it. We'll check it before the milestone is released. Also, you can send a PR for it if you want ;)

mertsincan avatar Feb 09 '24 10:02 mertsincan