Table
TableToolbar
Pre-composed table toolbar with search, filter chips, column toggle, and export button.
TableToolbar
A pre-composed toolbar that mounts the most common table chrome in a single component: search input, removable filter chips, column visibility toggle, and CSV/JSON export. Slots on the left, right, and actions sides let you inject custom controls without rebuilding the layout.
Components
<XATableToolbar />
<XATableToolbar
v-model:search="search"
v-model:visible-columns="visibleColumns"
:searchable="true"
search-placeholder="Search orders..."
:active-filters="filters"
:show-column-toggle="true"
:columns="columns"
:exportable="true"
:data="rows"
export-filename="orders"
@remove-filter="(k) => removeFilter(k)"
@clear-filters="clearFilters"
>
<template #left>
<USelectMenu v-model="view" :items="views" size="sm" />
</template>
<template #right>
<UButton label="Refresh" icon="i-lucide-refresh" size="sm" variant="soft" />
</template>
<template #actions>
<UButton label="New order" icon="i-lucide-plus" size="sm" />
</template>
</XATableToolbar>
Props
Search
| Prop | Type | Default | Description |
|---|---|---|---|
searchable | boolean | true | Render the search input. |
search | string | '' | Current search value. v-model:search target. |
searchPlaceholder | string | 'Search...' | Search input placeholder. |
Filter chips
| Prop | Type | Default | Description |
|---|---|---|---|
activeFilters | Array<{ key: string; label: string; value: unknown }> | [] | Filters to display as removable chips. Clicking the × emits remove-filter. |
Column visibility
| Prop | Type | Default | Description |
|---|---|---|---|
showColumnToggle | boolean | true | Mount the column visibility popover. |
columns | Column[] | [] | Full column list. Columns with enableHiding: false or id === 'actions' are excluded from the toggle. |
visibleColumns | string[] | [] | Currently visible column IDs. v-model:visible-columns target. |
Export
| Prop | Type | Default | Description |
|---|---|---|---|
exportable | boolean | true | Mount the export dropdown. |
data | Object[] | [] | Rows to export. |
exportFilename | string | 'export' | Base filename (no extension). |
Emits
| Event | Payload | Description |
|---|---|---|
update:search | (value: string) | Wired via v-model:search. |
update:visibleColumns | (ids: string[]) | Wired via v-model:visible-columns. |
remove-filter | (key: string) | × clicked on a filter chip. |
clear-filters | () | "Clear all" link clicked. |
Slots
| Slot | Description |
|---|---|
left | Extra controls appended to the left side after the filter chips. |
right | Extra controls rendered before the column toggle / export buttons. |
actions | Trailing action buttons (e.g., a primary "Create" CTA). |
AI Context
component: XATableToolbar
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
Above XATable when you want the standard admin-toolbar look (search +
filters + column toggle + export) without wiring each sub-component
manually. Use the #left / #right / #actions slots to layer in any
app-specific controls.
hides-actions-column: "columns with id or accessorKey === 'actions' are excluded from column toggle and export by default"