64 lines
2 KiB
Markdown
64 lines
2 KiB
Markdown
# Table
|
||
|
||
The table widget is a configurable data grid: typed columns, sorting, filtering, footer totals and
|
||
inline editing — either static or bound to a data source.
|
||
|
||
## Live preview
|
||
|
||
<w4c-widget-preview type="table" height="360"></w4c-widget-preview>
|
||
|
||
## Embedding a preview in documentation
|
||
|
||
Pages embed a live widget with the `<w4c-widget-preview>` block. Without a body the widget
|
||
self-seeds its default data, exactly like a freshly dropped widget:
|
||
|
||
```html
|
||
<w4c-widget-preview type="table" height="360"></w4c-widget-preview>
|
||
```
|
||
|
||
Pass JSON metadata as the block body to preview specific data:
|
||
|
||
```html
|
||
<w4c-widget-preview type="table" height="320">
|
||
{ "title": "Deployments", "columns": [ ... ], "rows": [ ... ] }
|
||
</w4c-widget-preview>
|
||
```
|
||
|
||
`type` is any widget type key, and `height` is the preview height in pixels (160–900).
|
||
|
||
## Data-driven preview
|
||
|
||
<w4c-widget-preview type="table" height="300">
|
||
{
|
||
"title": "Deployments",
|
||
"columns": [
|
||
{ "key": "env", "label": "Environment", "sortable": true },
|
||
{ "key": "status", "label": "Status", "type": "badge", "badgeMap": { "ok": "#2e7d32", "fail": "#c62828" } },
|
||
{ "key": "latency", "label": "Latency (ms)", "type": "number" }
|
||
],
|
||
"rows": [
|
||
{ "env": "dev", "status": "ok", "latency": 42 },
|
||
{ "env": "staging", "status": "ok", "latency": 57 },
|
||
{ "env": "production", "status": "fail", "latency": 380 }
|
||
]
|
||
}
|
||
</w4c-widget-preview>
|
||
|
||
## Columns
|
||
|
||
| Field | Meaning |
|
||
| --- | --- |
|
||
| `key` | Property read from each row |
|
||
| `label` | Header text |
|
||
| `type` | `auto`, `text`, `number`, `date`, `bool` or `badge` |
|
||
| `align` | `left`, `center` or `right` (numbers are right-aligned by default) |
|
||
| `width` | Fixed column width in pixels |
|
||
| `sortable`, `hidden`, `frozen` | Interaction flags |
|
||
| `format` | Number/date format applied to the cell |
|
||
| `badgeMap` | Value → colour map used by `badge` columns |
|
||
|
||
## Presentation
|
||
|
||
`display` toggles the grid chrome: `header`, `striped`, `borders`, `compact`, `rowNumbers`, `wrap`,
|
||
`footerTotals` and `filterRow`.
|