DataTableToolbar

Search, filters, columns, and actions for tables.

Overview

DataTableToolbar is a composable block that provides a complete toolbar interface for data tables. It includes search input, filter controls, primary and secondary actions, and bulk action support. Perfect for enterprise data management interfaces.

1
2
3
4
5
6
7
8
9
10

Install

1

Code Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Props

• search - Search value (optional)
• searchPlaceholder - Search placeholder text (default: "Search...")
• onSearchChange - Search change handler (optional)
• filters - Filters configuration array (optional)
• filterValues - Current filter values (optional)
• onFilterChange - Filter change handler (optional)
• primaryActions - Primary action buttons (optional)
• secondaryActions - Secondary action buttons (optional)
• selectedCount - Number of selected items for bulk actions (optional)
• showClearFilters - Show clear filters button (default: true)
• className - Additional className (optional)

Features

• Search input with icon
• Multiple filter types (select, text, date)
• Primary and secondary action buttons
• Bulk action support with selected count
• Clear filters functionality
• Responsive layout
• Fully accessible

Related Blocks

• PaginationFooter - Use together for complete table controls
• UsersListTemplate - Complete template using DataTableToolbar
• DataTable - Table component to use with toolbar

Accessibility

DataTableToolbar uses semantic HTML and proper form controls. All inputs are keyboard accessible and include proper labels. Action buttons have appropriate ARIA labels.