Table

En/ Ru

Table

Table composes caption, sections, rows, and cells.

github.com/fastygo/templ/ui

Summary

Table composes caption, sections, rows, and cells.TableHeadCell supports scope on th elements.

Use Cases

    Show user list with column headers

    Span one cell across two columns with ColSpan

Semantics

    Table root is native table element

    TableHeadCell sets scope when Scope prop is valid

Example layout.basic

Name Role
Alex Admin 
import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Table(ui.TableProps{Class: "w-full text-sm"}) {
		@ui.TableHead(ui.TableSectionProps{}) {
			@ui.TableRow(ui.TableRowProps{}) {
				@ui.TableHeadCell(ui.TableCellProps{Scope: "col"}) { Name }
				@ui.TableHeadCell(ui.TableCellProps{Scope: "col"}) { Role }
			}
		}
		@ui.TableBody(ui.TableSectionProps{}) {
			@ui.TableRow(ui.TableRowProps{}) {
				@ui.TableCell(ui.TableCellProps{}) { Alex }
				@ui.TableCell(ui.TableCellProps{}) { Admin }
			}
		}
	}
}

Example cell.colspan

Spans two columns 
import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Table(ui.TableProps{}) {
		@ui.TableBody(ui.TableSectionProps{}) {
			@ui.TableRow(ui.TableRowProps{}) {
				@ui.TableCell(ui.TableCellProps{ColSpan: 2}) { Spans two columns }
			}
		}
	}
}

API

ColSpan · int — role: column-span

Scope · string — role: header-scope; enum: col|row|colgroup|rowgroup