TableToolbar

Toolbar bar above a table with slots for search, filters, bulk actions, and a columns toggle.

TableToolbar is the control strip you place above a table. It lays out a built-in search box on the left (via the search config), filters next to it, and pins bulkActions, a columnsToggle, and any rightSlot content to the right edge — collapsing to a stacked layout on small screens. Use it to give DataTable/DataGrid or a hand-built Table a consistent header of controls.

Example

Preview

import { TableToolbar, Button } from '@officina/ui';
import { useState } from 'react';

function ListToolbar() {
  const [query, setQuery] = useState('');
  return (
    <TableToolbar
      search={{ value: query, onChange: setQuery, placeholder: 'Search users…' }}
      rightSlot={<Button size="sm">New user</Button>}
    />
  );
}

API

Prop	Type	Default	Description
bulkActions	ReactNode	—	Bulk-action controls shown when rows are selected.
columnsToggle	ReactNode	—	Column visibility toggle control.
filters	ReactNode	—	Filter controls rendered in the toolbar's filter slot.
rightSlot	ReactNode	—	Arbitrary content pinned to the right edge of the toolbar.
search	{ value: string; onChange: (value: string) => void; placeholder?: string; }	—	Built-in search box config; omit to hide the search input.

Example

API

On this page