Description
Filtering in the datagrid component has been enhanced to include:
- Cross-column filtering
- Ability to easily clear filters
- Key:value filtering behavior
- Filter visibility
Documentation*
Filters (new section)
Filters are text-input based and are represented by dynamic labels above the datagrid. Filtering can be performed both on a per-column and cross-column level. Since this method of filtering is unique, explanations of how to add, clear, and edit filters are detailed below. Built-in filters currently include string filters—see Custom Filters [link to Custom Filters section] to find out how to build your own filters.
Adding filters
Filters can be added on a per-column or cross-column level. A dropdown of filtering suggestions will appear when the input is activated.
Per-column filters
Per-column filters are added by first typing or selecting the desired column to filter by, adding a “Key”. Any input typed or selected after the “Key:” is the “value” that will filter the column. Selecting an item from the dropdown or pressing enter will generate a filter.
Cross-column filters
Cross-column filters are added by directly typing the desired string to filter by into the input. Selecting an item from the dropdown or pressing enter will generate a filter. These filters are indicated with a globe icon.
Clearing filters
Individual filters can be cleared by clicking on the close icon of each filter.
When more than three filters are applied, a “Clear all” option will appear at the end of the filters to clear all active filters at once. A modal asking to confirm this destructive action will help prevent accidentally clearing all filters.
Info: Filters that exceed the width of the datagrid will overflow to a new row, which will push down the entire datagrid. While this behavior is not optimal, this design decision was made on the grounds that most users typically filter by only 1-3 filters.
Editing filters
Filters can be edited by clicking on the text portion of the filter label. This will open the same input that was used to add the filter.
Built-in filters
String filter
String filters offer users a text input, and the rows will be filtered based on a string-matching function you provide. You should now be familiar with our use of interfaces for this, so here is the interface your string matcher should implement:
code examples here
String filter with preset value
Info: More of these built-in filters will be available in future releases, including a date filter and value selection filter. If the one you are looking for isn't implemented yet, you can absolutely write it yourself using custom filters [link to Custom Filters section]. And if you think it's good, feel free to contribute back to Clarity and add it for everyone to use!
Custom Filters (existing section)
If the built-in filters introduced in the Filters section did not meet your needs, you can write your own filter with a fully custom template and controller, and both wrap it in and pass it to a component in your column declaration. This can be done whether or not your column is declared as a clrDgField, and will always take precedence over it if it is.
code examples here
In our example, we can create a “color picker" filter, rather than have to search by color name.
Full datagrid demo (existing section)
Info: Filters appear to the right of datagrid actions, with a line divider separating actions and filters. Filters that overflow the width of the datagrid will wrap below to the next row.
*To be included with the current documentation for datagrids
Note: This design was adapted from Symphony's UI. Thank you to the Symphony team for contributing their solution to Clarity.
Related/original issues: #753
type: enhancement ux: ready component: datagrid type: design resolution: enhancement request