SPFx FilterBar Control with PnP React Controls

The SharePoint Framework ecosystem often needs a way to show active filters to users, especially when building search-driven or data-driven web parts. This is where the FilterBar control from PnP React Controls becomes useful.

The FilterBar acts as a visual summary of applied filters and allows users to remove individual filters or clear all filters at once. It improves usability by making filtering transparent and interactive.

Official documentation:
PnP FilterBar Control

Why is FilterBar important in SPFx?

In many enterprise SharePoint solutions, users filter:

• Documents by metadata
• Lists by status
• Search results by category
• Reports by date
• Tasks by owner

Without a visual filter summary, users can easily lose context.

The FilterBar solves this by:

• Displaying all active filters
• Allowing quick filter removal
• Supporting “Clear All”
• Keeping state synchronized with your React component

This is especially useful when combined with:

• Search APIs
• List filtering
• Taxonomy filters
• Dynamic forms

Installing the control

Inside your SPFx project:

npm install @pnp/spfx-controls-react --save
npm install
heft start

Understanding the code

Your implementation is a controlled component.

That means:

• React stores the filters in state
• FilterBar renders based on that state
• Removing filters updates the state
• UI refreshes automatically

Full example

FilterBarComponent.tsx

import * as React from 'react';
import { useState } from 'react';
import { FilterBar } from "@pnp/spfx-controls-react/lib/FilterBar";
interface IFilterBarItem {
  label: string;
  value: string;
}
const FilterBarComponent: React.FC = () => {
  const [filters, setFilters] = useState<IFilterBarItem[]>([
    { label: "Title", value: "title 1" },
    { label: "Field1", value: "value 1" },
    { label: "Title", value: "title 2" }
  ]);
  const onClearFilters = () => {
    console.log("Cleared all filters");
    setFilters([]);
  };
  const onRemoveFilter = (label: string, value: string) => {
    console.log(`Cleared ${label} ${value}`);
    const updatedFilters = filters.filter(
      (f) => !(f.label === label && f.value === value)
    );
    setFilters(updatedFilters);
  };
  return (
    <div>
      <FilterBar
        items={filters}
        inlineItemCount={3}
        onClearFilters={onClearFilters}
        onRemoveFilter={onRemoveFilter}
      />
    </div>
  );
};
export default FilterBarComponent;

Code explanation

1. Importing React and FilterBar

import * as React from 'react';
import { useState } from 'react';
import { FilterBar } from "@pnp/spfx-controls-react/lib/FilterBar";

We import:

• React
• React state hook
• PnP FilterBar control

The FilterBar component handles the visual rendering of active filters.

2. Defining the filter model

interface IFilterBarItem {
  label: string;
  value: string;
}

Each filter needs:

Example:

{ label: "Status", value: "Approved" }

3. Initial state

const [filters, setFilters] = useState<IFilterBarItem[]>([

This creates the active filter collection.

Initial values:

[
  { label: "Title", value: "title 1" },
  { label: "Field1", value: "value 1" },
  { label: "Title", value: "title 2" }
]

These render immediately.

4. Clearing all filters

const onClearFilters = () => {
  setFilters([]);
};

This empties the entire collection.

Result:

Before:

Title: title 1
Field1: value 1
Title: title 2

After:

(no filters)

5. Removing one filter

const onRemoveFilter = (label: string, value: string) => {

This removes a specific filter.

Filtering logic:

const updatedFilters = filters.filter(
  (f) => !(f.label === label && f.value === value)
);

Example:

Remove:

Title = title 1

Remaining:

Field1 = value 1
Title = title 2

6. Rendering FilterBar

<FilterBar
  items={filters}
  inlineItemCount={3}
  onClearFilters={onClearFilters}
  onRemoveFilter={onRemoveFilter}
/>

Properties:

How React flow works

Flow:

State → UI → User Action → Event → State Update → Re-render

Example:

1. Load 3 filters
2. User clicks X on one
3. onRemoveFilter runs
4. State updates
5. UI re-renders

This is pure React state management.

Real-world SPFx scenarios

Search filters

Category = HR
Department = Finance
Year = 2026

Document library filters

Status = Approved
Type = Contract
Region = LATAM

Task dashboards

Assigned To = John
Priority = High
Progress = Open

Best practices

Use FilterBar when:

✅ Multiple filters exist
✅ User needs transparency
✅ Search UI is complex
✅ Dynamic filtering is used
✅ Refiners exist

Avoid when:

❌ Only one filter exists
❌ Static filtering is used
❌ Filters are hidden

Integration ideas

FilterBar works very well with:

• Microsoft Graph search
• SharePoint list REST API
• PnPjs
• Taxonomy pickers
• People pickers
• DynamicForm

Example architecture:

Filter controls → State → API query → Results → FilterBar

Conclusion

The FilterBar is a small but powerful usability control in SPFx. It helps users understand what filters are active and provides immediate ways to remove them.

In modern SharePoint applications, filter visibility is critical for user experience, especially in search-heavy solutions.

This control should be considered a standard pattern for:

• Search web parts
• Dashboard solutions
• Reporting interfaces
• Advanced list filtering

It keeps your UI clean, transparent, and user-friendly.

Roadmap Progress