ObjectUIComponentsComplex
Filter UI
Build flexible filter panels for list and view toolbars
The Filter UI component renders configurable filters with text, select, date, and boolean inputs.
JSON Configuration
{
type: 'filter-ui',
layout: 'popover',
showApply: true,
showClear: true,
filters: [
{ field: 'name', label: 'Name', type: 'text', placeholder: 'Search name' },
{ field: 'status', label: 'Status', type: 'select', options: [
{ label: 'Open', value: 'open' },
{ label: 'Closed', value: 'closed' }
] },
{ field: 'created_at', label: 'Created', type: 'date-range' }
]
}Basic Usage
Filter Ui
Schema
interface FilterUISchema {
type: 'filter-ui';
filters: Array<{
field: string;
label?: string;
type: 'text' | 'number' | 'select' | 'date' | 'date-range' | 'boolean';
operator?: 'equals' | 'contains' | 'startsWith' | 'gt' | 'lt' | 'between' | 'in';
options?: Array<{ label: string; value: any }>;
placeholder?: string;
}>;
values?: Record<string, any>;
onChange?: string;
showClear?: boolean;
showApply?: boolean;
layout?: 'inline' | 'popover' | 'drawer';
}