DataTable
components/data/Table.vue
Column-config-driven data table with sorting, search, tone-mapped pills, and optional expandable rows. `columns` may change at runtime (a column picker): if the sorted column is hidden the sort falls back to initialSort, else the first sortable column (c95).
Egress by Domain
Requests | Severity | Last Seen | |
|---|---|---|---|
| s3.amazonaws.com | 128730 | Low | just now |
| api.openai.com | 61944 | High | 1m ago |
| api.stripe.com | 24312 | Low | 2m ago |
| hooks.slack.com | 8121 | Medium | 14m ago |
| telemetry.vendor.io | 302 | Critical | 3h ago |
Scenarios
Empty
Requests | Severity | Last Seen | |
|---|---|---|---|
No violations recorded.
Filtered to nothing
Requests | Severity | Last Seen | |
|---|---|---|---|
No domains match the current filter.
Rows are hidden by a (pretend) filter — Clear filter restores them.
Expandable rows
Requests | Severity | Last Seen | |
|---|---|---|---|
| api.stripe.com | 24312 | Low | 2m ago |
| hooks.slack.com | 8121 | Medium | 14m ago |
| api.openai.com | 61944 | High | 1m ago |
With a toolbar
Severity
Requests | Severity | Last Seen | |
|---|---|---|---|
| api.openai.com | 61944 | High | 1m ago |
| api.stripe.com | 24312 | Low | 2m ago |
| hooks.slack.com | 8121 | Medium | 14m ago |
Severity
Requests | Severity | Last Seen | |
|---|---|---|---|
| api.stripe.com | 24312 | Low | 2m ago |
| hooks.slack.com | 8121 | Medium | 14m ago |
Requests | Severity | Last Seen | |
|---|---|---|---|
| api.stripe.com | 24,312 | Low | 2m ago |
| hooks.slack.com | 8,121 | Medium | 14m ago |
| api.openai.com | 61,944 | High | 1m ago |
components/data/Table.vue
Usage
<DataTable
:columns = "—"
:rows = "—"
title = "undefined"
empty = "No data yet."
:onRow = "onRow"
initialSort = "—"
rowKey = "undefined"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | Col[] | — | Column config: { key, label, width?, num?, mono?, search?, sortable?, pill?, locked?, filterKey? } — locked and filterKey (the global-filter key(s) a differently named column answers to) are read by UxColumnPicker / DataListingBar |
| rows | any[] | — | Row objects keyed by column key |
| title | String | undefined | Heading above the table with heavy underline |
| empty | String | 'No data yet.' | Message shown when rows is empty |
| onRow | Function | undefined | Row click handler — adds pointer cursor and hover highlight (plain rows only) |
| initialSort | String | '' | Column label to sort by initially |
| rowKey | String | undefined | Row property to use as v-for key (falls back to index) |
Slots
| Slot | Description |
|---|---|
| <column key> | Per-column cell override — receives { row, value }. Default renders text, or a tone-mapped UxPill when the column sets pill: true |
| details | Expanded row content — receives { row }. Providing this slot makes all rows expandable |
| empty | Replaces the empty-state text inside the table's own empty chrome — e.g. a FilterNoMatches when the rows are filtered away rather than absent. Falls back to the `empty` prop |
| toolbar | A control row over the table's right edge — the title row when there is a title, its own row otherwise; the canonical seat for DataListingBar (c95). Rendered outside the horizontal-scroll box so a popover from it isn't clipped |