VDataTable server-items-length pagination mismatch with custom server-side filters
0 reputation · 26 Apr 2026, 23:10 UTC
Pagination count diverges from filtered result set
When using VDataTable in server mode with a custom filter function, the server-items-length prop controls the pagination component's page count calculation. The API documentation describes this prop as "Total number of items" without specifying whether it should represent the unfiltered database total or the filtered subset returned by the server.
Observed behavior
If server-items-length is set to the total row count before filtering while the items array contains only the filtered results, the pagination renders page numbers based on the larger total. This produces empty pages and incorrect last-page navigation. The component does not automatically re-fetch items when the filter prop changes unless page or sort also change, so the filtered count must be supplied explicitly.
Constraint
Vuetify 3.7+ requires server-items-length for server mode, but migration guides and TypeScript types do not clarify the filtered-versus-total expectation. The internal Pagination component computes pageCount directly from this prop with no hook to reconcile client-side filter discrepancies.
Should server-items-length always reflect the filtered result set size? Is a watcher on the filter prop that updates both items and server-items-length the intended pattern? Does VDataTableServer composable impose the same contract?
vuetify