Skip to main content
DataTable takes flat columns and rows and renders a full-featured table with optional sorting, search filtering, and pagination. Use it when you have structured data and want interactive table features without building the markup yourself.

​
Basic Usage

​
Pagination

Enable pagination to handle large datasets. The table shows page controls and displays page_size rows at a time.

​
API Reference

DataTable Parameters

​
columns
list[DataTableColumn]
required
Column definitions. Each column specifies a key, header, and optional sortable flag.
​
rows
list[dict] | str
default:"[]"
Row data as a list of dicts, or a {{ field }} interpolation reference.
​
searchable
bool
default:"False"
Show a search/filter input above the table.
​
paginated
bool
default:"False"
Show pagination controls below the table.
​
page_size
int
default:"10"
Number of rows per page when paginated=True.
​
caption
str | None
default:"None"
Optional table caption.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

DataTableColumn Parameters

​
key
str
required
Data key — matches keys in the row dicts.
​
header
str
required
Column header display text.
​
sortable
bool
default:"False"
Enable click-to-sort on this column.

​
Protocol Reference

DataTable
{
  "type": "DataTable",
  "columns": "[DataTableColumn] (required)",
  "rows?": "Action[] | string",
  "searchable?": false,
  "paginated?": false,
  "pageSize?": 10,
  "caption?": "string",
  "cssClass?": "string"
}
DataTableColumn
{
  "key": "string (required)",
  "header": "string (required)",
  "sortable?": false
}
For the complete protocol schema, see DataTable, DataTableColumn.