Tables
A table block is a record set laid out in rows and columns so it can be scanned before any of it is read: a sortable header, one leading cell per row that the record is known by, and a single action column at the end. Hovering washes the whole row rather than the cell under the pointer, because the row is what the reader is aiming at, and selection is a checkbox with the count said out loud above the header.
The thing that decides whether a table holds up is the empty cell. A blank and an em dash are two different facts (nobody has filled this in, against this was recorded as none) and a table that draws them identically loses the distinction without telling anyone. Column width is the other one. It belongs to the kind of content in the column, not to the header text, so a status column is the same width in every table you build and a row of them lines up down the page.
Contact directory
Best for
A record per company or person: a logo, who to talk to, and where the relationship stands
Anatomy
Tabs, search and Sort By · sortable header on a 4% tint · logo, person, file and status cells · one action column
5 rows
LinearIssue tracking
Noah Raednoah@orvain.dev
NotionDocs and wiki
Amelia Lawsonamelia@orvain.dev
SlackTeam messaging
Tom Reyestom@orvain.dev
AsanaProject planning
Mia Chenmia@orvain.dev
AirbnbTravel booking
Ravi Patelravi@orvain.devProject tracker
Best for
Work in flight: who is on it, when it is due and how far along it is
Anatomy
Description at passive weight · avatar group collapsed past four · progress bar carrying its own figure · row menu
5 rows
Spotify redesignProductDocs migrationInternalSupport inboxCustomerQuarterly planningOperations
Billing rebuildFinanceFile manager
Best for
Documents with an owner and a switch: sharing that takes effect the moment it is flipped
Anatomy
File-type mark per row · uploader with their avatar · dates at passive weight · toggle column · delete and share
6 rows
Amelia LawsonFinanceNoah RaedDesignMia ChenDesignTom ReyesEngineeringRavi PatelMarketing
Ava SilvaCommsMedia library
Best for
Assets carrying tags and a score: the row types that cost a column the most
Anatomy
Badge group, three then a +n · read-only rating · publish toggle · delete and share · initials where there is no photo
5 rows
Maya PriceMarketingAmelia LawsonDesignTom ReyesSupportRavi PatelCommsMia ChenResearchCompact rows
Best for
A table that gets scanned rather than read: one line per cell, at the 48px density
Anatomy
48px rows · one leading cell · an em dash where a value is recorded as none · blank where nobody has filled it in
6 rows
Holdings table
Best for
Finance and lab tables where each column holds a different kind of value
Anatomy
Sortable header · text cell with a ticker tile · number cell · value cell with a unit price · change pill · sparkline · progress cell · rows turn into cards when narrow
| Shares | 7 days | ||||
|---|---|---|---|---|---|
| NWDNorthwind Goods | 120 | $10,104.00$84.20 each | 2.4% | 32% | |
| CNTContoso Energy | 260 | $8,073.00$31.05 each | 1.1% | 25% | |
| FBKFabrikam Labs | 45 | $6,426.00$142.80 each | 0.6% | 20% | |
| LTSLitware Systems | 300 | $5,520.00$18.40 each | 4.9% | 17% | |
| ADVAdventure Works | 80 | $780.00$9.75 each | 3.2% | 6% |
Cohort retention
Best for
Retention and any triangle of a cohort against time
Anatomy
One row per signup month · one column per month since · the share as the cell's tint · percent or people switch · scale key
| Cohort | Month 0 | Month 1 | Month 2 | Month 3 | Month 4 | Month 5 |
|---|---|---|---|---|---|---|
| May1,240 people | 100% | 64% | 52% | 46% | 41% | 38% |
| June1,385 people | 100% | 61% | 49% | 44% | 40% | |
| July1,502 people | 100% | 66% | 55% | 48% | ||
| August1,610 people | 100% | 69% | 57% | |||
| September1,734 people | 100% | 71% | ||||
| October1,820 people | 100% |
Using Tables
Reach for it when
- Records get compared against each other across the same handful of fields: owner, status, date.
- Someone needs to sort by a column and act on a row without opening the record first.
- Rows are selected in bulk and one action is applied to all of them at once.
- A cell holds one piece of interactive content (a switch, a rating, a menu) that belongs to that record alone.
Reach for something else when
- Items people recognise by a photograph or an opening line: a card grid or a list gives that content the room a cell never will.
- One or two attributes per record: a list with a title and a description carries it without paying for a header row at all.
- Data with parents and children that fold open: a tree view shows the nesting that a flat row of cells flattens away.
Where it shows up
Customer directories
A record per company or person, with a mark, the contact to talk to and where the relationship currently stands. Status lives in a badge, so a column of them can be taken in without reading a word of it.
Project trackers
Work in flight: an owner, a deadline and a progress bar carrying its own figure. The avatar group collapses past a few faces, which keeps the column the same width however large the team grows.
File managers
Documents with a type mark, an uploader and a sharing switch that applies the moment it is flipped. Delete and share sit together in one column at the end rather than following each value around.
Media libraries
Assets carrying tags and a score. Both are expensive column types: a badge group has to truncate to a count, and a rating is read-only here, since five clickable stars inside a scanning surface invite mis-clicks.
Questions
How should a data table behave on a narrow screen?
Avoid sideways scrolling. A table cut off at the edge ends mid-column, and nothing on screen says the rest exists. Drop the columns that are present but not what anyone came for first. Below that, turn each row into a card with the column name printed beside every value, and keep the leading cell looking the same the whole way down so rows stay recognisable.
Where do sorting controls belong in a table?
In the header cell, beside the label, sorting that column and nothing else. Mark the sorted header with aria-sort so assistive technology reports the direction, and make the whole header cell the target rather than a small glyph beside it. Not every column earns one: sorting a free-text description achieves nothing, and a header that looks sortable but is not is worse than a plainly inert one.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPTables
A table block is a record set laid out in rows and columns so it can be scanned before any of it is read: a sortable header, one leading cell per row that the record is known by, and a single action column at the end. Hovering washes the whole row rather than the cell under the pointer, because the row is what the reader is aiming at, and selection is a checkbox with the count said out loud above the header.
The thing that decides whether a table holds up is the empty cell. A blank and an em dash are two different facts (nobody has filled this in, against this was recorded as none) and a table that draws them identically loses the distinction without telling anyone. Column width is the other one. It belongs to the kind of content in the column, not to the header text, so a status column is the same width in every table you build and a row of them lines up down the page.
Contact directory
Best for
A record per company or person: a logo, who to talk to, and where the relationship stands
Anatomy
Tabs, search and Sort By · sortable header on a 4% tint · logo, person, file and status cells · one action column
5 rows
LinearIssue trackingNoah Raednoah@orvain.devNotionDocs and wikiAmelia Lawsonamelia@orvain.devSlackTeam messagingTom Reyestom@orvain.devAsanaProject planningMia Chenmia@orvain.devAirbnbTravel bookingRavi Patelravi@orvain.devProject tracker
Best for
Work in flight: who is on it, when it is due and how far along it is
Anatomy
Description at passive weight · avatar group collapsed past four · progress bar carrying its own figure · row menu
5 rows
Spotify redesignProductDocs migrationInternalSupport inboxCustomerQuarterly planningOperationsBilling rebuildFinanceFile manager
Best for
Documents with an owner and a switch: sharing that takes effect the moment it is flipped
Anatomy
File-type mark per row · uploader with their avatar · dates at passive weight · toggle column · delete and share
6 rows
Amelia LawsonFinanceNoah RaedDesignMia ChenDesignTom ReyesEngineeringRavi PatelMarketingAva SilvaCommsMedia library
Best for
Assets carrying tags and a score: the row types that cost a column the most
Anatomy
Badge group, three then a +n · read-only rating · publish toggle · delete and share · initials where there is no photo
5 rows
Maya PriceMarketingAmelia LawsonDesignTom ReyesSupportRavi PatelCommsMia ChenResearchCompact rows
Best for
A table that gets scanned rather than read: one line per cell, at the 48px density
Anatomy
48px rows · one leading cell · an em dash where a value is recorded as none · blank where nobody has filled it in
6 rows
Holdings table
Best for
Finance and lab tables where each column holds a different kind of value
Anatomy
Sortable header · text cell with a ticker tile · number cell · value cell with a unit price · change pill · sparkline · progress cell · rows turn into cards when narrow
| Shares | 7 days | ||||
|---|---|---|---|---|---|
| NWDNorthwind Goods | 120 | $10,104.00$84.20 each | 2.4% | 32% | |
| CNTContoso Energy | 260 | $8,073.00$31.05 each | 1.1% | 25% | |
| FBKFabrikam Labs | 45 | $6,426.00$142.80 each | 0.6% | 20% | |
| LTSLitware Systems | 300 | $5,520.00$18.40 each | 4.9% | 17% | |
| ADVAdventure Works | 80 | $780.00$9.75 each | 3.2% | 6% |
Cohort retention
Best for
Retention and any triangle of a cohort against time
Anatomy
One row per signup month · one column per month since · the share as the cell's tint · percent or people switch · scale key
| Cohort | Month 0 | Month 1 | Month 2 | Month 3 | Month 4 | Month 5 |
|---|---|---|---|---|---|---|
| May1,240 people | 100% | 64% | 52% | 46% | 41% | 38% |
| June1,385 people | 100% | 61% | 49% | 44% | 40% | |
| July1,502 people | 100% | 66% | 55% | 48% | ||
| August1,610 people | 100% | 69% | 57% | |||
| September1,734 people | 100% | 71% | ||||
| October1,820 people | 100% |
Using Tables
Reach for it when
- Records get compared against each other across the same handful of fields: owner, status, date.
- Someone needs to sort by a column and act on a row without opening the record first.
- Rows are selected in bulk and one action is applied to all of them at once.
- A cell holds one piece of interactive content (a switch, a rating, a menu) that belongs to that record alone.
Reach for something else when
- Items people recognise by a photograph or an opening line: a card grid or a list gives that content the room a cell never will.
- One or two attributes per record: a list with a title and a description carries it without paying for a header row at all.
- Data with parents and children that fold open: a tree view shows the nesting that a flat row of cells flattens away.
Where it shows up
Customer directories
A record per company or person, with a mark, the contact to talk to and where the relationship currently stands. Status lives in a badge, so a column of them can be taken in without reading a word of it.
Project trackers
Work in flight: an owner, a deadline and a progress bar carrying its own figure. The avatar group collapses past a few faces, which keeps the column the same width however large the team grows.
File managers
Documents with a type mark, an uploader and a sharing switch that applies the moment it is flipped. Delete and share sit together in one column at the end rather than following each value around.
Media libraries
Assets carrying tags and a score. Both are expensive column types: a badge group has to truncate to a count, and a rating is read-only here, since five clickable stars inside a scanning surface invite mis-clicks.
Questions
How should a data table behave on a narrow screen?
Avoid sideways scrolling. A table cut off at the edge ends mid-column, and nothing on screen says the rest exists. Drop the columns that are present but not what anyone came for first. Below that, turn each row into a card with the column name printed beside every value, and keep the leading cell looking the same the whole way down so rows stay recognisable.
Where do sorting controls belong in a table?
In the header cell, beside the label, sorting that column and nothing else. Mark the sorted header with aria-sort so assistive technology reports the direction, and make the whole header cell the target rather than a small glyph beside it. Not every column earns one: sorting a free-text description achieves nothing, and a header that looks sortable but is not is worse than a plainly inert one.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
