AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Table
A responsive table component.
| 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 |
| Total | $1,200.00 | ||
templ
templ TableDemo() {
<div class="w-full max-w-2xl">
@ui.Table("", nil) {
@ui.TableCaption("", nil) {
A list of your recent invoices.
}
@ui.TableHeader("", nil) {
@ui.TableRow("", nil) {
@ui.TableHead("w-[100px]", nil) {
Invoice
}
@ui.TableHead("", nil) {
Status
}
@ui.TableHead("", nil) {
Method
}
@ui.TableHead("text-right", nil) {
Amount
}
}
}
@ui.TableBody("", nil) {
@invoiceRow("INV001", "Paid", "Credit Card", "$250.00")
@invoiceRow("INV002", "Pending", "PayPal", "$150.00")
@invoiceRow("INV003", "Unpaid", "Bank Transfer", "$350.00")
@invoiceRow("INV004", "Paid", "Credit Card", "$450.00")
}
@ui.TableFooter("", nil) {
@ui.TableRow("", nil) {
@ui.TableCell("", templ.Attributes{"colspan": "3"}) {
Total
}
@ui.TableCell("text-right", nil) {
$1,200.00
}
}
}
}
</div>
}