Documentation / @zerotal/flow / index / Table

Function: Table()

Table<T>(props): HtmlNode

A data table with URL-driven sortable headers. Clicking a sortable header navigates to ?sortBy=key&sortDir=asc|desc (toggling direction) — pair with @url sortBy / @url sortDir and sort the rows server-side in render().

Type Parameters

T

T extends Record<string, unknown>

Parameters

props

TableProps<T>

Returns

HtmlNode

Remarks

Cells default to row[col.key]; give a column a render for custom content. params preserves other query state (e.g. a search term), hover highlights rows, and rowKey (default the first column's key) identifies rows for morph-stable reordering.

Example

<Table
  columns={[{ key: "name", label: "Name", sortable: true }]}
  rows={p.data}
  sortBy={this.sortBy}
  sortDir={this.sortDir}
/>