---
generate_toc: true
---

import { ComponentExample } from "@/components/ComponentExample"
import { ComponentReference } from "@/components/ComponentReference"

export const metadata = {
  title: `Table`,
}

# {metadata.title}

A component that displays data in a structured table format.

In this guide, you'll learn how to use the Table component.

<Note>

If you're looking to add a table to your Medusa Admin customizations with advanced features like filters, search, sorting, and bulk actions, refer to the [DataTable](../data-table/page.mdx) component instead.

</Note>

<ComponentExample name="table-demo" />

## Usage

```tsx
import { Table } from "@medusajs/ui"
```

```tsx
<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>#</Table.HeaderCell>
      <Table.HeaderCell>Customer</Table.HeaderCell>
      <Table.HeaderCell>Email</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>1</Table.Cell>
      <Table.Cell>Emil Larsson</Table.Cell>
      <Table.Cell>emil2738@gmail.com</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
```

---

## API Reference

<ComponentReference mainComponent="Table" componentsToShow={[
  "Table",
  "Table.Pagination"
]} />

---

## Examples

### Table with Pagination

<ComponentExample name="table-pagination" hideFeedback />