Vuetify: [Feature Request] Way to retrieve (watch) the filtered Items from the searchTableItems function of a VDataTable?

[timitalia]

Problem to solve

How to retrieve (watch) the filtered Items from the searchTableItems function of a VDataTable?
For e.g. with

    mounted: function () {
            this.$watch(
                "$refs.tableRefName.items",
                 (new_value, old_value) => (this.searchData = new_value)
            );
    },

$refs.tableRefName.items returns all items of the table, although I filtered the Data Table Items using a standard search input field and seeing the filtered results with

<v-data-table  :search="search" ...

"$refs.tableRefName.items" still contains all (unfilterd) items.

Proposed solution

I was hoping to find something like "$refs.tableRefName.filteredItems" or "$refs.tableRefName.searchTableItems" to retrieve the filtered Items but didn't.

Cheers Tim

[timitalia]

Thanks a lot for th suggestion to use $refs.transactionsTable._data.internalCurrentItems !
The problem with this is pagination when the amount of filtered Items is
bigger than the Rows per Page number (which is the case for me).
this.$refs.tableRefName._data.internalCurrentItems only gives me back the
filtered Items of the current table page which I'm looking at. I would need to retrieve the entire filtered table Items from the search.
Any further suggestions are much appreciated.
Cheers Tim

Am Do., 12. Sept. 2019 um 09:36 Uhr schrieb FF128 <[email protected]

:

Try to get the filtered items w/ this code:
this.$refs.tableRefName._data.internalCurrentItems

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/8731?email_source=notifications&email_token=ALZF4QCVEWLW52XHIUVVOMDQJHWORA5CNFSM4IPOXZKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6Q6RDI#issuecomment-530704525,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALZF4QBLOK64R2PPXUNTHPDQJHWORANCNFSM4IPOXZKA
.

[JackLilhammers]

Shouldn't it be the default behaviour?
I mean exposing just the current page items seems more of a customization rather the expected usage.
Maybe you could add a current-page-items event and let current-items emit all filtered items.

[rezatati]

Hi
Any update on this
I need this feature

[JackLilhammers]

I filter the data with 3 filters (by date and by text search) and then export the result to csv.
I resolved by getting all the items with this.$refs..items and then filter before exporting, but it's inefficient at least, because I filter n+1 times: n with the datatable and 1 when exporting.

In pseudocode:

@current-items="updateFiltered"

updateFiltered(items)
{
    if (this.$refs.<name>)
        this.filtered = this.$refs.<name>.items
    else
        this.filtered = items
},

downloadData()
{
    let data = this.filtered
        .filter(this.filterByDateAgain)
        .filter(this.filterSearchAgain)

    exportToCsv(this.filtered)
}

Right now it seems the only way, until this is fixed.
In the meantime if there's something wrong with my approach please tell me, I'm a firmware developer with little experience with web development.
Btw I'm talking about fixing because it looks way more like a bug than a missing feature

[rezatati]

Hi
I am waiting for this too. it is too mandatory please add this feature
Thanks a lot

[MatthiasDamm]

Any news on this?

[YangAi]

This would be super helpful.

[PushyPants]

Until it there is an official solution, I was able to find the search results nested in the refs.

$refs.refName.$children[0].filteredItems

[spectrum128]

This would be super helpful! Thanks to @PushyPants for current workaround. My use case is I want to filter the items in the datatable and then be able to retrieve them to export the list to a csv file.

[shaswa]

Thank you, @PushyPants for the workaround!

[akorolyov]

Thank you, @PushyPants!

improved solution with sorted records

let items = this.$refs. refName.$children[0].filteredItems;
let sortBy = this.$refs. refName.$children[0].options.sortBy;
let sortDesc = this.$refs. refName.$children[0].options.sortDesc;
let sorted = this.$refs. refName.customSortWithHeaders(items, sortBy, sortDesc);

[kvanska]

you can also directly get sorted and filtered items:

let items = this.$refs.refName.$children[0].computedItems

[andrey-helldar]

Elements on the current page, taking into account pagination:
let items = this.$refs.refName.$children[0].computedItems

Total number of filtered items:
let items = this.$refs.refName.$children[0].filteredItems