Table of Contents
Note

This documentation describes the FilterChips Vue component for native UI views for Xml templates see filter-chips.

FilterChips

Displays active filter conditions as removable chip tags. Reads the current ViewModel's data filter tree and renders one chip per active condition that has a matching filterable property.

Import

import { FilterChips } from '@neos/app'

Props

Prop Type Default Description
serverFilterChips string \| string[] undefined Names of server-side named filters to also display as chips

Notes

  • Only visible when at least one filter chip is present or serverFilterChips is set.
  • Only renders conditions that are "simple" (single-level filter with chips).
  • Removing a chip calls viewModel.filterDataAsync() to re-apply the filter.
  • The quick search (isMatch) condition is excluded from the chip list.

Usage Examples

Basic filter chips bar

<!-- Displays all active filter conditions from the ViewModel -->
<FilterChips />

With server filter chips

<FilterChips server-filter-chips="activeOnly" />

Typical combination with Datagrid

<VerticalLayout space="none">
  <FilterBar />
  <FilterChips />
  <Datagrid />
</VerticalLayout>

See Also