Data Tables, Search and Filters in SaaS
Tables are where SaaS users spend their day. Small details, such as which columns show by default, whether filters are visible, and what happens with no results, decide whether the product feels fast or frustrating.
What makes a good SaaS data table?
A good SaaS data table shows the few columns users scan most, makes filters visible as removable chips, supports sorting by the column users care about, offers saved views for repeated searches, and makes bulk actions obvious once rows are selected. It also handles loading, no results and errors clearly.
What does a well-designed table look like?
The mock-up shows a customer table with a search box, active filter chips, a bulk action bar after selecting rows, a sorted column and status tags. The pins match the notes below it.
| Account | Plan | MRR | Usage | Renews |
|---|---|---|---|---|
| Contoso | Team | $1,200 | −40% | Oct 24 |
| Fabrikam | Team | $900 | Payment failed | Nov 2 |
| Adatum | Team | $650 | −18% | Dec 15 |
3 of 412 customers · Sorted by renewal date4
- Clear title and search that says what it searches.
- Filters as chips users can see and remove.
- Bulk actions appear only when rows are selected.
- Result count and sort so users know what they’re seeing.
Keep the default column set short and let users add columns. A table that tries to show everything forces horizontal scrolling on most screens.
How should search and filters work?
Search should match what users expect, such as names, emails and IDs, and say what it searches in the placeholder. Filters should be visible, combinable and removable one by one, and the page should show how many results remain. Saved views let users keep frequent combinations, such as ‘My at-risk accounts’.
- Show active filters as chips with a remove control.
- Keep filters in the URL so views can be shared.
- Offer saved views for repeated searches.
- Show the result count after every change.
What should no results, loading and errors look like?
No results should say what was searched and offer to clear filters or widen the search, not just ‘No data’. Loading should show the table’s shape, so the page doesn’t jump. Errors should say what failed and offer to retry. Patterns for each are on empty states and error messages and microcopy.
Check the spelling, or search all customers.
Notice the typo in the search. A good no-results state assumes a small mistake before assuming the data doesn’t exist.
Show users why they see what they see.
Visible filters, a result count and the sort order make a table trustworthy. Hidden state makes it feel broken.
How do tables work on small screens?
On small screens, turn each row into a card with the two or three most important values, keep filters in a slide-up panel, and keep bulk actions reachable at the bottom. See mobile SaaS UX. For the summary that sits above the detail, see dashboard design.
Frequently asked questions
How many columns should a SaaS table show?
Usually five to seven by default, with the option to add more.
How should filters be displayed?
As visible chips that can be removed one at a time, with a result count.
What are saved views?
Saved combinations of filters and sorting, such as ‘My at-risk accounts’, available in one click.
What should a no-results state say?
What was searched, the likely cause, and how to clear filters or widen the search.
When should bulk actions appear?
Once rows are selected, in a clear bar above the table.
How should tables work on mobile?
As cards with the most important values, with filters in a panel and actions within reach.