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.

There are no public properties available for this component

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