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


import { Table } from "@medusajs/ui"
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


This component is based on the table element and its various children, and supports all props of those elements.

  • Table: table

  • Table.Header: thead

  • Table.Row: tr

  • Table.HeaderCell: th

  • Table.Body: tbody

  • Table.Cell: td

Pagination

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

PropTypeDefault
countnumber-
pageSizenumber-
pageIndexnumber-
pageCountnumber-
canPreviousPageboolean-
canNextPageboolean-
previousPage
function
-
nextPage
function
-
Was this section helpful?