Filters and selection
Make the selection scope explicit. Do not silently include hidden records in a bulk action.
Filter & explore
Help people narrow a dataset, inspect records, and keep their place.
Find the requests that need attention.
Use for an operations queue, customer list or record explorer where people need to narrow a large set and inspect one record without losing their place.
- 01Start with a useful default view.
- 02Narrow the set and inspect a record.
- 03Return to the same view and selection.
Design beyond the happy path.
Select a state to see what the interface should communicate. These are illustrative snapshots; try the live component below.
EXAMPLE WORKSPACEDefault view
Requests · all open
3 requests in this illustrative queue
- REQ-1042
- In review
- REQ-1043
- Assigned
- REQ-1044
- New
DESIGN INTENT
Default view
Start with useful records and clear column labels. Show what is currently included.
Try the working example ↓EXAMPLE WORKSPACEFiltered
Requests · needs review
1 result · Status: In review
- REQ-1042
- In review
DESIGN INTENT
Filtered
Keep active filters and the result count visible. A filter changes the visible set, not the meaning of selection.
Try the working example ↓EXAMPLE WORKSPACENo results
No matching requests
No records match Status: Closed and Team: Support.
Clear filtersDESIGN INTENT
No results
Explain why the view is empty and offer a direct way to broaden it. Do not imply that the entire dataset is empty.
Try the working example ↓EXAMPLE WORKSPACEInspect
REQ-1042 · Equipment
In review · Workplace services
- Requested by
- Alex Morgan
- Needed by
- 20 October
DESIGN INTENT
Inspect
Keep filters, sorting and the current page when the person returns. Preserve the context they used to find the record.
Try the working example ↓WORKING EXAMPLE
Component reference →Filter & explore
Filter a customer column, change the sort order, and expand a row to inspect its details. This working example uses sample customer records.
Make the important choices explicit.
Large datasets
For database-backed data, perform filtering and paging on your server and return the corresponding total.
Details without detours
Use row details or a Drawer for a short inspection. Use a detail page for a longer task.
Keep the behavior. Bring your data.
The examples demonstrate interaction using sample data. Your application owns the real records, permissions and persistence.
- 01View state
- Keep filter, sort and page state when leaving and returning.
- 02Data requests
- Handle loading, permissions, totals and errors in the application.
- 03Record actions
- Confirm the selected IDs and validate permissions on the server.
BUILD THIS PATTERN WITH
All patterns →