Filtering
Allows users to create a focused data set by specifying data attributes and values of interest.
Users
Eric Soderberg
Taylor Seamans
Matthew Glissmann
Greg Furuiye
Vicky Avalos
Shimi Yacobi
What makes up filtering?
Filtering allows data to be narrowed down around a set of specified parameters. When users may not have a specific record in mind but are seeking to group data around a certain set of attributes, filtering should be used to allow the user to narrow the data and take action on relevant records.
If a user will likely be looking for a specific record as opposed to groups of data, consider implementing search.
Controls
Filter controls should live above the data content and facilitate a user's ability to locate and take actions against records of interest.
Filters
The way filters are displayed is dependent on the use case, number of filters, and data types of the content. These general guidelines are a starting point for how to present filtering in your application, but it's important to consider each recommendation in the context of your application's use cases.
Results
Results should live below the controls and display any records that meet filter criteria. Depending on the data types and use case, results may be represented by a List, Cards, or DataTable.
Pagination
If the number of records displayed per page is limited, pagination should be placed underneath the results.
When to use
Filters in a layer
When applying many filters at once, it is helpful to present them in a consolidated Layer.
Orders
- My PVT Cloud OrderCoke | HPE GreenLake Private CloudDelivered
- GEM_1Boeing | VMaaS for R&DIn transit
- GEM_2Coke | HPE GreenLake Private CloudCreated
- My PVT Cloud Order 2Boeing | MercuryCancelled
- Mercury 7Suncor Energy | VMaaS for R&DReady to ship
- GEM_3Coke | MercuryCreated
Filtering with selectable results
The summary displayed beneath the search input should always reflect the user's actions. When filtering is combined with selection, the summary text should adjust for the following scenarios:
- No filters, no selections — The summary should read "X items", where X is the total number of items.
- Filters applied, no selections — The summary should read "X results of Y items".
- Selections made — The summary should read "X of Y items selected", where Y is the total number of results that meet the filter criteria or the total number of items if no filtering has been applied.
Servers
Status | ||||||
---|---|---|---|---|---|---|
Server 1 | 8899569448808967 | Not connected | On | Proliant SY 480 Gen10 | ||
Server 2 | 482148808968 | Connected | Off | Proliant SY 990 Gen9 | ||
Server 3 | 3890108963 | Not connected | Off | Proliant SY 990 Gen9 | ||
Server 4 | 8508964 | Connected | On | Proliant SY 660 Gen10 | ||
Server 5 | 3123i4264 | Connected | On | Proliant SY 660 Gen10 | ||
3M442501WV | 4208964 | Connected | Off | ProLiant DL380 Gen10 | ||
ZFD3712GP | CCD21712GP | Not connected | On | -- | ||
FTR1237J | GGF24045X | Not connected | On | -- | ||
FTRXX237J | FT0237J | Not connected | Off | -- | ||
FTR8237J | 229501KR | Connected | Off | ProLiant DL380 Gen10 | ||
2221K2501KRL | 2282501KR | Connected | On | ProLiant DL385 Gen10 Plus | ||
SGFF850T8LK | SGFF850T8LK | Not connected | Unknown | -- | ||
22833501KR | 228298501KR | Not connected | Unknown | -- | ||
SGFF850T8LK | 2332501WR | Connected | On | ProLiant DL380 Gen10 | ||
MXQ824045Q | MXQ824045Q | Connected | On | ProLiant DL360 Gen10 | ||
S76GH939821GF3 | S76GH939821GF3 | Connected | On | ProLiant DL360 Gen10 | ||
C89-20146 | C8920146 | Not connected | On | -- | ||
2LLP73300ZX | 2LLP73300ZX | Not connected | Unknown | -- | ||
DAOI-8240458 | MX78SA458 | Connected | On | ProLiant DL360 Gen10 | ||
9AS-02708SP | 9AS-02708SP | Not connected | On | ProLiant DL325 Gen10 Plus | ||
DF-R501X5.lab | DF-R501X5 | Connected | On | ProLiant DL380 Gen10 | ||
JYL150TYL | JYL150TYL | Not connected | On | -- | ||
DXS4045N | DXS4045N | Not connected | On | -- | ||
XFR.0278 | M48902278 | Connected | On | ProLiant DL360 Gen10 | ||
RRR50TXT | RRR50TXT | Not connected | Unknown | -- | ||
CFDE0YPQ | CFRT0YPQ | Not connected | On | -- | ||
rel34.lab.com | 45FREWY3 | Connected | On | ProLiant DL380 Gen10 | ||
92RO010Z | FRE43210Z | Connected | On | ProLiant DL380 Gen10 | ||
RRE44045S | 39TO24045S | Not connected | Off | -- | ||
RT21867 | CN70RT867 | Not connected | Unknown | -- | ||
IL1Kl.lab | 2M29001KH | Not connected | On | ProLiant DL380 Gen10 | ||
453FFEW3 | 56TGD321 | Connected | On | ProLiant DL360 Gen10 | ||
5G009LK | SFEL2T9LK | Not connected | On | -- | ||
TR902JG21 | TR902JG21 | Connected | On | ProLiant DL380 Gen10 | ||
RE4.322.lab | HTR340465 | Connected | On | ProLiant DL360 Gen10 | ||
LME4.ir.lab | 2M25323Y7 | Connected | On | ProLiant DL380 Gen10 | ||
34265FDE49 | MXFFO9274 | Connected | On | ProLiant DL360 Gen10 | ||
CFDE1GBW | CFDE1GBW | Connected | On | ProLiant DL385 Gen10 Plus | ||
524FAV32F | 524FAV32F | Connected | Off | ProLiant DL360 Gen10 | ||
8742DS576 | 8742DS576 | Connected | On | ProLiant DL380 Gen10 | ||
2MFD5t0110 | FDE34zh0110 | Connected | On | ProLiant DL380 Gen10 | ||
34EP0065 | 54FDE0065 | Not connected | On | -- | ||
709522R | 7621PP22R | Not connected | On | -- | ||
432DE45TH | 432DE45TH | Connected | Off | ProLiant DL360 Gen10 | ||
FG500352 | FG500352 | Connected | Off | ProLiant DL380 Gen10 | ||
0-S024046C | 0-S024046C | Connected | Off | ProLiant DL360 Gen10 | ||
U005E936 | U005E936 | Not connected | On | -- | ||
6432FSCN | 6432FSCN | Connected | On | ProLiant DL380 Gen10 Plus | ||
3234MFG5.lab | 452DF002R8 | Connected | Off | ProLiant DL380 Gen10 | ||
45FER2sW | 45FER2sW | Connected | On | ProLiant DL360 Gen10 | ||
Guidelines
Filtering should help users quickly narrow down data sets by selecting certain parameters to define the relevant data bounds. Different types of inputs may better suited for filtering depending on the type of data.
Use your best judgement around which input type is appropriate for the data you are filtering. However, here are a few things to consider:
- Is data presented as Cards or List? When there is ample screen space, display the filters to the left of the data as a persistent column. Once space becomes limited, use a single filter button that opens a Layer containing the filters.
- Is there more than one filter? Use a single button with filter icon that opens a Layer containing the filters.
- Is the user going to be selecting multiple options? Filter with CheckBoxGroup.
- Is the user aiming to filter based on a range? Filter with RangeSelector.
- Does your filter have a large number of options (>10)? Filter with CheckBoxGroup in a side-anchored Layer. Present a prioritized subset of the options to the user first and provide an accompanying "Show more" anchor that will reveal the rest of the options when clicked. When utilizing the "Show more", your filters should be displayed in a side-anchored modal since it provides an intuitive vertical scrolling behavior.
- Does your filter have a massive number of options (>100)? First consider if you are able to break this filter into more manageable groupings. However, if you are unable to break up the filter options into smaller groups, consider using a scrollable CheckBoxGroup. This approach should be used as a last resort since research demonstrates that this pattern is not ideal for user experience.
More examples of filtering
Filtering with RangeSelector
Storage
- Asup-array01-lvs (default)San Jose, CAAvailability: 90.2%
- Des-K8-Sym-R5-3 (default)San Jose, CAAvailability: 70.3%
- Dev36-erray01 ( default)Houston, TXAvailability: 95.8%
- asup-array1 (default)Fort Collins, COAvailability: 85.1%
- asup-array21 (default)New York, NYAvailability: 53.4%
- Dpe-R3-19 (default)Houston, TXAvailability: 77.3%
- Asup-array10-lvs (default)Fort Collins, COAvailability: 30.4%
Filtering with Select
Filtering with Select should be used when the goal of the user will likely be to filter data around one specific criteria. If the user will be selecting multiple criteria, consider using CheckBoxGroup.
Hosts
- Apex-ServerReady
- AuroraEdge-7.7.-edgedeploy4Paused
- ECAAS3Ready
- ECP-Master-01Ready
- ECaas-EdgeSite1Paused
- IronMan-2Ready
- california_1Paused
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.