DataViewToolbar

DataViewToolbar is a compositional wrapper for list and table screens that need search, status filters, clear actions, row counts, and secondary actions in one surface. It is built on top of FiltersBar.

Basic usage

Live Editor

function PatientsToolbar() {
  const [search, setSearch] = React.useState('');
  const [status, setStatus] = React.useState('all');

  return (
    <ThemeProvider>
      <DataViewToolbar
        title="Patients"
        description="Search and segment active patient records"
        itemLabel="patient"
        selectedCount={2}
        totalCount={48}
        search={search}
        status={status}
        statusOptions={[
          { value: 'all', label: 'All status' },
          { value: 'active', label: 'Active' },
          { value: 'discharged', label: 'Discharged' },
        ]}
        actions={<Button size="sm">Export</Button>}
        onSearchChange={setSearch}
        onStatusChange={setStatus}
        onClear={() => {
          setSearch('');
          setStatus('all');
        }}
      />
    </ThemeProvider>
  );
}

Result

Loading...

Notes

• Use summary when you need a custom line instead of the built-in count summary.
• filtersExtra adds custom controls beside the stock search and status inputs.
• DataViewToolbar is a client-side composition helper and pairs naturally with PageHeader, DataTable, and Pagination.