Table

A Table component for displaying data.

#CustomerEmailAmount
86078Jill Miller32690@gmail.com€493.00EUR
42845Sarah Garcia86379@gmail.com¥113JPY
39129Josef Smith89383@gmail.com$43.00USD
5548Elvis Jones52860@gmail.com£840.00GBP
87668Charles Rodriguez45675@gmail.com£304.00GBP
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.

Table.Pagination

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

PropTypeDefault
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 page helpful?

Examples#


Table with Pagination#

#CustomerEmailAmount
86078Jill Miller32690@gmail.com€493.00EUR
42845Sarah Garcia86379@gmail.com¥113JPY
39129Josef Smith89383@gmail.com$43.00USD

1

3 of 5 results

1 of 5 pages

Was this example helpful?