Help

Table

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.

#	Customer	Email	Amount
86078	Jill Miller	32690@gmail.com	€493.00	EUR
42845	Sarah Garcia	86379@gmail.com	¥113	JPY
39129	Josef Smith	89383@gmail.com	$43.00	USD
5548	Elvis Jones	52860@gmail.com	£840.00	GBP
87668	Charles Rodriguez	45675@gmail.com	£304.00	GBP

Was this example helpful?

Usage#

Code
import { Table } from "@medusajs/ui"

Code
1<Table>2  <Table.Header>3    <Table.Row>4      <Table.HeaderCell>#</Table.HeaderCell>5      <Table.HeaderCell>Customer</Table.HeaderCell>6      <Table.HeaderCell>Email</Table.HeaderCell>7    </Table.Row>8  </Table.Header>9  <Table.Body>10    <Table.Row>11      <Table.Cell>1</Table.Cell>12      <Table.Cell>Emil Larsson</Table.Cell>13      <Table.Cell>emil2738@gmail.com</Table.Cell>14    </Table.Row>15  </Table.Body>16</Table>

API Reference#

Table#

This component is based on the table element and its various children:

Table: table
Table.Header: thead
Table.Row: tr
Table.HeaderCell: th
Table.Body: tbody
Table.Cell: td

Each component supports the props or attributes of its equivalent HTML element.

This component is based on the div element and supports all of its props

Prop	Type	Default
`count`	`number`	-
`pageSize`	`number`	-
`pageIndex`	`number`	-
`pageCount`	`number`	-
`canPreviousPage`	`boolean`	-
`canNextPage`	`boolean`	-
`translations`	`object`	`{ of: "of", results: "results", pages: "pages", prev: "Prev", next: "Next", }`
`previousPage`	`function`	-
`nextPage`	`function`	-

Was this helpful?

Examples#

Table with Pagination#

#	Customer	Email	Amount
86078	Jill Miller	32690@gmail.com	€493.00	EUR
42845	Sarah Garcia	86379@gmail.com	¥113	JPY
39129	Josef Smith	89383@gmail.com	$43.00	USD

3 of 5 results

1 of 5 pages

Was this guide helpful?