Skeleton preset
Table
Data grid rows
VTableSkeletontable pattern
<VTableSkeleton />
Controls
Data rows only. The optional table header is separate.
The picker cannot show transparency. Type an rgba() value to keep it.
The picker cannot show transparency. Type an rgba() value to keep it.
Implementation
<script setup lang="ts">
import { VTableSkeleton } from "veload";
import "veload/style.css";
</script>
<template>
<VTableSkeleton />
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 3 | Number of repeated text lines, list items, fields or data rows. Clamped to 1–12. Table and dashboard headers are separate; dashboard always includes one fixed header. |
columns | number | 3 | Number of columns in table and dashboard layouts. Clamped to 1–6. |
showHeader | boolean | true | Toggles the table header row. |
color | string | — | Base colour of the placeholder blocks. Falls back to `--v-skeleton-base-color`. |
highlightColor | string | — | Colour of the shimmer highlight. Falls back to `--v-skeleton-highlight-color`. |
animated | boolean | true | Enables the shimmer animation. Reduced-motion preferences always disable it. |
label | string | — | Accessible name announced by the status region. Without a label the skeleton stays hidden from assistive technology. |
About this preset
- A header row and configurable body rows.
- Column count drives the grid template.
- Disable `showHeader` for headerless data grids.