Table
A data table. Put it in a plain Column, not in a Card. Give "columns" and "rows" (a list of row lists). Or give "children": TableSection or TableRow ids, or a template { "componentId", "path" } that repeats a TableRow for each item of a data list. To show a component (Badge, Button, Icon, Text) in a cell or a column header, set it to { "componentId": "<id>" } and put the id in "cellComponents".
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
caption | string | A short name of the table for screen readers. It is not shown |
columns | string | object | object | object[] | Strings, { "label", "align"?, "width"?, "componentId"? } or { "componentId" }, or { "@path": "/x" }. Default [] |
rows | object[][] | A list of row lists, or { "@path": "/x" }. A cell is a string, a number, or { "componentId": "<id>" } to show a component. Default [] |
columnSizing | "auto" | "equal" | Default "auto" |
dividers | boolean | Default true |
stickyHeader | boolean | Default false |
emptyLabel | string | Default "No rows" |
Slots
children· multiplecellComponents· multiple
TableSection
A group of TableRow children in a Table. With header true, it is the header of the table.
Loading examples…
| Prop | Type | Description |
|---|---|---|
header | boolean | Renders the rows as the header |
rowDivider | boolean |
Slots
children· multiple
TableRow
A row of a Table. Its children are TableCell ids, or a template. With label, a header cell with that text starts the row.
Loading examples…
| Prop | Type | Description |
|---|---|---|
header | boolean | |
label | string | The text of a header cell at the start of the row |
labelColSpan | number | Columns the label cell spans |
Slots
children· multiple
TableCell
A cell of a TableRow. It shows "text", or its children. With header true, it is a header cell.
Loading examples…
| Prop | Type | Description |
|---|---|---|
text | string | number | |
header | boolean | |
align | "start" | "center" | "end" | |
vAlign | "start" | "center" | "end" | Default "start" |
colSpan | number | |
rowSpan | number | |
width | number | string | |
padding | number | string |
Slots
children· multiple