Data Table - Toolbars

The toolbar blocks show the controls that sit above a table. Each one filters a small typed dataset on the client (tickets, members, projects, orders, deals or products), so you can see the pattern end to end and then point it at your own API.

All names, companies and numbers are fictional. Counts and totals are announced through aria-live regions, and every control has an accessible label.

Style One

Search field with status toggle chips. Active filters show up as removable chips below the toolbar, with a clear all link and a live result count.

Style Two

Faceted filters. Role and status buttons open popovers with checkbox lists and per option counts, show how many options are selected and have a reset button.

Style Three

Column visibility. A Columns dropdown toggles each column with checkbox items, keeps at least one column visible and has a show all shortcut.

Style Four

Date range filter. A preset range select and search field filter orders against a reference date, with summary cards for the order count and revenue in range. Pass today to change the reference date.

Style Five

Saved views. Tabs apply preset filters with a count on each, and the save view button turns the current search into a new tab.

Style Six

Density toolbar. A toggle group switches between comfortable and compact rows, a select changes the page size and an export button is ready for your handler.