Docs
Table

Table

A responsive table component.

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
INV006 Pending Bank Transfer $200.00
INV007 Unpaid Credit Card $300.00

Usage

import shadcn.ui.components.Table
import shadcn.ui.components.TableBody
import shadcn.ui.components.TableCaption
import shadcn.ui.components.TableCell
import shadcn.ui.components.TableHead
import shadcn.ui.components.TableHeader
import shadcn.ui.components.TableRow

Table {
    TableCaption { + "A list of your recent invoices ."}
    TableHeader {
        TableRow {
            TableHead {
                className = ClassName("w-[100px]")
                    +"Invoice"
            }
            TableHead { +"Status" }
            TableHead { +"Method" }
            TableHead {
                className = ClassName("text-right")
                    +"Amount"
            }
        }
    }
    TableBody {
            TableRow {
                TableCell {
                    className = ClassName("font-medium")
                    + "INV001"
                }
                TableCell { +"Paid" }
                TableCell { +"Credit Card" }
                TableCell {
                    className = ClassName("text-right")
                    + "$250"
                }
            }
    }
}
SwitchTabs