FilterBar

A smart filter bar wrapper that renders either an editable-chips filter UI or an inputs-based filter bar, based on the ViewModel's configured filterBarDisplayMode or the displayMode prop.

Import

import { FilterBar } from '@neos/app'

Props

Prop	Type	Default	Description
displayMode	'inputs' \| 'editable-chips'	undefined	Override the filter bar mode. When undefined, uses viewModel.behavior.filterBarDisplayMode
chips	boolean	true	Show filter chips (editable-chips mode)
quickSearch	boolean	true	Show the quick search text input
serverFilterChips	string \| string[]	undefined	Named server-side filters to display as non-removable chips
advancedMode	boolean	true	Show the advanced filter builder toggle

Usage Examples

Default filter bar (mode from ViewModel)

<FilterBar />

Always chips mode

<FilterBar display-mode="editable-chips" />

Without quick search

<FilterBar :quick-search="false" />

With a named server filter chip

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

Multiple server filter chips

<FilterBar :server-filter-chips="['activeOnly', 'currentYear']" />

In a standard list view layout

<VerticalLayout space="none">
  <Toolbar />
  <FilterBar />
  <Datagrid />
  <PaginationBar />
</VerticalLayout>