TuMarca

Table

A responsive table component.

stable
Tipo: ui
Versión: 1.0.0
data-display table data grid list
Documentación API Reference

Comparación entre la versión Astro (Saastro) y React (shadcn/ui)

🚀 saastro/ui (Astro)
A list of your recent invoices.
Invoice Status Method Amount
INV001 Paid Credit Card $250.00
INV002 Pending PayPal $150.00
INV003 Unpaid Bank Transfer $350.00
INV004 Paid Credit Card $450.00
INV005 Paid PayPal $550.00
⚛️ shadcn/ui (React)

Installation

Usage

---
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui-saastro/table"
---

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

Components

The table component consists of the following subcomponents:

  • Table - The main table wrapper
  • TableHeader - The table header section
  • TableBody - The table body section
  • TableFooter - The table footer section
  • TableRow - A table row
  • TableHead - A table header cell
  • TableCell - A table data cell
  • TableCaption - A table caption

Props

All components accept standard HTML attributes for their respective elements plus a class prop for additional styling.

Accessibility

  • Uses semantic HTML table elements
  • Properly structures header and body sections
  • Supports row selection states via data-state attribute