Filter table with null value

UI Components for Vue
Post Reply
Posts: 7
Joined: 19 Sep 2019, 13:32

20 Jul 2020, 21:18

What is the best way to filter the values of an object if that object does not always exist. For example, using the showcase, ... ble/filter and filtering on the following column:

Code: Select all

<Column header="Country" filterField="" filterMatchMode="contains">
        <template #body="slotProps">
            <span class="p-column-title">Country</span>
            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' +" width="30" />
            <span class="image-text">{{}}</span>
        <template #filter>
            <InputText type="text" v-model="filters['']" class="p-column-filter" placeholder="Search by country"/>
if the value of country in the filterField is null, then filtering does not work and the following error happens
TypeError: Cannot read property 'name' of null
This error of course happens after modifying the template body to account for country being null, but it is not possible to do that with the filter since all you're able to do is specify the field name, and not give any conditions of what to do if the field is null.

Is there any way to mitigate this issue?

Posts: 7
Joined: 19 Sep 2019, 13:32

21 Jul 2020, 16:03

Solved my own problem. I didn't see the custom filter mode. I was able to implement a custom filter function to handle cases where the object is null.
For example

Code: Select all

<Column header="Country" filterField="country" filterMatchMode="custom" :filterFunction="filterByCountry">
Within the filterByCountry function, I am able to account for the rows where country may be null.

Posts: 18331
Joined: 05 Jan 2009, 00:21
Location: Cybertron

23 Jul 2020, 11:00

Glad to hear your issue is resolved, thanks for sharing.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests