How to get filtered items from a v-data-table?

[ottopaulsen]

When I use the search property on a v-data-table, is there any good way to get the filtered items?

(I don't think is it a good solution to filter the JSON values of the items using the Array.filter function.)

[nickmadev]

Hi, @ottopaulsen
I have some experience with v-data-table, could you provide more context for me?
(Like your code, or situation)

[nickmadev]

If you want to update the performance of your application, you can add async manipulation for delay.
In my opinion, filtering by search is going in vuetify internally, so before that, you can reduce the number of update.
You can add async setTimeout delay(ex: 300ms), in watch or change function.
If you share your context, or purpose more clearly, I can listen any time.
Thanks! Good Friday.

[ottopaulsen]

I have a text input and I am usin it for the standard search attribute on the table. I just want to know exactly what rows that are visible when som rows are filtered by search.

[nickmadev]

Do you want to know which columns of the table are filtered by search value?
Or update performance?

[ottopaulsen]

No, which rows that satisfies the filter.

[nickmadev]

Please refer following url. When search is changed, v-data-table is filtered automatically.
https://jsfiddle.net/ssrv_/yd8sawv7/

[ottopaulsen]

Of course, but I need to programatically know what rows that are visible. The items list is not changed by the search.

[nickmadev]

If so, you can try another way. You don't need to use search props.
Instead of search props, you can update items itself by computed.
When filter condition is changed, you can store filtered items to vuex.
In this handleChange function, as I mentioned before, if you use async delay, you can avoid performance lose.
But Array.filter is necessary in the handleChange function.

[ottopaulsen]

Thank you for trying. I have found a workaround that is good enough for me, but I think it is sad that this feature is missing.

[nickmadev]

Sounds good, could you share your result for me?

[ottopaulsen]

I found that I only need search on one column, so I use filter-keys with that column, and then use a computed filtering that column using String.includes().

[nickmadev]

Okay, thanks for your sharing.
I have another question.
In common sense, on frontend, default search function is not used, because search function is calculated on API side.
For the performance problem, developers are not trying to fetch whole data at once.
Usually, data for only one page is fetched from API side.
If you can ignore such performance conditions, you can also accept the computational problem of Array.filter().

[ottopaulsen]

And what is your question?

[nickmadev]

oh, yes. I want to know your opinion.
And in your project, did you fetch whole data at once?
If so, did you feel heavy actions when you use default search function of v-data-table?
I want to confirm that my opinion is right or not.

[ottopaulsen]

Some times the search result is not very large, and will never be. In such cases paging is overkill, and then search is a nice function. Also, data do not always come from a backend :-)

[Landom3562]

There is a prop available for v-data-table in vue3 named @update:current-items that gives the current showing items in the table.