Table

A responsive table component.

type invoice = {
  invoice: string,
  paymentStatus: string,

Installation

npx shadcn@latest add @rescript-shadcn/Table

Usage

<Table>
  <Table.Caption> {"A list of your recent invoices."->React.string} </Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head className="w-[100px]"> {"Invoice"->React.string} </Table.Head>
      <Table.Head> {"Status"->React.string} </Table.Head>
      <Table.Head> {"Method"->React.string} </Table.Head>
      <Table.Head className="text-right"> {"Amount"->React.string} </Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell className="font-medium"> {"INV001"->React.string} </Table.Cell>
      <Table.Cell> {"Paid"->React.string} </Table.Cell>
      <Table.Cell> {"Credit Card"->React.string} </Table.Cell>
      <Table.Cell className="text-right"> {"$250.00"->React.string} </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Examples

Footer

Use the <TableFooter /> component to add a footer to the table.

type invoice = {
  invoice: string,
  paymentStatus: string,

Actions

A table showing actions for each row using a <DropdownMenu /> component.

@react.component
let make = () =>
  <Table>

Data Table

You can use the <Table /> component to build more complex data tables. Combine it with @tanstack/react-table to create tables with sorting, filtering and pagination.

See the Data Table documentation for more information.

You can also see an example of a data table in the Tasks demo.