CRM
TableToolbarViewPickerViewChangesSortChipFilterChipToolbarSeparator
A records page’s toolbar, in two rows over the table. The view picker opens the page’s saved views as links, since each view has its own address, and a lock marks a view only its owner sees. Sort, hide, move or resize a column in the table below and the view offers to discard the changes, save them over the view, or save them as a new view of your own. The second row holds the sort, then the filters, shown as a dashed Filter while there are none and as a split chip once there is one (here, the search box’s).
Button · DropdownMenu · IconTile · Badge · Popover · Input
DataTableDataTableViewOptionsTextCellEditorNumberCellEditorSelectCellEditorCheckboxCellEditorMoneyCellEditorDateCellEditorTimestampCellEditorMultiSelectCellEditorRatingCellEditorPickerCellEditorLocationCellEditorListCellEditorChipListMoneyValueRatingValueUserValueLocationValueLinkValue
Every records page in the console is this table, under the toolbar above. Tab reaches it once, and the keys below move the cell cursor, edit, select and sort. A save shows at once with a spinner while it runs, and this page refuses every save to Owner so you can see the error and its message. Space selects a row and the bulk bar comes up at the bottom of the window. Drag a column’s name to move it and its right edge to resize it, or use View settings to hide and move columns from a menu. The last row counts the companies, sums Employees and counts the ticked key accounts; the other columns show where a calculation goes. Loading comes in two stages: a spinner while the list is unknown, then the grid with a screen of bars, which the values replace at once. Only the rows in view are drawn, whether there are 40 or 5,000, and below 768 pixels the rows are cards. ARR, Last contacted and the six columns after About open the other editors: an amount and its currency, a calendar, a calendar with a time, several channels, a rating, a lead found by search, a place, and a list of emails.
- ←→↑↓
- Move one cell
- HomeEnd
- Go to the first or last cell in the row
- ⌘Home⌘End
- Go to the first or last cell in the grid
- Page UpPage Down
- Move ten rows
- EnterF2
- Edit the cell
- Enter
- Open the row from a cell that doesn’t edit
- ⌘Enter
- Open the row from any cell
- A–Z0–9
- Start an edit with that key
- EnterTab
- While editing, save and move down or right
- Shift EnterShift Tab
- While editing, save and move up or left
- Esc
- Put the old value back, or drop a value that wasn’t saved
- Tab
- Leave the grid
- Space
- Select or clear the row
- Shift SpaceShift click
- Select every row from the one picked last
- SpaceEnter
- On the checkbox column’s header, select or clear every row
- Enter
- On a header, sort by that column
- Shift Enter
- On a header, add a second sort
- Space
- On a header, pick up the column
- ←→
- Move the picked-up column
- SpaceEsc
- Drop the column, or put it back
Typing through an input method, for Japanese or Chinese, doesn’t start an edit from the grid. Press Enter or F2 first, then type.
Table · Skeleton · Spinner · IconTile · Card · Checkbox · DropdownMenu · Input · Combobox · Spinner · Popover · Calendar · NativeSelect · useIsMobile · dnd-kit
40 companies
| Company | Domain | Segment | Employees | ARR | Owner | Key account | Last contacted | About | Next call | Channels | Fit | Account lead | HQ | Emails | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Tarnwick Logistics | tarnwick-logistics.example.com | Services | 240 | $184,500.00 | Ava Chen | Yes | Oct 14, 2026 | Runs refrigerated freight between Sydney, Melbourne and Brisbane for grocers and florists, with forty trucks and a cold store in Botany. They want ads for two things at once, drivers to hire and customers to win, and asked for both on one monthly invoice and one report that splits the spend between them. | — | Meta | Sydney, NSW, Australia | ||||
Bluegum Analytics | bluegum.example.com | SaaS | 38 | $96,000.00 | Sam Okafor | No | Oct 9, 2026 | Wants weekly spend reports by email. | — | Google | Priya Nair | Sydney, NSW, Australia | |||
Harbour & Vale | harbourvale.example.com | Agency | 64 | $320,000.00 | Priya Nair | Yes | Sep 30, 2026 | Runs Meta and TikTok for twelve retail clients. | Nov 4, 4:00 AM UTC | MetaGoogle | Sydney, NSW, Australia | ||||
Copperline Studio | copperline.example.com | Agency | 12 | — | No | — | — | — | TikTok | Sam Okafor | |||||
Tallow Street Bakery | tallowstreet.example.com | Retail | 22 | $12,500.00 | Ava Chen | No | Oct 2, 2026 | Two shops, and asked about local reach ads. | — | MetaTikTok | Sydney, NSW, Australia | ||||
Marlowe Freight | marlowe-freight.example.com | Services | 410 | USD 540,000.00 | Sam Okafor | No | Aug 21, 2026 | — | Nov 7, 7:00 AM UTC | GoogleTikTok | Ava Chen | Austin, TX, United States | |||
Fennimore Labs | fennimorelabs.example.com | SaaS | 9 | $4,800.00 | — | No | Oct 18, 2026 | Trial ends Friday. | — | MetaGoogleTikTok | Sydney, NSW, Australia | ||||
Ironbark Outfitters | ironbark.example.com | Retail | 75 | $78,000.00 | Priya Nair | No | Jul 11, 2026 | — | — | LinkedIn | Priya Nair | Sydney, NSW, Australia | |||
Saltpan Media | saltpan.example.com | Agency | 31 | $124,000.00 | Ava Chen | No | Oct 16, 2026 | Moving three clients over from another tool. | Nov 1, 2:00 AM UTC | MetaLinkedIn | Sydney, NSW, Australia | ||||
Wattle Health | wattlehealth.example.com | Brand | 520 | $880,000.00 | Sam Okafor | Yes | Sep 4, 2026 | Legal approves every ad before it runs. | — | GoogleLinkedIn | Sam Okafor | Sydney, NSW, Australia | |||
Fernhill Dental | fernhill-dental.example.com | Services | 18 | $21,000.00 | — | No | — | — | — | MetaGoogleLinkedIn | Sydney, NSW, Australia | ||||
Kestrel Robotics | kestrel.example.com | Brand | 140 | USD 415,000.00 | Priya Nair | No | Oct 1, 2026 | — | Nov 4, 5:00 AM UTC | TikTokLinkedIn | Ava Chen | Austin, TX, United States | |||
Larkspur Florals | larkspur.example.com | Retail | 6 | $3,900.00 | Ava Chen | No | Oct 12, 2026 | Mother’s Day is their biggest week. | — | MetaTikTokLinkedIn | Sydney, NSW, Australia | ||||
Brightwater Pools | brightwater.example.com | Services | 45 | $56,000.00 | — | No | Jun 28, 2026 | — | — | GoogleTikTokLinkedIn | Priya Nair | Sydney, NSW, Australia | |||
Ochre Travel | ochre-travel.example.com | Brand | 88 | $152,000.00 | Sam Okafor | No | Oct 7, 2026 | Spends most in January. | Nov 7, 8:00 AM UTC | MetaGoogleTikTok+1 | Sydney, NSW, Australia | ||||
Emberly Coffee | emberly.example.com | Retail | 27 | $29,000.00 | Priya Nair | No | Sep 19, 2026 | — | — | Sam Okafor | Sydney, NSW, Australia | ||||
Pinecrest Legal | pinecrest.example.com | Services | 54 | — | No | — | — | — | Meta | ||||||
| 40count | Add calculation | Add calculation | 4,062sum | Add calculation | Add calculation | 5checked | Add calculation | Add calculation | Add calculation | Add calculation | Add calculation | Add calculation | Add calculation | Add calculation |
⌘Enter opens the row from any cell. On ARR and Last contacted, Enter or a double-click opens it too.
BulkBar
Select rows in the table and this bar comes up at the bottom of the window with the count on the accent badge, a button that clears the selection, and the page’s actions. It rises a few pixels as it fades in, and leaves at once. On a phone it spans the window. Here its two actions tick or clear Key account on every selected company, and the table’s last row counts them again.
Button · Badge · Separator
Nothing selected yet.
BoardColumnBoardColumnNameBoardColumnHeaderBoardColumnNewBoardStatsBoardCardBoardSkeletonBoardCardSkeletonBoardDensityBoardColumnCollapsedBoardCardOverlay
The pipeline as a board, on the planner’s kanban. Drag a card to another stage, or press Space on it, move it with the arrow keys and press Space again. Each stage shows its count and a plus that starts a deal there, and an empty stage shows a New deal button. A stage’s sum sits under its column, one line per currency. A card shows its fields and how many days it has been in its stage; a deal you move starts that count again at 0. The pair of segments collapses and expands the columns, and the cards to their headers; Lost starts as a strip, and a card dropped on a strip lands in it. Point at the first card for its checkbox, Edit and Open, and its notes and tasks links. The footer toggle changes what the sum row says, or offers a calculation to add. Loading draws the columns, then a blank card for each deal under the real headers and sums, so nothing moves when the values land.
KanbanProvider · KanbanBoard · KanbanHeader · KanbanCards · KanbanCard · IconTile · Badge · Button · Checkbox · ToggleGroup · Tooltip · Skeleton
- Open deals
- 9
- 1 has no value
- Pipeline, AUD
- $543.8K
- 6 deals
- Pipeline, USD
- USD 61.8K
- 2 deals
- Waiting longest
- 14 days
- Harbour & Vale agency seats in Negotiation
$17,300.00sum
$206,500.00sum
USD 54,000.00sum
$320,000.00sum
USD 7,800.00sum
$0.00sum
RecordPageRecordHeaderRecordSectionPropertyGridRecordTabsActivityPanelNoteCardHighlightCardStageBarRecordOverviewSectionNoteLineTaskRow
A record’s page. The details pane down the left is 350 wide and its edge drags. Its fields edit in place: press a value to open it; Enter saves and Esc puts the old value back. The tabs are links, each with the count of what it holds, and the last ones fold under “+2 more”. The activity keeps the value every change replaced, so a field changed and changed back shows both moves. Several changes made together fold under one line until it is opened, and an agent’s or a rule’s changes carry a badge. Saving a field here adds a line to the top of the activity. Loading, the counts and the feed wait while the header and the fields stay. It opens on Overview: six highlight cards (the stage one carries its bar), the five newest things that happened with a note and a task as cards under their sentences, three notes and the open tasks. The Comments button opens a panel beside the tabs, 320 wide, and two tabs fold to make room.
Resizable · TextCellEditor · NumberCellEditor · SelectCellEditor · IconTile · Badge · Collapsible · DropdownMenu · Skeleton · Spinner
Highlights
Activity
Notes
3Tasks
2Open
2NoteEditorNoteEditorFrameCommentsPanel
A note on a record, open in its frame: the title over the words, which run in a 704 wide column. The note shows formatted and saves as markdown. Type / at the start of a line, or press the + at the bottom left, for a heading, a list, a checklist or a quote; # , - , 1. , [ ] and > at the start of a line do the same. Select words with the pointer for bold, italic, strikethrough or a link; Ctrl or ⌘ with B, I, Shift+X or K does it from the keyboard. Ctrl or ⌘ and a click opens a link in a new tab; on a selected link, Ctrl or ⌘ with K shows its address with Open link beside it. Type @ and the people and records that match come up under it, people first; Enter or a click puts the mention in as a chip, and Esc closes the list. The line under the note says how the last save went; here a save takes a moment, and the toggle makes it fail. Beside it, the record’s comments, in the 320 wide panel that opens next to its tabs: threads newest first with their replies, Reply and Resolve under each, Edit and Delete on your own, and a composer at the foot. Its Comment button waits for a character; Ctrl or ⌘ with Enter sends; Mention types the @ and Pick emoji opens the emoji grid. A comment that fails to go keeps its words and says why.
Lexical · Popover · Toolbar · DropdownMenu · AlertDialog · frimousse · IconTile
All comments
- Ava ChenWho owns the renewal after Sam moves teams?
- Sam OkaforThe revised quote needs the cold store in Botany on a separate line.Ava ChenDone, it is on line three now.
TaskComposerTaskRowTaskGroupTaskListHeader
A task in one line, in its frame. Enter or Save adds it. The chips under it set a due date (Today, Tomorrow, Next week or a day on the calendar), who does it, and the records it is about. Nothing in it can change while a task saves, and if it fails the text stays and a line under it says so. With Create more off the composer closes after a save; on, it clears and keeps the focus for the next one. Cancel, Esc and the close button put it away. Under it, the tasks page’s list: Task, Due date, Records and Assigned to, in groups with a count. A round check completes a task, a square one selects it, and a task just completed dims at once and moves to Completed a moment later. Under 640 wide a row stacks its title over one line of the rest. The composer below the list edits a task: the same panel headed “Edit task”, with a check before the title, a menu holding “Delete task”, and Save in place of Create more.
Popover · Calendar · Combobox · Switch · Kbd · Spinner · Checkbox · DropdownMenu · Badge
Tasks you add here show below, newest first.
Overdue
1Today
2The set
These are the parts the console’s CRM screens are built from, in packages/ui/components/crm/. They take their records as props and report what the reader did, and the app decides what a record is.