Table

A responsive table component.

A list of your recent invoices.
Invoice Status Method Amount
INV001 Paid Card $100
INV002 Pending PayPal $200
INV003 Failed Card $300

Installation

uvx django_shadcn@latest add table

Usage

<c-table>
  <c-table.caption> A list of your recent invoices. </c-table.caption>
  <c-table.header>
    <c-table.row>
      <c-table.head class="w-[100px]">Invoice</c-table.head>
      <c-table.head>Status</c-table.head>
      <c-table.head>Method</c-table.head>
      <c-table.head class="text-right">Amount</c-table.head>
    </c-table.row>
  </c-table.header>
  <c-table.body>
    <c-table.row>
      <c-table.cell class="font-medium">INV001</c-table.cell>
      <c-table.cell>Paid</c-table.cell>
      <c-table.cell>Card</c-table.cell>
      <c-table.cell class="text-right">$100</c-table.cell>
    </c-table.row>
  </c-table.body>
</c-table>

Examples

Empty Table

A list of your recent invoices.
Invoice Status Method Amount
<c-table>
  <c-table.caption> A list of your recent invoices. </c-table.caption>
  <c-table.header>
    <c-table.row>
      <c-table.head>Invoice</c-table.head>
      <c-table.head>Status</c-table.head>
      <c-table.head>Method</c-table.head>
      <c-table.head>Amount</c-table.head>
    </c-table.row>
  </c-table.header>
  <c-table.body>
    <c-table.empty />
  </c-table.body>
</c-table>