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 shadcn_django@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>