Table

Sortable data table with selectable rows.

Demo

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	User
Charlie Brown	charlie@example.com	User
Diana Ross	diana@example.com	Editor

Usage

@styled_table.table(
  id="users",
  columns=[
    table_column("name", "Name", sortable=true),
    table_column("email", "Email", sortable=true),
    table_column("role", "Role"),
  ],
  rows=[
    table_row("1", ["Alice", "alice@example.com", "Admin"]),
    table_row("2", ["Bob", "bob@example.com", "User"]),
  ],
  aria_label="User data",
  selectable=true,
)

Props

Prop	Type	Default	Description
id	String	-	Table ID
columns	Array[TableColumn]	-	Column definitions
rows	Array[TableRow]	-	Row data
aria_label	String?	None	Accessible label
selectable	Bool	false	Enable row selection
class	String?	None	Additional CSS class
onrowselect	(String) -> Unit?	None	Row selection callback

BEM Classes

Class	Description
`.table`	Root wrapper (overflow container)
`.table__table`	The actual table element
`.table__header`	Table header row
`.table__th`	Header cell
`.table__th--sortable`	Sortable header cell
`.table__sort-icon`	Sort direction indicator
`.table__body`	Table body
`.table__row`	Data row
`.table__cell`	Data cell

Data Attributes

Attribute	Description
`aria-sort`	Sort direction (ascending, descending, none)
`data-selected`	Row selection state (true, false)
`data-row-id`	Row identifier

Features

Sortable columns: Click header to toggle sort direction
Row selection: Click row to select (when enabled)
Keyboard navigation: Tab through headers, Enter to sort
Responsive: Horizontal scroll on overflow

Accessibility

aria-sort on sortable headers
aria-label for table description
Proper scope="col" on header cells
Focus management for keyboard users