SkeletonTable
v1.0.2Updated 20 Jul 2026A placeholder for a data grid: a tinted header strip plus a rows x cols body of cells. Cell widths are staggered deterministically so the block reads as real tabular data instead of a uniform grid. Match rows and cols to your page size and the table will not jump when data lands.
Preview
Live · 8 stories▸Why this is recommendedloadingplaceholdertablegrid+3
SkeletonTable showing skeleton placeholders while data loads — table.
- ✓Table rows during an initial fetch
- ✓Data grid waiting on a paginated response
- ✓Admin list view before records arrive
- ✓Report table on first paint
- ✓Search results table while the query runs
- Configurable rows and cols
- Tinted header strip that mirrors a real table head
- Staggered cell widths for a realistic look
- CSS grid columns sized with minmax(0, 1fr)
- role="status" + aria-busy with an sr-only "Loading…" label
- Bordered, overflow-clipped card surface
- i18n: labels prop overrides the sr-only "Loading…" announcement
- ✕Card grids (use SkeletonCard)
- ✕Avatar-plus-label lists (use SkeletonRow)
- ✕Refetching an already-rendered table (keep rows, overlay Progress)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
rowsBody row count. Defaults to 5.
—colsColumn count. Defaults to 4. Note: the prop is `cols`, not `columns`.
—animationShimmer style applied to every cell. Defaults to 'pulse'.
—intensityPlaceholder contrast against the surface.
—labelsOverride the built-in sr-only "Loading…" announcement (i18n). Merged over DEFAULT_SKELETON_TABLE_LABELS.
—