Filter Bar

A row of filter controls for narrowing data in tables and lists.

Preview · Filter Bar

Code

HTML · @primus/ui-core

<div class="hstack" style="flex-wrap:wrap">
  <input type="search" placeholder="Search tenants..." style="max-width:220px" />
  <select style="max-width:140px"><option>All Plans</option><option>Starter</option><option>Pro</option><option>Enterprise</option></select>
  <select style="max-width:140px"><option>All Status</option><option>Active</option><option>Trial</option></select>
  <button class="outline small" style="margin-inline-start:auto">Clear</button>
</div>

React

import { PrimusFilterBar } from 'primus-react-ui';

<PrimusFilterBar
  filters={[
    { key: 'plan',   label: 'Plan',   type: 'select', options: ['Starter','Pro','Enterprise'] },
    { key: 'status', label: 'Status', type: 'select', options: ['Active','Trial'] },
  ]}
  activeFilters={activeFilters}
  onChange={setActiveFilters}
/>

Angular

<primus-filter-bar [filters]="filterConfig" [activeFilters]="activeFilters"
  (filtersChange)="onFilter($event)">
</primus-filter-bar>

Props

Prop	Type	Default	Description
filters	FilterConfig[]	required	Filter field definitions
activeFilters	Record<string, any>	{}	Current filter values (controlled)
onChange / (filtersChange)	(filters: Record<string, any>) => void	—	Fires when any filter changes

TypeScript interfaces

interface FilterConfig {
  key:       string;                          // Unique key — used in activeFilters object
  label:     string;                          // Label shown above or inside the control
  type:      'select' | 'search' | 'date' | 'date-range' | 'toggle';
  options?:  string[] | { label: string; value: string }[];  // For type: 'select'
  placeholder?: string;                       // For type: 'search'
  multiple?: boolean;                         // Allow multi-select (type: 'select')
}

// Example
const filterConfig: FilterConfig[] = [
  {
    key: 'plan',
    label: 'Plan',
    type: 'select',
    options: ['Starter', 'Pro', 'Enterprise'],
  },
  {
    key: 'status',
    label: 'Status',
    type: 'select',
    options: [
      { value: 'active',    label: 'Active' },
      { value: 'trial',     label: 'Trial' },
      { value: 'suspended', label: 'Suspended' },
    ],
  },
  { key: 'query', label: 'Search', type: 'search', placeholder: 'Tenant name...' },
];

// Active filters state
const [activeFilters, setActiveFilters] = useState<Record<string, any>>({
  plan:   'Pro',
  status: 'active',
});

Version history

See the Changelog for version history and breaking changes.