Table
You might say
This order data is a mess. Lay it out in a table with one order per row.
Compare many records across the same columnsTables suit orders, members, inventory, and other records that share the same fields. Sorting, filtering, and pagination each need deliberate behavior. When there are many columns, plan for smaller screens, horizontal scrolling, and clear header relationships.
When to use it
- Compare records field by fieldTasksStatusSign-in pageIn progressPayment flowCompleted
- Sort and filter structured data
- Select several rows for a bulk action
- Review dense operational information
When NOT to use it
- Use a table for content that has no shared columns
- Put every possible field on screen at once
- Show too many columns unchanged on a narrow phone
- Use a tree when the task is really comparing several fields
Anatomy
ProjectStatusOwner
Website refreshIn progressAlex Chen
The entire table: a header + several data rows
Explains each column; sort controls usually go here too
One row per record
The smallest unit where a row and column meet; keep its content concise
Variants
Basic
NameInventory
Keyboard210
Mouse86
Use this for a modest amount of data with no special requirements
Striped
NameInventory
Keyboard210
Mouse86
When there are many rows, use stripes to help differentiate between adjacent rows
Compact
NameInventory
Keyboard210
Mouse86
Display42
For dense admin tables that fit more rows on screen
Sortable
NamePrice ↑
Keyboard¥99
Mouse¥199
When people need to sort by a column to find an item quickly
Typical use cases
Order management
UserRoleStatus
Alex ChenAdministratorActive
Maya LeeMemberDisabled
Member list
AllPending paymentPending shipmentCompleted
Order numberProductAmountStatus
2026071801Wireless headphones¥ 299.00Pending payment
2026071796Mechanical keyboard¥ 199.00To be shipped
Inventory
July Sales Report
WeeklySales ↓Number of ordersChange
Week 29¥ 286,4003,146↑ 12.5%
Week 28¥ 254,6002,903↓ 3.2%
Analytics report
Activity log
TimeTeam memberActivity
14:32:05Alex ChenPublished "Website Refresh v2"
14:28:41Maya LeeDeleted "Old Homepage.sketch"
13:56:12KKUpdated member permissions
Further reading