GothUI

Data

DataTable

Semantic rows, headers, sorting links and state slots.

components.DataTable · DataTableProps

Preview

Open standalone preview →
Sample project hours
ProjectHours
Studio website24
Team handbook12

Use it well.

Caption and column labels are required. Row shapes are validated. Go owns sorting, pagination and selection; cells accept escaped text or components.

Explore the full demo →

Templ example

Download example.templ

This is the source compiled for the preview. Select the text to copy it, or download the file. Change the package name and demo routes for your application.

package examples

import "github.com/Tend-Stack/GothUI/v2026/components"

templ ExampleDataTable() {
	@components.DataTable(components.DataTableProps{Caption: "Sample project hours", Striped: true, Columns: []components.TableColumn{{Label: "Project", RowHeader: true}, {Label: "Hours", Alignment: components.AlignEnd}}, Rows: []components.TableRow{{Cells: []components.TableCell{{Text: "Studio website"}, {Text: "24"}}}, {Cells: []components.TableCell{{Text: "Team handbook"}, {Text: "12"}}}}})
}