TableView
TableViewActionBar
Compact action bar designed for use inside <TableView> rows. Quick actions are revealed on row hover (desktop) and always visible on touch devices. Overflow actions are accessible via the ellipsis menu.
Basic Actions
Each row has a set of actions. On desktop, hover a row to reveal quick action buttons. Up to 2 quick actions are shown; remaining actions go into the ellipsis overflow menu.
Single Action
When a row has only one or two visible actions, they are all shown as quick actions with no overflow menu.
Href Actions
Actions with href render as links. Combine with regular action handlers.
Visible Toggle
Set visible: false to hide an action conditionally. Hidden actions are excluded from both the quick actions bar and the overflow menu.
Usage
Using TableViewActionBar
API
TableView Props
| Prop | Type | Default | Description |
|---|
| columns | Object | {} | Column definitions (see below) |
| model | Array | [] | Data rows |
| busy | Boolean | false | Show loading indicator |
| placeholder | String | "empty" | Empty state message |
| hover | Boolean | true | Highlight rows on hover |
| defaultSortBy | String | - | Initial sort column key |
| defaultSortOrder | String | "asc" | "asc" or "desc" |
| fixedLayout | Boolean | false | Use fixed table layout |
TableView Column Properties
| Property | Type | Description |
|---|
| label | String | Column header text |
| sort | Boolean | Function | Enable sorting (true for default, function for custom) |
| icon | String | FontAwesome icon for header |
| align | String | "left", "center", or "right" |
| width | String | CSS width value |
| hideMobile | Boolean | Hide on screens < 576px |
| nowrap | Boolean | Prevent text wrapping |
TableView Events
| Event | Payload | Description |
|---|
| row-click | Row object | Emitted when a row is clicked |
TableView Slots
| Slot | Props | Description |
|---|
| #[columnKey] | Row data | Custom cell template for column |
TableViewActionBar Props
| Prop | Type | Default | Description |
|---|
| actions | Array | [] | Array of action items (see below) |
TableViewActionBar Action Item Properties
| Property | Type | Description |
|---|
| label | String | Item label (shown in tooltip and overflow menu) |
| icon | String | FontAwesome icon class for the button |
| action | Function | Click handler |
| href | String | Render as a link instead of a button |
| target | String | Link target (e.g. _blank) |
| quickAction | Boolean | Show this action in the quick actions bar. When <=2 visible actions exist, all are shown as quick actions regardless of this flag. |
| visible | Boolean | Show or hide this action (default true) |
| separator | Boolean | Render as a separator in the overflow menu |
| disabled | Boolean | Disable the action in the overflow menu |
| checkbox | Boolean | Render as a checkbox item in the overflow menu |
| checked | Boolean | CheckBox checked state |
| type | Component | Custom Vue component for the menu item |
ankow