shadcn-templ

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
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>
}