EEnterUI
DocsComponentsThemesDonation
Get Started
      • EmptySearchResult
      • SkeletonTable
      • LogViewer
      • JsonViewer
      • DiffViewer
EnterUIDocsData AnalyticsTables and DataData States and ToolsSkeletonTable
Data AnalyticsUpdated 6 May 2026

SkeletonTable

Loading placeholder shaped like a table or data grid while real rows load.

SkeletonTable renders a header row plus skeleton rows so a table surface keeps its dimensions while data is loading.

#Default usage

Loading rows

Defaults to 4 columns × 5 rows.

Code
<SkeletonTable />

#Import

Code
import { SkeletonTable } from "@froggdesign/enter-ui-react";

#Accessibility

The wrapper exposes aria-busy="true" and aria-live="polite" so assistive tech announces the loading state. Replace the skeleton with the real table once data arrives so focus stays predictable.

#API

  • columns: number of columns (default 4).
  • rows: number of skeleton rows (default 5).
  • dense: pass through Table density.
  • showHeader: hide the header row when false.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousEmptySearchResult
NextLogViewer

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling