table
Up to six columns and twenty rows, first column sticky.
Columns, on a phone. table renders up to six columns and twenty rows with the first column pinned and the rest scrolling under the thumb, so the row key stays visible however far right the reader goes.
Every figure is tabular and every row is the same height, which is what keeps the pinned half in step with the scrolling half.
Re-rendered in the browser from the SDK’s own scales. Not a screenshot.
Rendered natively by the Flutter SDK and the Web SDK, both since 0.1.0.
When not to use it
Do not use a table for rows the user should open. Cells are not tappable; item_list is.
Do not use it for money with a total, which is receipt, and do not use it for anything wider than six columns, which is a screen rather than a block.
Props
Every block also carries type and a required fallback_text of 1 to 300 characters.
| Prop | Type | Required | Constraints |
|---|---|---|---|
columns | string[] | Yes | 1 to 6 strings, up to 40 characters each. Rendered uppercase. |
rows | string[][] | Yes | 1 to 20 lists, each of 1 to 6 strings, up to 120 characters each. One list per row, in column order. |
On the wire
{
"id": "blk_14",
"type": "table",
"fallback_text": "Size conversion: EU 40 to 44 against UK, US men and foot length.",
"props": {
"columns": [
"EU",
"UK",
"US men",
"Foot length"
],
"rows": [
[
"40",
"6.5",
"7.5",
"25.0 cm"
],
[
"41",
"7",
"8",
"25.7 cm"
],
[
"42",
"8",
"9",
"26.3 cm"
]
]
}
}Interaction
None. Cells are not tappable and the block emits nothing. The only gesture is the horizontal scroll of the columns after the first.
States
| State | What the SDK draws |
|---|---|
| Loading | Four label-and-value placeholder rows. |
| Empty | No columns, or no rows, renders fallback_text inside the plate. |
| Ragged rows | A row shorter than the column list renders empty cells rather than shifting the ones after it. |
| Long cell values | Two lines, then an ellipsis. Row heights are uniform by construction, and a cell that grows to six lines destroys the table it belongs to. |
| Large font scale | Row height is computed from the reader's own text scale rather than fixed, so a two-line cell at 200% does not clip. |
Accessibility
Traversal is column by column, not row by row, so every data cell announces the column it belongs to: "UK, 7.5". Without that a reader hears a run of bare numbers.
fallback_text should say what the table covers and its range, not read it out.