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>5        #6      </Table.HeaderCell>7      <Table.HeaderCell>8        Customer9      </Table.HeaderCell>10      <Table.HeaderCell>11        Email12      </Table.HeaderCell>13    </Table.Row>14  </Table.Header>15  <Table.Body>16    <Table.Row>17      <Table.Cell>1</Table.Cell>18      <Table.Cell>Emil Larsson</Table.Cell>19      <Table.Cell>emil2738@gmail.com</Table.Cell>20    </Table.Row>21  </Table.Body>22</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

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?

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

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

Table

Usage#

API Reference#

Table#

Table.Pagination#

Examples#

Table with Pagination#

Table#

Table.Pagination#