Table

data

A responsive table component with thead, tbody, and pagination support.

Preview

A list of recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

Installation

npm install @launchapp/design-system

Import

import {  Table, TableHeader, TableBody, TableRow,  TableHead, TableCell, TableCaption} from "@launchapp/design-system";

Examples

Basic Table

<Table>  <TableCaption>A list of recent invoices.</TableCaption>  <TableHeader>    <TableRow>      <TableHead className="w-[100px]">Invoice</TableHead>      <TableHead>Status</TableHead>      <TableHead>Method</TableHead>      <TableHead className="text-right">Amount</TableHead>    </TableRow>  </TableHeader>  <TableBody>    <TableRow>      <TableCell className="font-medium">INV001</TableCell>      <TableCell>Paid</TableCell>      <TableCell>Credit Card</TableCell>      <TableCell className="text-right">$250.00</TableCell>    </TableRow>    <TableRow>      <TableCell className="font-medium">INV002</TableCell>      <TableCell>Pending</TableCell>      <TableCell>PayPal</TableCell>      <TableCell className="text-right">$150.00</TableCell>    </TableRow>  </TableBody></Table>

Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.

← PreviousSwitch

Next →Tabs