---
title: "Table"
description: "Styled HTML table primitives."
section: "Libraries"
group: "UI components"
order: 520
---

## Usage

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@aeontel/ui";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {agents.map((a) => (
      <TableRow key={a.id}>
        <TableCell>{a.name}</TableCell>
        <TableCell>{a.status}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>;
```

## Exports

### `Table`

Root `<table>` element.

```ts
Table(props: React.ComponentProps<"table">): JSX.Element
```

### `TableHeader`

`<thead>` section.

```ts
TableHeader(props: React.ComponentProps<"thead">): JSX.Element
```

### `TableBody`

`<tbody>` section.

```ts
TableBody(props: React.ComponentProps<"tbody">): JSX.Element
```

### `TableFooter`

`<tfoot>` section.

```ts
TableFooter(props: React.ComponentProps<"tfoot">): JSX.Element
```

### `TableRow`

`<tr>` element.

```ts
TableRow(props: React.ComponentProps<"tr">): JSX.Element
```

### `TableHead`

`<th>` header cell.

```ts
TableHead(props: React.ComponentProps<"th">): JSX.Element
```

### `TableCell`

`<td>` body cell.

```ts
TableCell(props: React.ComponentProps<"td">): JSX.Element
```

### `TableCaption`

`<caption>` element.

```ts
TableCaption(props: React.ComponentProps<"caption">): JSX.Element
```