[Documentation] code example of v-data-table prop filterable is not showcasing filterable

[YannikWeissenfels]

Environment

Vuetify Version: 3.6.10
Vue Version: 3.4.30
Browsers: Chrome 126.0.0.0
OS: Windows 10

Steps to reproduce

https://vuetifyjs.com/en/components/data-tables/data-and-display/#filterable
https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/prop-filterable.vue

Expected Behavior

Expected the v-data-table to be "Nutrition"

Actual Behavior

The v-data-table is "Find a Graphics Card"

Reproduction Link

https://vuetifyjs.com/en/components/data-tables/data-and-display/#filterable

Other comments

The actual example doesnt showcase the prop filterable.

[c4mbr0nn3]

I think there is no filterable props in v-data-table. I cannot find it in API docs or in code.

[lmunch]

There is some mention about "filterable" props in docs (packages/docs/src/pages/en/components/data-tables/data-and-display.md) but it indeed seems like its not implemented. I would was just needing such a feature. Perhaps there is a work-around with a custom filter?

[MajesticPotatoe]

the proper prop is called search

[lmunch]

There is no mention of search prop here:
https://vuetifyjs.com/en/api/v-data-table/#props-headers

Tried the following to no avail:
headers: [
{ title: 'Type', key: 'icon', align: 'start', search: false},
{ title: 'Name', key: 'name', align: 'start', search: true },
{ title: 'Owner', key: 'owner', align: 'start', search: false },
{ title: 'Group', key: 'group', align: 'start', search: false },
{ title: 'Time', key: 'mtime', align: 'start', search: false }
],

[MajesticPotatoe]

There is no mention of search prop here: https://vuetifyjs.com/en/api/v-data-table/#props-headers

Thats because its not a part of the header props, its a data-table prop (and is shown in the "filterable" example
https://vuetifyjs.com/en/api/v-data-table/#props-search

there is a filter in the headers prop thats used to disable a column from being filterable or apply a custom filter just for that single column which is what the example description was trying to say

[c4mbr0nn3]

I achieved similar behavior using the filter-keys prop for v-data-table. You need to populate it with keys you want to be filterable. You can use filterable field in headers objects and then create a computed to create the filter-key array.

[lmunch]

@c4mbr0nn3, I am not sure I follow. Do you mind showing an example?

I am currently using a custom filter where columns.name is the only column I want to filter on, but this get called for all cells which is not very nice:

    filterOnlyName(value: string, query: string, item: any) {
      return value != undefined &&
        query != null &&
        value === item.columns.name &&
        value.indexOf(query) !== -1
    },

[MajesticPotatoe]

:filter-keys="['name']" will only filter on the name prop in the item
example

If you have specific questions about how to use Vuetify please check out the following resources:

• Discord community
• Github Discussions

[lmunch]

@MajesticPotatoe, thanks a lot.