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`.
|