Guidelines
Filters help users refine content efficiently based on their needs. Different filtering methods provide varying levels of control, from quick selections to detailed configurations.
Table Filtering
There two ways to filter content within a table: column filtering and table search.
Column Filter
Use column filtering to refine data within a specific column. This method is best for filtering by a defined attribute, such as Status or Date.
- The filter icon located in the column header triggers the filtering options.
- Once a filter is applied, a Filter Chip appears above the table, indicating the active filter.
-
The filter can be removed by clicking on the close icon inside the Filter Chip.
Table Search
Table search filters data across the entire dataset rather than a single column. It is ideal for broad searches when users are unsure which column contains the relevant information.
- The filter is activated after the user enters a search term in the Search Field.
- A Filter Chip appears above the table, displaying the active search criteria.
- The filter can be removed by clicking on the close icon inside the Filter Chip.
Quick Filter
Quick filters provide an easy way to refine content using Filter Chips with a dropdown option. They are ideal for simple, high-level filtering without requiring complex selections.
|
Item |
Info |
|---|---|
|
1 |
Parameter |
|
2 |
Value |
|
3 |
Action |
Placement
- If applied to the entire page, quick filters should appear in the top-right corner of the header (max 4 quick filters).
- If inside a card, they are placed in the top-right corner next to the 'More Actions' button.
- If applied to a content area like a data chart, they appear in the top-left corner above the dataset.
Best practices
- Quick Filters vs. Search: Don't use Quick Filters in Data Tables when search is enabled to avoid conflicts with Filter Chips and maintain a clean interface.
- Quick Filters and Table compatibility: If there is no Search and Column filtering on the page, the Quick Filters can be used alongside the table.
Don’t use Quick Filters on a page that already has a Search Field.
Quick Filters can be combined with tables that don’t have Column Filters or a Search Field.
- Quantity limit: Use up to 5 quick filters are allowed per report or visualization.
Limit the number of Quick Filters on a page.
- Single Select Only: Quick filters allow only one selection at a time (e.g., day, week, month) to keep filtering simple.
Quick Filters allow one selection only.
Don't allow multi-selection inside a Quick Filter.
Filter Bar
The Filter Bar provides a structured and persistent way to refine data within a layout. It is more than just a collapsible sidebar, it dynamically interacts with content, ensuring an efficient and connected user experience.
Connected to the Layout component
The filter bar is embedded within the page layout and triggered by a filter icon button.
Quick and accessible filtering
The filter bar offers a convenient and accessible way to to refine bills, reports, and metrics instantly, with real-time updates.
Best Practices
- Consider Page content type: If the content is dense, using a filter bar may reduce readability. In such cases, opt for a Floating Panel to prevent clutter.
Floating Panel
Use the Floating Panel for advanced filtering needs that require detailed, multi-criteria selections. It provides a more flexible and dynamic way to refine data, ideal for complex filtering scenarios such as date ranges, multiple attributes, or hierarchical filters.
Trigger Methods
- Filter Button in content area: When filtering content, a floating panel appears dynamically, allowing users to refine selections with greater flexibility.
