Table
TableFilterChips
Animated chips for active filters with a remove-X and Clear-all control.
TableFilterChips
Renders a horizontal row of pill chips — one per active filter — showing the filter label, value, and a small × to remove that filter. A "Clear all" link appears once more than one filter is active. The whole row animates via <TransitionGroup> so chips fade/scale in and out.
Components
<XATableFilterChips />
<XATableFilterChips
:filters="{ status: 'active', role: 'admin', search: 'jane' }"
:labels="{ status: 'Status', role: 'Role' }"
@remove="(key) => removeFilter(key)"
@clear="clearAllFilters"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
filters | Record<string, unknown> | required | Active filter values. Keys with null / undefined / empty-string values are hidden. |
labels | Record<string, string> | {} | Pretty labels per filter key. Keys missing from labels are auto-derived from the camelCase/snake_case key (e.g., firstName → First Name). |
Emits
| Event | Payload | Description |
|---|---|---|
remove | (key: string) | User clicked the × on a chip. |
clear | () | User clicked "Clear all". Only emitted when more than one filter is active. |
Value formatting
Built-in display formatters:
| Value | Display |
|---|---|
true | Yes |
false | No |
Date | toLocaleDateString() |
Array | comma-separated list |
| Other | String(value) |
AI Context
component: XATableFilterChips
package: "@xenterprises/nuxt-x-app"
category: Table
use-when: >
Below XATableFilterBar to show what filters are currently applied and let
users drop them one at a time without re-opening the filter row.
auto-label: "camelCase keys are split and title-cased when no label is provided"