shadcn-templ

Data Table

Powerful table and datagrids with filter, sort, pagination and row selection.

row(s) selected
Page of
templ
templ DataTableDemo() {
	{{
		columns := []ui.DataTableColumn{
			{Key: "status", Label: "Status", Sortable: true},
			{Key: "email", Label: "Email", Sortable: true},
			{Key: "amount", Label: "Amount", Sortable: true},
		}
		rows := []ui.DataTableRow{
			{"status": "success", "email": "ken99@yahoo.com", "amount": "$316.00"},
			{"status": "success", "email": "abe45@gmail.com", "amount": "$242.00"},
			{"status": "processing", "email": "monserrat44@gmail.com", "amount": "$837.00"},
			{"status": "success", "email": "silas22@gmail.com", "amount": "$874.00"},
			{"status": "failed", "email": "carmella@hotmail.com", "amount": "$721.00"},
			{"status": "processing", "email": "darryl@example.com", "amount": "$492.00"},
			{"status": "success", "email": "fiona@example.com", "amount": "$615.00"},
			{"status": "failed", "email": "george@example.com", "amount": "$188.00"},
			{"status": "success", "email": "harriet@example.com", "amount": "$330.00"},
			{"status": "processing", "email": "ivan@example.com", "amount": "$445.00"},
			{"status": "success", "email": "julia@example.com", "amount": "$952.00"},
		}
	}}
	<div class="w-full max-w-3xl mx-auto">
		@ui.DataTable(columns, rows, 5, "", nil)
	</div>
}