FilterSummary

Active filter chips with removable values and clear-all behavior for admin tables

The FilterSummary component keeps active search and table filters visible after the filter menu closes. Use it below DataToolbar so operators can remove individual constraints without losing table context.

Import

import {
  FilterSummary,
  FilterSummaryClear,
  FilterSummaryItem,
  FilterSummaryList,
} from '@nim-ui/components';

Basic Usage

StatusOpen

RiskHigh

WarehouseBKK-02

Code

<FilterSummary aria-label="Active order filters">
  <FilterSummaryList>
    <FilterSummaryItem label="Status" value="Open" onRemove={removeStatus} />
    <FilterSummaryItem label="Risk" value="High" onRemove={removeRisk} />
    <FilterSummaryItem label="Warehouse" value="BKK-02" onRemove={removeWarehouse} />
  </FilterSummaryList>
  <FilterSummaryClear onClear={clearFilters} />
</FilterSummary>

DataToolbar Integration

StatusOpen

RiskHigh

Code

<DataToolbar aria-label="Order table controls">
  <DataToolbarSearch>
    <Input placeholder="Search orders" aria-label="Search orders" />
    <DataToolbarMeta>184 results</DataToolbarMeta>
  </DataToolbarSearch>
  <DataToolbarActions aria-label="Order actions">
    <Button variant="outline" size="sm">Export</Button>
  </DataToolbarActions>
</DataToolbar>
<FilterSummary aria-label="Active order filters">
  <FilterSummaryList>
    <FilterSummaryItem label="Status" value="Open" onRemove={removeStatus} />
    <FilterSummaryItem label="Risk" value="High" onRemove={removeRisk} />
  </FilterSummaryList>
  <FilterSummaryClear onClear={clearFilters} />
</FilterSummary>

Empty State

No filters applied

Code

<FilterSummary aria-label="Active filters">
  <FilterSummaryList emptyText="No filters applied" />
</FilterSummary>

Props

Name	Type	Default	Description
`aria-label`	`string`	-	Accessible label for the active filter region.
`className`	`string`	-	Additional classes for spacing, width, or layout integration.
`children*`	`ReactNode`	-	FilterSummaryList and optional FilterSummaryClear.

FilterSummaryItem

Name	Type	Default	Description
`label*`	`ReactNode`	-	Filter field label such as Status, Risk, or Warehouse.
`value*`	`ReactNode`	-	Visible active value for the filter.
`onRemove`	`MouseEventHandler<HTMLButtonElement>`	-	Called when the remove button is pressed.
`removeLabel`	`string`	-	Custom accessible label for non-text labels or values.

FilterSummaryList

Name	Type	Default	Description
`emptyText`	`ReactNode`	`'No active filters'`	Compact empty copy shown when no filter chips are rendered.

Backoffice Guidance

Place FilterSummary below DataToolbar, not inside search inputs or menus.
Keep filter labels short and values scannable.
Always provide either per-filter remove callbacks or a clear-all action when filters are active.
Use removeLabel when label or value content is not plain text.

FilterSummary

On this page