UxTableListSorter
components/ux/table-list/Sorter.vue
Sortable column header with rotating arrow indicator and sort direction toggle.
domain | requests | avgDuration |
|---|---|---|
| api.github.com | 45,230 | 145 ms |
| api.stripe.com | 32,456 | 89 ms |
| api.cloudflare.com | 28,901 | 67 ms |
| api.twilio.com | 15,678 | 112 ms |
| api.sendgrid.com | 9,870 | 78 ms |
components/ux/table-list/Sorter.vue
Usage
<UxTableListSorter
sortMetric = "—"
total = "—"
:isHot = "false"
:isSorting = "false"
:disabled = "false"
width = "1%"
align = "—"
>
Content here
</UxTableListSorter>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sortMetric | String | '' | Metric key for this column |
| total | String | '' | Total count displayed in header |
| isHot | Boolean | false | Hot state styling |
| isSorting | Boolean | false | Whether this column is active sort |
| disabled | Boolean | false | Disable sorting |
| width | String | '1%' | Column width. Default '1%' shrinks the column to its content; pass a px/percent value to size explicitly |
| align | String | '' | Text alignment |
Events
| Event | Description |
|---|---|
| sortUp | Sort ascending |
| sortDown | Sort descending |
Slots
| Slot | Description |
|---|---|
| default | Column label |