# Epic DREAM-150 - Add quick filters and table configuration to SubHeaders

Project: Stream Design System
Status: closed
URL: https://community.openproject.org/work_packages/DREAM-150

## Detailed specification

### Motivation and background information

### Acceptance criteria

### Out of scope

| Attribute | Value |
| --- | --- |
| Mockups |  |

## Planning

| Attribute | Value |
| --- | --- |
| Roadmap |  |
| Date |  |
| Votes |  |
| List |  |
| Target versions | Wish List |
| Sprint |  |
| Backlog bucket |  |
| Relevance |  |

## Subitems

| ID | Type | Subject | Status | Assignee | Target versions | Project | Priority | Spent time |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-151 | Feature | Work packages - Quick filters | new |  |  | Stream Design System | Medium |  |
| DREAM-152 | Feature | Work packages - Configure table | new |  |  | Stream Design System | Medium |  |

## Bugs and other work packages

_No work packages_

## Details

| Attribute | Value |
| --- | --- |
| Module | Frontend components and Primer design system / Quick filter, Frontend components and Primer design system, Modules and project features / Work packages |
| Enterprise plan |  |
| Labels |  |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Designer | Marc Alcobé |
| Developers |  |
| Requested by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| Work |  |

## Description

# User Problem

## User

*   All OpenProject users
    

## Problem

*   Applying relevant filters to table views is currently complex.
    
*   Configuring the table is complex and always requires opening the configure view dialog.
    

## Pain

*   Quick filters and quick view configuration would allow the user to perform actions faster and without need to enter advanced views.
    

# Business Case

## Solution

*   Apply the following approach to all pages that have SubHeaders:
    
    *   **Quick filters:**
        
        *   The current filter button of the SubHeaders will no longer open the filter box. Instead it will open an [Action menu](https://primer.style/components/action-menu) that will provide the most relevant quick filters for each case.
            
        *   The current filter box will be moved to a dialog that can be opened from the last option on the [Action menu](https://primer.style/components/action-menu) called "Advanced filters".
            
        *   The filter options will be redesigned and reanalysed to be improved on all pages.
            
    *   **Configure table:**
        
        *   A new button will be added to the right side of the SubHeaders to allow configuring the table bellow.
            
        *   This button will open an [Action menu](https://primer.style/components/action-menu) with the relevant options for each case.
            
*   For more details on what quick filters and configure options every page has refer to the Feature section bellow.
    

# Features

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Feature</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Status</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Assignee</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"></p></td></tr></tbody></table></figure>