SkeletonTable
Displays placeholder rows with Table cell padding, borders, and header styling.
Props
SkeletonTable extends HTMLAttributes<HTMLDivElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 5 | How many body rows to draw. |
columns | number | CSSProperties['width'][] | 4 | Column count or array of column widths. |
header | boolean | true | Draws the header band above the rows. |
animation | SkeletonAnimation | "shimmer" | "shimmer" | "pulse" | "none". |
Examples
Default
Column widths
Headerless
Drop the band when the real table's header is already rendered: the columns are known before the rows are, and re-drawing the header as a placeholder makes the page flash.
import { SkeletonTable } from "@solarius/onset";
{
loading ? (
<SkeletonTable rows={8} columns={["20%", "45%", "30%", "25%"]} />
) : (
<Table>…</Table>
);
}On a re-fetch of a table already on screen, use LoadingOverlay instead; it keeps the rows and the reader's scroll position.