Table
A Table component for displaying data.
# | Customer | 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
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.
Prop | Type | Default |
---|---|---|
count | number | - |
pageSize | number | - |
pageIndex | number | - |
pageCount | number | - |
canPreviousPage | boolean | - |
canNextPage | boolean | - |
previousPage | function | - |
nextPage | function | - |
Was this section helpful?