Easy access to the filtered rows

[thomas-fortin]

Issue Type

• Question

Specs

What version are you using?
v2.21.1

Question

Hi,
I am using vue-good-table in version 2.21.1 (the latest right now), and I need to export my filtered rows (with column filters and a possible global search) but I can't access it.
I have seen in some issues from 2018 that there used to have a variable to handle this, the .filteredRows. I have tried this solution but it seems that it does not exist anymore, here is a code example :

<vue-good-table
  ref="myTable"
  :columns="columns"
  :rows="rows"
  :line-numbers="true"
  :search-options="{
    enabled: true,
    placeholder: 'Search'
  }"
>
</vue-good-table>

Then in my methods, if I try to access to this.$refs.myTable.filteredRows, I have an undefined when I have no filter, or if I have a global search on.

When I log my table like console.log(this.$refs.myTable);, I have no sign of this variable.

So, my question is : Is there a (new) way to easily access to the filtered rows of a vue-good-table, please ?

[thomas-fortin]

Hi,

@xaksis I am still on that problem, and I'd like to avoid a heavy DOM treatment to find out the filtered data of my datatable... Does the plugin give a workout for this, please ?

Thomas.

[xaksis]

hey @thomas-fortin, can you create a jsfiddble to show where you're trying to console.log(this.$refs.myTable). The $refs variable is provided by vue and should be available to access filtered rows if you've actually put a ref on the table component.

Without looking at the code, it'll be tough to guess as to why you aren't able to access things in your $refs

[thomas-fortin]

Hey,

Thanks for your answer, I'll try to make a JSFiddle as soon as possible.

Another question is : Is this filteredRows[0].children variable updated when we make a global search in the data table ? If not, how to access to the rows taking care of columns filters + global search filter, please ?

[xaksis]

The code for this is pretty straight forward. If you look at Table.vue:
https://github.com/xaksis/vue-good-table/blob/master/src/components/Table.vue#L730

processedRows is what you get after filtering/sorting is applied.
paginated is what you want after pagination has been applied.

So in your case, you'd need processedRows[0].children

[thomas-fortin]

Thanks for your answers !

I'll retry this and : or I'll come back to you with a JSFiddle, or close this if it's resolved :)

[xaksis]

You got it, @thomas-fortin. Let me know how it goes.

[thomas-fortin]

I have restarted everything from scratch and it is working now.
I don't know what I did wrong, but indeed what I needed was the processedRow[0].children and not the filteredRow[0].children.

Sorry for the inconvenience, and thanks for your help.

[the94air]

In my case, $refs don't work in computed properties 🥴

$refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties.

https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

[tai-yin]

I'm using 2.21.8.
After checking out the code I find filteredRows is readily available and just not emitted.
I'd be nice if we can have that.

For now to make my program work I just add {rows: filteredRows} to the emit.