vuetify: [Bug Report][3.3.1] VDataTable customFilter cannot access item.raw

Environment

Vuetify Version: 3.3.1 Last working version: 3.2.5 Vue Version: 3.3.4 Browsers: Google Chrome OS: Windows 10

Steps to reproduce

Use the reproduction link with Vuetify 3.3.1 and enter vanilla in the “Flavor search” input field. Notice there is nothing found. Then, set Vuetify to 3.2.5 and enter vanilla. Notice there are 2 items found. The flavor search uses a custom filter that searches a hidden “flavors” item property, which is accessed using item.raw within the filter function.

Expected Behavior

Custom filter should be able to access item.raw.

Actual Behavior

Custom filter throws an error in the console: “cannot read properties of undefined” (because item.raw is undefined).

Reproduction Link

https://play.vuetifyjs.com/#…

Other comments

The line below was changed from 3.2.5 to 3.3.0. As of 3.3.0, only item.columns are accessible within custom filters in VDataTable. In v3.2.5 and earlier, item.raw was also accessible, allowing us to implement custom filters that access hidden item properties.

https://github.com/vuetifyjs/vuetify/blob/9d4b9d1b76b095db8637761c2f2595d9472ccb29/packages/vuetify/src/labs/VDataTable/VDataTable.tsx#L120

Can “item.raw” accessibility be restored in custom filters in VDataTable? Thank you for considering this issue.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 16 (6 by maintainers)

Commits related to this issue

fix(filter): always pass raw item when using transform fixes #17487 — committed to vuetifyjs/vuetify by johnleider a year ago
fix(filter): always pass InternalItem to custom filter function (#17832) fixes #17487 Co-authored-by: Kael <kaelwd@gmail.com> — committed to vuetifyjs/vuetify by johnleider 10 months ago

Most upvoted comments

Sorting should have access to the full item too: #16654

KaelWD on Jun 2, 2023

Right now I’m toying with the idea to expose the transform function as a prop, something like filterTransform. So for v-data-table the default value of it would be item => item.columns but if you need to access raw object you can pass item => item.raw instead.

nekosaur on Jun 17, 2023

@nekosaur, good point about the apparent disconnect between input and output. One use case is a custom filter that searches expandable rows within a table. The custom filter would need access to the expanded-row data, which may include fields in item.raw. Reference: https://vuetifyjs.com/en/components/data-tables/basics/#expandable-rows

    <template v-slot:expanded-row="{ columns, item }">
      <tr>
        <td :colspan="columns.length">
          More info about {{ item.raw.name }}
        </td>
      </tr>
    </template>

ctrueblood-epri on May 30, 2023

I legit just pushed some changes for this like 5 minutes before you posted.

KaelWD on Aug 18, 2023

We’ve just hit this too. Seems like its broken all of our customFilters because we relied on the raw object being passed through.

cadriel on Jun 13, 2023

I have same issue. @KaelWD can you provide approximate time when team fix this? For my project this is core problem for now.

bobrov-site on Jun 5, 2023

This was one thing I was afraid of when doing the change for 3.3.0. So yes I think we need to solve this somehow.

But at the same time, to me it feels quite strange to filter on data that is not visible in the table. There is a disconnect between the input and output…

nekosaur on May 30, 2023