There's an undocumented way of accessing the computedRows
and computedRowsNumber
properties that I only found after extensive Google searching...
- Give your table a ref:
<q-table ref="table" />
- Access these properties via the ref:
this.$refs.table.computedRows
this.$refs.table.computedRowsNumber
This was added in v2.0.0-beta.9 (March 8, 2021)
Explanation
computedRows
-- gives you the displayed rows on current page
- Example: if there are 30 results in total, but only 10 are shown in the current page, this will only return those 10 rows -- want them all? see filteredSortedRows
filteredSortedRows
-- gives you ALL the displayed rows across all pages
- Example: if there are 50 rows in total, but 30 rows match the filtered text and show up, and 10 rows are shown per page, this will return ALL those filtered 30 rows. If there's no filtered text, then this will return all those original 50 rows
computedRowsNumber
-- gives you the length for the total displayed rows across all pages
- same as
filteredSortedRows.length
When server-side data fetching is enabled the properties above may behave differently. I had to check the source code to discover that, but haven't tested this in practice.
Source | Where I found it