As part of my working for the Planning app, I have started thinking more about a design pattern for a table toolbar. I'm curious to hear thoughts, as I think it would be important to have a common toolbar component across Aragon for any page that has data where users may want to search, filter, and/or take action on.

Requirements

There should be a two level toolbar. The first row contains: Keyword Search, Applied Filter Tiles, Action Menu. The second row contains: Select All Checkbox, Filter options (dropdown menus), Overflow menu (Responsive), Sort menu.

Keyword Search: A keyword search box that ideally has autocomplete, and it can autocomplete different data fields from the table.
Actions Menu: There is an optional Actions menu that can be tied to the row selections for bulk actions.
Select All: There is a "Select All" checkbox that will select all of the rows that match the query. This is only displayed on UIs where bulk actions are enabled. In some cases, we may want to limit the number of rows that can be selected (if it's going to be triggering a blockchain txn - gas costs etc)
Filter options: A series of multi-select filters mapped to the data fields of the table.
Overflow menu: An overflow menu ( "..." ) will be visible when all of the Filter options don't visually fit (based on browser resolution). Once the overflow menu is clicked, it will remain toggled on until the user clicks the icon again to toggle it off.
Applied Filter Tiles: Directly to the right of the Keyword Search box, there will be "applied filter tiles" for each individual checkbox selected from the Filter menus, or from typing into the keyword search. A "Clear Filters" link will also be displayed as soon as there is one tile, and this resets to the table to the default query state (except it doesn't reset the Sort option).
Sort: Ability to sort the data with various options, such as date, transaction amount etc. The options can be different for each table.

Nice to haves / future considerations

The toolbar should eventually support toggling between different views. (e.g. ability switch between List /Table / Card view). This isn't pictured yet, but the view toggle icons would go directly to the left or right of the Sort menu.
Instead of the Filter options being in a row in a toolbar, a left pane / faceted search pattern would also be nice as an alternative design pattern. But for this, we would need to enhance the Aragon Wrapper to have a slimmer version w/ icons only or ability to hide the left app menu, because two left panes will be weird.
Ability to save a search

aragon / design

Table toolbar design for filtering & searching data in Aragon #8

Requirements

Nice to haves / future considerations

Default View

Filter Options

Applied Filter Tiles

Overflow Menu - 1

Overflow Menu - 2