Table

A responsive table component for displaying structured data with headers, body rows, footer, and an optional caption.

Demonstração

A list of recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	Bank Transfer	$150.00
INV-003	Paid	PayPal	$350.00
INV-004	Overdue	Credit Card	$450.00
INV-005	Paid	Stripe	$550.00
Total			$1,750.00

Props: TableRow

Prop	Tipo	Padrão	Descrição
`striped`	`boolean`	`false`	Applies an alternating background to even rows for improved readability.

Uso

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from '@ghiberti85/ui'

<Table>
  <TableCaption>A list of recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV-001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell>$250.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>Total</TableCell>
      <TableCell>$1,750.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Ver no Storybook

Abrir no Storybook →

←Toast Progress→