Table

A responsive table component with various styling options.

Basic Table

Simple Table

A list of recent invoices
Invoice	Status	Email	Amount
INV-001	pending	[email protected]	$125.99
INV-002	processing	[email protected]	$250.49
INV-003	success	[email protected]	$75.00
INV-004	failed	[email protected]	$190.25
Total			$641.73

<Table>
  <TableCaption>
    A list of recent invoices
  </TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>
        Invoice
      </TableHead>
      <TableHead>
        Status
      </TableHead>
      <TableHead>
        Email
      </TableHead>
      <TableHead className="text-right">
        Amount
      </TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        INV-001
      </TableCell>
      <TableCell>
        pending
      </TableCell>
      <TableCell>
        [email protected]
      </TableCell>
      <TableCell className="text-right">
        $
        125.99
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        INV-002
      </TableCell>
      <TableCell>
        processing
      </TableCell>
      <TableCell>
        [email protected]
      </TableCell>
      <TableCell className="text-right">
        $
        250.49
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        INV-003
      </TableCell>
      <TableCell>
        success
      </TableCell>
      <TableCell>
        [email protected]
      </TableCell>
      <TableCell className="text-right">
        $
        75.00
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        INV-004
      </TableCell>
      <TableCell>
        failed
      </TableCell>
      <TableCell>
        [email protected]
      </TableCell>
      <TableCell className="text-right">
        $
        190.25
      </TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>
        Total
      </TableCell>
      <TableCell className="text-right">
        $
        641.73
      </TableCell>
    </TableRow>
  </TableFooter>
</Table>

Data Table

Interactive Data Table

Invoice	Status	Email	Amount
INV-001	pending	[email protected]	$125.99
INV-002	processing	[email protected]	$250.49
INV-003	success	[email protected]	$75.00
INV-004	failed	[email protected]	$190.25

<d columns={[{"accessorKey":"id","header":"Invoice"},{"accessorKey":"status","header":"Status"},{"accessorKey":"email","header":"Email"},{"accessorKey":"amount","header":"Amount"}]} data={[{"id":"INV-001","amount":125.99,"status":"pending","email":"[email protected]"},{"id":"INV-002","amount":250.49,"status":"processing","email":"[email protected]"},{"id":"INV-003","amount":75,"status":"success","email":"[email protected]"},{"id":"INV-004","amount":190.25,"status":"failed","email":"[email protected]"}]} />

Rounded Data Table

Invoice	Status	Email	Amount
INV-001	pending	[email protected]	$125.99
INV-002	processing	[email protected]	$250.49
INV-003	success	[email protected]	$75.00
INV-004	failed	[email protected]	$190.25

<d columns={[{"accessorKey":"id","header":"Invoice"},{"accessorKey":"status","header":"Status"},{"accessorKey":"email","header":"Email"},{"accessorKey":"amount","header":"Amount"}]} data={[{"id":"INV-001","amount":125.99,"status":"pending","email":"[email protected]"},{"id":"INV-002","amount":250.49,"status":"processing","email":"[email protected]"},{"id":"INV-003","amount":75,"status":"success","email":"[email protected]"},{"id":"INV-004","amount":190.25,"status":"failed","email":"[email protected]"}]} rounded={true} />