Add search, filtering and sorting

Once an app holds more than a screenful of records, finding things becomes the feature. Search, filters and sorting are each a sentence to add, and together they're the difference between a list people use and a list people scroll past.

Add a search box

Start with the simplest tool: free-text search. Tell Vorx which fields it should look across so results feel intuitive.

Add a search box to the contacts list that matches on name, email and company as the user types.

Because filters run as a normal query against your app's own database, results update without a full page reload.

Add filters for the common cases

Search handles "I know what I'm looking for." Filters handle "show me everything that matches a rule." Add the ones your users reach for:

• A status dropdown, such as Active, Pending or Archived
• A date range on created or updated
• A category or tag filter
• A toggle for records assigned to the current user

Add filters for status and a date range on the created field, and let them combine with the search box.

Make columns sortable

Sorting brings the most relevant records to the top. Ask for the important columns to be sortable and set a sensible default.

Make the name, created date and amount columns sortable, and sort by most recent by default.

The default matters more than the rest. Most people never touch a sort control, so whatever order you choose is the order they'll live with.

Combine everything cleanly

Search, filters and sorting are strongest together. Ask for them to work as one so a user can narrow a list step by step.

Keep the search, filters and sort all active at once, and show a count of matching records.

A visible count reassures people the controls are working, and makes an empty result obvious rather than confusing.

Polish the empty and busy states

• Show a friendly "no results" message with a clear way to reset filters
• Add a "clear all" button when several filters are active
• Keep the list readable when there are thousands of records

That last one is why you test with volume. Seed a few thousand rows — "seed 2,000 contacts with a realistic spread of statuses" — and watch what happens. A list that's instant at twenty records and sluggish at two thousand needs pagination or a lighter query, and it's far cheaper to find that out now.

Check every combination

Filters interact. Search plus a status filter plus a date range is a different query from any of them alone, and it's the combination that produces the surprising empty screen. Click through a few of them in the preview before you publish, including the ones you expect to return nothing.

For more on the data underneath these lists, see Model your data and seed it.

In the docs: Your data model.