DataTable

Interactive Sort Demo

Click column headers to sort.

Server-Rendered DataTable

Users
ID	Name	Email	Role	Status
1	Jane Doe	jane@example.com	Admin	Active
2	John Smith	john@example.com	Editor	Pending
3	Alice Cooper	alice@example.com	Viewer	Inactive

Column Resizing

Set Resizable: true to enable drag-to-resize handles on column headers.

Resizable columns
ID	Name	Email	Role
1	Jane Doe	jane@example.com	Admin
2	John Smith	john@example.com	Editor
3	Alice Cooper	alice@example.com	Viewer

Usage

@data.DataTable(data.DataTableProps{
    Caption:   "Users",
    Resizable: true,             // enable drag-to-resize column handles
    Columns: []data.DataTableColumn{
        {Key: "name", Label: "Name", Width: "160px"}, // optional initial width
        {Key: "role", Label: "Role", Width: "120px"},
    },
}) {
    @data.DataTableRow(false) {
        @data.DataTableCell("font-medium") { Jane }
        @data.DataTableCell("") { Admin }
    }
}