[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 <#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.

[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

[tompinnacle]

Maybe I'm being daft here, but I'm struggling with accessing any of items you mentioned above.

True, I'm using a v-data-iterator rather than v-data-table, but I have added the ref and @update like this

<v-data-iterator
          :items="properties"
          :rows-per-page-items="[25,50]"
          :search="search"
          :loading="loading"
          row
          wrap
          content-tag="v-layout"
          ref="propPanelIter"
          @update:pagination="pleaseWork()"
        >

and have the pleaserWork method as per...

pleaseWork () {
      console.log('page test')
      console.log(this.$refs)
      console.log(this.$refs.propPanelIter.$children[0])
    },

The log out of this.$refs shows the propPanelIter, which I can expand and see filteredItems and the $children array, but anythig I try to access on propPanelIter always returns can't read property of undefined.

[PushyPants]

@tompinnacle (most likely) the reason you're having an issue is that you're looking for the ref at the same time the DOM is being updated. That's why when you try to access it, it's undefined. It doesn't exist until it's fully written to the DOM. I had this problem a bunch when I first started developing VUE... luckily vue has a built in method for dealing with this called NextTick. Here is a link to the docs but I'll give you a short rundown on it here.

Basically it waits until the DOM has completely updated to run the callback function you provide. So like in your case... you want to run pleaseWork() after the pagination has finished updating the DOM, you'd do something like this:

    pleaseWork() {
      this.$nextTick(() => {
        console.log("page test");
        console.log(this.$refs);
        console.log(this.$refs.propPanelIter.$children[0]);

        //whatever else you want to run that needs access to propPanelIter
      });
    }

That should fix you up

[tompinnacle]

@PushyPants Thanks for the reply, it has certainly reduced the number of errors.

However, I still can't find the data I'm looking for. I'm trying to find the paged list of items, ie the 25 items that back the current page. The console.log(this.$refs) displays them as filteredItems if you drill into propPanelIter, but it's undefined if you console.log it at the same time.

Interestingly, once you have started a search it is there.

I'm caught between a rock and a hard place, I have list 12000+ items to display, I have a fairly nasty query to calculate 3 values to display on each of the 12000 items. So rather than running a really horrible back end query that gets the 12k with their 3 values I was hoping to page them and per page of 25 run 25 calls to get the extra 3 values.

This is looking to be difficult to say the least, so I'm also looking at server side pagination, which would solve the issue, but of course then search goes out the window, and as you can imagine with 12k+ items, that is pretty important!

[PushyPants]

@tompinnacle if I'm reading this correctly:

I'm trying to find the paged list of items, ie the 25 items that back the current page.

You probably don't need to reference refs at all. Both <v-data-table> and <v-data-iterator> have an event called 'current-items'. On mount it will fire and show you the first page and any time any of the items in a page change (or you paginate) it will fire again.

If you're just looking for the data of the items on the current page, then you can get that this way:

In the template

      <v-data-iterator
        :items="properties"
        :rows-per-page-items="[25,50]"
        :search="search"
        :loading="loading"
        row
        wrap
        content-tag="v-layout"
        ref="propPanelIter"
        @current-items="pleaseWork"
      >

pleaseWork without the '()' will automatically pass the data through to your function. If you'd like to explicitly pass the data or need to add other parameters to your function you can use pleaseWork($event) and if need be, pleaseWork($event, param2, param3)

in the script

    pleaseWork(data) {
      console.log(data)
      //manipulate the data however you want from here
    }

[KaelWD]

I'm also looking at server side pagination, which would solve the issue, but of course then search goes out the window

You can sort, paginate, and filter server-side.

I don't know why this issue has been left open for so long @current-items was added in #5737 and is emitted whenever computedItems changes.

[arjan-bal]

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);

When I tried this, I was getting an error which said that can't access property length of null. Changing this.$refs. refName.customSortWithHeaders to this.$refs. refName.$children[0].sortItems worked however.

[brunodaga]

Any news on this feature ?

[klukiyan]

I'm also looking at server side pagination, which would solve the issue, but of course then search goes out the window

You can sort, paginate, and filter server-side.

I don't know why this issue has been left open for so long @current-items was added in #5737 and is emitted whenever computedItems changes.

@current-items doesn't help as it shows only items on the page. More useful would be something like @filtered-items to access all filtered items regardless if they are on the page 1 or else.

[MND13]

up

[raulfb]

I'm also looking at server side pagination, which would solve the issue, but of course then search goes out the window

You can sort, paginate, and filter server-side.
I don't know why this issue has been left open for so long @current-items was added in #5737 and is emitted whenever computedItems changes.

@current-items doesn't help as it shows only items on the page. More useful would be something like @filtered-items to access all filtered items regardless if they are on the page 1 or else.

It would be great that create @filtered-items

[snwokenkwodeeprootanalytics]

Why was this closed?

[nehuenpereyra]

This worked for me:

sortedFilteredItems () {
      const items = this.$refs.refName.$children[0].filteredItems
      const sortBy = this.$refs.refName.$children[0].scopedProps.options.sortBy
      const sortDesc = this.$refs.refName.$children[0].scopedProps.options.sortDesc
      return this.$refs.refName.customSortWithHeaders(items, sortBy, sortDesc)
}

[bob-lee]

@current-items was the exact thing I needed today. BTW I was waiting for v3 for a while to upgrade my project, found v3 table component doesn't have this event (also no :item-class).

[PabloRN]

@bob-lee any finding on that

[bob-lee]

@PabloRN nothing new, my project still using v2 and it needed to find current items when pagination changes. Current items can be found by following above suggestion.

[PabloRN]

@bob-lee thx for the prompt response. Well, I'm using vuetify 3 with vue 3 and I can't find anything related in the ref object.
Cheers