Skeleton table

Show design guidelines

A compact table “shell” (header bar) for loading. Place it in an absolutely positioned layer over the area where a real certara-table will appear; keep the parent position: relative with a defined min-height so the skeleton is visible. The host exposes role="alert" and aria-label="Loading...".

Code

Framework HTML React Angular

Toggle dark mode

<div style="height: 250px;">
  <certara-skeleton-table class="p-2"></certara-skeleton-table>
</div>

import { CertaraSkeletonTable } from '@certara/certara-ui-react';

<div style={{ height: '250px' }}>
  <CertaraSkeletonTable className="p-2" />
</div>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<div style="height: 250px;">
  <certara-skeleton-table class="p-2"></certara-skeleton-table>
</div>

certara-skeleton-table

Properties

This component does not declare public properties; control layout with CSS and a positioned wrapper. See the Table page for a loading overlay with real data.

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

There are no slots available for this component