DataTable
components/data/Table.vue
Column-config-driven data table with sorting, search, tone-mapped pills, and optional expandable rows.
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.
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 |
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? } |
| 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 |