FilterSummary

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

Active Filters

View 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

Search and Active Filters

View 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 Active Filters

View Code

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

Props

FilterSummary

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.