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 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>[email protected]</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

API Reference

Examples

Table with Pagination