TableSkeleton

The first paint of a table whose rows are loading: the same frame, header, row height and column shapes, announced as loading. Once rows exist, keep them and dim them with DataTable’s isUpdating instead.

Language

Appearance

A contacts list

import { TableSkeleton } from '@arbol-ai/ui';

<TableSkeleton
  columns={[
    { kind: 'avatar-text', width: 'w-32', withSubtext: true },
    { kind: 'badge', headerWidth: 'w-14' },
    { align: 'end', headerWidth: 'w-20', width: 'w-12' },
    { kind: 'actions' },
  ]}
/>

Standard rows

import { TableSkeleton } from '@arbol-ai/ui';

<TableSkeleton columns={[{ width: 'w-40' }, { width: 'w-28' }]} density="standard" rowCount={3} />

Source

The examples above are src/components/table-skeleton/table-skeleton.examples.tsx, which the library’s tests render too.