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:tableTable.Header:theadTable.Row:trTable.HeaderCell:thTable.Body:tbodyTable.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?