Filtering per column
- Overview
- User Stories
- Functionality
- Test Scenarios
- ARIA support
- Assumptions and Limitations
- References
Provide filtering per column and correspoding user interface.
Elaborate more on the multi-facetted use cases
As a citizen developer, I want:
- to be able to provide filtering per column, so that the users can operate with the data in the grid.
- to be able to provide second condition to the column, so that the users can have complex filtering.
- to be able to provide a way to change logic operator between conditions, so that the users can have the exact results they need.
As an user, I want to:
- have a filtering UI, so that I can filter the data in the grid.
- access that UI from the header icon corresponding to the column I want to filter.
- have immediate filtering, so that I won't need to click once more to filter.
- have default conditions applied, so that I can filter faster.
- have conditions to choose from, so that I can make a more precise filtering depending on my needs.
- have the input on focus, if there is an input to а chosen condition, so that I can make an input right away.
- be able to quickly clear the input, using a clear icon in the input.
- have a one condition UI, so that I can filter depending on my needs.
- have a non selected exclusive AND / OR toggle options after the first condition that toggle a second condition.
- have the second condition removed/cleared if I deselect a selected toggle button.
- having Reset Button so that I can reset all conditions at once.
- have a Reset button inactive when there is no filter applied, since there is nothing to reset.
- to have an option to have a Close button so that I can close it without clicking outside the toggle.
Must-have before we can consider the feature a sprint candidate
...
Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up
3.1. End User Experience
The component offers filtering by two conditions with or without values. As the user chooses to apply filters on the grid they have to choose the first condition, input custom value if needed.
If they need a second condition to be applied the user chooses the condition on/and from a toggle button and the second condition group appears. Untoggling one of the condition buttons (AND / OR) deactivates and resets the second condition.
The filter is applied instantly. The entire filter can be reset or the dropdown closed.
3.2. Developer Experience
3.3. Globalization/Localization
Describe any special localization requirements such as the number of localizable strings, regional formats
3.4. User Interface
3.5. Navigation
3.6. API
| Name | Description | Type | Default value | Valid values |
|---|---|---|---|---|
| Name | Description | Return type | Parameters |
|---|---|---|---|
| Name | Description | Cancelable | Parameters |
|---|---|---|---|
- One or more conditions can be applied to a single column:
- number column;
- string column;
- date column;
- Two conditions can be applied to two columns at once
- Clicking And or Or button shows second select and input for adding second condition
- After filling the first condition the grid is filtered, then after adding the second condition the grid is updated
- Clicking Reset button clears all conditions for column
- Unselecting And/Or:
- hides second condition UI
- removes the second filter expression
- preserve the values in the second condition UI
- Adding two conditions to a single column through API correctly updates the filter dialog
- Clearing filter through API clears UI too
Specify only if applicable
| Assumptions | Limitation Notes |
|---|---|