---
title: "TableSkeleton"
description: "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."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TableSkeleton

## A contacts list

```tsx
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

```tsx
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`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/table-skeleton/table-skeleton.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/feedback/table-skeleton/index.mdx