DataToolbar

The DataToolbar component gives dense admin tables a stable control surface for search, filters, bulk actions, and result metadata.

Import

import {
  DataToolbar,
  DataToolbarActions,
  DataToolbarFilters,
  DataToolbarMeta,
  DataToolbarSearch,
  FilterSummary,
  FilterSummaryClear,
  FilterSummaryItem,
  FilterSummaryList,
} from '@nim-ui/components';

Basic Usage

Code

<DataToolbar aria-label="Order table controls">
  <DataToolbarSearch>
    <Input placeholder="Search orders" aria-label="Search orders" />
    <DataToolbarMeta>184 results</DataToolbarMeta>
  </DataToolbarSearch>
  <DataToolbarFilters aria-label="Order filters">
    <Button variant="outline" size="sm">Open only</Button>
    <Button variant="outline" size="sm">High risk</Button>
  </DataToolbarFilters>
  <DataToolbarActions aria-label="Order actions">
    <Button variant="outline" size="sm">Export</Button>
    <Button variant="primary" size="sm">Create order</Button>
  </DataToolbarActions>
</DataToolbar>

Active Filters

StatusOpen

RiskHigh

WarehouseBKK-02

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} />
    <FilterSummaryItem label="Warehouse" value="BKK-02" onRemove={removeWarehouse} />
  </FilterSummaryList>
  <FilterSummaryClear onClear={clearFilters} />
</FilterSummary>

Props

Name	Type	Default	Description
`aria-label`	`string`	-	Accessible label for the toolbar.
`className`	`string`	-	Additional classes for spacing, borders, and responsive layout.
`children*`	`ReactNode`	-	Toolbar groups such as search, filters, metadata, and actions.

Backoffice Guidance

Put search first so operators can narrow a table before scanning.
Keep filters as short controls with explicit labels.
Use DataToolbarMeta for result counts and sync freshness; use FilterSummary when active filters need removal controls.
Keep export and create actions in DataToolbarActions.

DataToolbar

Import

Basic Usage

Active Filters

Props

DataToolbar

Backoffice Guidance

On this page