Empty table body when items prop is undefined in VDataTable

Answering the Core Question

When items is undefined or null in a VDataTable, Vuetify simply renders an empty <tbody> and emits a Vue prop‑type warning. The component does not default items to an empty array; it just skips row rendering.

Why the Empty Body Appears

• Prop validation – Vuetify expects items to be an array; undefined fails the type check.
• Render logic – The table body is populated by iterating over items. If the array is missing, the loop produces no rows.
• Server‑items mode – When server-items is true, the component still requires a valid items prop (even an empty array) to know whether to show the No data slot or pagination.

Confirming the Issue

1. Open the browser console: a warning similar to Vuetify: Prop "items" is required but was not provided. should appear.
2. Inspect the DOM: an empty <tbody> indicates that items was undefined.
3. Use Vue DevTools to check the actual prop value at render time.

Practical Fixes

• Provide an empty array: items: []. This keeps the table structure, shows the No data slot, and keeps pagination controls functional.
• Use the v-slot:no-data slot to display a custom message when the dataset is empty.
• Wrap the data fetch in a computed that guarantees an array: computed: { tableItems() { return this.fetchedData ?? [] } }.
• If you rely on server‑items mode, always emit page changes when filters or page size change; Vuetify will not clamp page automatically.

When Is a Warning Emitted vs. Empty Body Rendered?

• A warning is emitted whenever items is undefined or null at render time.
• The empty body is rendered regardless of the warning; the component simply has nothing to iterate over.
• If items is an empty array, no warning occurs, the body remains, and the No data slot is shown.

Server‑Items Mode and Page Management

In server‑items mode, Vuetify does not automatically reset v-model:page when filters, search, sort, or items‑per‑page change. The developer must:

• Listen to update:page events and adjust the query parameters sent to the server.
• Clamp page to Math.ceil(total / itemsPerPage) after receiving the new total from the API.
• Provide a stable items array (or empty array) to keep the table skeleton intact.

Missing Diagnostic Detail

To tailor the recommendation further, could you confirm which Vuetify version you are using (v2.x or v3.x) and whether you are operating in server-items mode?