Loading
Table and MarkerList are built from parts, components accessed through the parent such as Table.Row or MarkerList.Item. Each part renders its own HTML element: a Table.Row renders a <tr> and a MarkerList.Item an <li>. Settings like color, tone and padding come from the parent it sits in.
import { Table } from '@nebula-kit-private/pro' const InvoiceRow = ({ invoice }) => ( <Table.Row> <Table.Cell>{invoice.number}</Table.Cell> <Table.Cell>{invoice.amount}</Table.Cell> </Table.Row>) export const Invoices = ({ invoices }) => ( <Table> <Table.Caption>Invoices</Table.Caption> <Table.Header> <Table.HeaderRow> <Table.HeaderCell>Number</Table.HeaderCell> <Table.HeaderCell>Amount</Table.HeaderCell> </Table.HeaderRow> </Table.Header> <Table.Body> {invoices.map(invoice => ( <InvoiceRow key={invoice.id} invoice={invoice} /> ))} </Table.Body> </Table>)Parts render in the order you write them, so follow the order HTML expects: Caption, Header, Body and then Footer.
Parts can be wrapped in your own components, like InvoiceRow above.
Pass only parts as children. Anything else renders as it is and can break the HTML of the table or list.