Table
TableFilterBar
Search input + typed filter dropdowns row that emits filter changes for table query updates.
TableFilterBar
A compact filter row with a debounced search input, typed filter controls (select, text, date, number), and a Clear button that appears whenever any filter is active. Designed for use above <XATable> — wire the update:search / update:filters / filter events into your data source.
Components
<XATableFilterBar />
<XATableFilterBar
v-model:search="search"
v-model:filters="filters"
:filters="[
{ key: 'status', label: 'Status', type: 'select', options: [
{ label: 'Active', value: 'active' },
{ label: 'Inactive', value: 'inactive' },
]},
{ key: 'role', label: 'Role', type: 'select', options: roles },
{ key: 'query', label: 'Keyword', type: 'text' },
{ key: 'since', label: 'Since', type: 'date' },
{ key: 'minAge', label: 'Min age', type: 'number' },
]"
:debounce="300"
:show-search="true"
search-placeholder="Search users..."
@filter="(key, value) => onFilter(key, value)"
@clear="onClear"
>
<template #actions>
<UButton label="Add filter" icon="i-lucide-plus" size="sm" variant="soft" />
</template>
</XATableFilterBar>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
filters | Filter[] | [] | Filter definitions. Each: { key, label, type, placeholder?, options? }. type selects the control: select / text / date / number. |
showSearch | boolean | true | Render the search input on the left. |
searchPlaceholder | string | 'Search...' | Search input placeholder text. |
debounce | number | 300 | Milliseconds to debounce the update:search emit. |
Filter shape
interface Filter {
key: string // Required — unique key, used in emits
label: string // Required — default placeholder fallback
type: 'select' | 'text' | 'date' | 'number'
placeholder?: string // Override default placeholder
options?: Array<{ label: string; value: unknown }> // Required for type='select'
}
Emits
| Event | Payload | Description |
|---|---|---|
update:search | (value: string) | Debounced — search input value. Wire via v-model:search. |
update:filters | (filters: Record<string, unknown>) | Active filter values keyed by key. Wire via v-model:filters. |
filter | (key: string, value: unknown) | Per-filter change, fired immediately (not debounced). |
clear | () | All filters + search cleared via the Clear button. |
Slots
| Slot | Description |
|---|---|
actions | Extra buttons appended to the right (e.g., "Add filter", "Saved views"). |
Exposed
| Property | Type | Description |
|---|---|---|
searchQuery | Ref<string> | Reactive search query. |
filterValues | Ref<Record<string, unknown>> | Reactive filter state. |
clearFilters() | () => void | Programmatically reset everything. |
AI Context
component: XATableFilterBar
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
Above XATable to give users quick narrowing controls. Use v-model:search and
v-model:filters to drive the underlying query. For richer / schema-driven
filters, use XATableToolbar's #left slot to compose custom controls instead.
debounce-default: 300ms