Table
Таблица с секциями, строками и ячейками.
github.com/fastygo/templ/ui
Таблица с секциями, строками и ячейками.
Базовая таблица
| Имя | Роль |
|---|---|
| Алекс | Администратор |
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"}) { Имя }
@ui.TableHeadCell(ui.TableCellProps{Scope: "col"}) { Роль }
}
}
@ui.TableBody(ui.TableSectionProps{}) {
@ui.TableRow(ui.TableRowProps{}) {
@ui.TableCell(ui.TableCellProps{}) { Алекс }
@ui.TableCell(ui.TableCellProps{}) { Администратор }
}
}
}
}
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"}) { Имя }
@ui.TableHeadCell(ui.TableCellProps{Scope: "col"}) { Роль }
}
}
@ui.TableBody(ui.TableSectionProps{}) {
@ui.TableRow(ui.TableRowProps{}) {
@ui.TableCell(ui.TableCellProps{}) { Алекс }
@ui.TableCell(ui.TableCellProps{}) { Администратор }
}
}
}
}
ColSpan
| Объединяет две колонки |
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}) { Объединяет две колонки }
}
}
}
}
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}) { Объединяет две колонки }
}
}
}
}
API
TableHeadCell · component — Заголовок колонки (Scope: col | row)
TableCell · component — Ячейка данных
ColSpan · int — Объединение колонок