Is there any way to get the length of filtered items in the Vuetify data-table? When the rows are filtered the length of shown items obviously decreases and I need to know how many items there after the filter, because I need to update my external pagination component.
3 Answers
Assuming you are using vuetify 2.2.x you can use the pagination event of v-data-table.
<v-data-table
@pagination="yourMethod"
...
to call your method
methods: {
yourMethod(pagination) {
console.log(pagination.itemsLength) // length of filtered/searched items in Vuetify data-table
},
the pagination parameter passed by the pagination event to yourMethod contains the following informations:
{
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
}
I assume you're using search property in order to filter out your data. If so you need to add reference to your table ref="myTable".
Then you can grab array of filtered items like this: this.$refs.myTable.selectableItems.
If it's some other filter method approach is the same - using refs.
I did it by putting a watch on my search field and the data that is being shown. I also had to add a timeout, because otherwise, it will display the current amount of records showing before the search takes place.
@Watch('search')
@Watch('table.data')
onSearchChanged() {
setTimeout(() => {
const table = (this.$refs.dynamoTable as any);
this.filteredItemCount = table?.itemsLength || 0;
}, 1200);
}
I did this, so that I could show search hint.
get searchHint(): string {
const count = this.filteredItemCount;
const total = (this.table.data?.length)
? this.table.data.length
: 0;
return this.$t('search_records', { count, total });
}
It then shows up correctly on my search text field as a search hint.
<v-text-field class="ml-2"
v-model="search"
prepend-inner-icon="filter_list"
:disabled="!table.data || !table.data.length"
:label="$t('filter')"
clearable
:hint="searchHint"
:persistent-hint="true"
/>
This is on version 1.5.24 of Vuetify.
Related