Cell
Content for one table cell: text, a number, a date, a link, a redirect to another page, a person, a file, a status, a trend, progress, a switch, row actions or a row menu, a tree row, with an optional row checkbox. Each cell is full width with a faint bottom border.
Master
Pick a type, size and states. Each type fills in sample data.
Usage
Use Cell inside table cells to show one kind of value consistently. Pick the type from the data: text for plain values, number for amounts and counts (end-aligned, even-width digits), date for a day, textBlock for a note that wraps over several lines (md only), link to open a record, redirect to go to another page in the app (brand link text with an outward arrow), popupTrigger for grey underlined text with an open_in_full mark that opens a popup the screen owns, avatar for a person, badge for status, status for a coloured dot and a label, trend for change, progress for how far along something is, actions for row buttons, actionMenu for a More menu, switch to turn a row setting on or off right away, checkbox for a column with only the row Checkbox, tree for the first cell of parent and child rows (an indent per level, faint guide lines and the outlined plus or minus square to open and close its children; treeToggle chevron swaps the square for a chevron button). Cell composes kit Avatar, AvatarGroup, Badge, Button, ButtonGroup, Checkbox, Dropdown, Icon, Link, Meter and Switch; it never draws its own. Pair with HeaderCell for column titles. See contracts/cell.json for the full contract. With actionIcons, menu puts the row's remaining actions behind one More button at the end. In a box narrower than 640px, the kit's mobile break, the icon buttons fold into that More menu and the cell keeps one button, so the row's own values get the width; only one of the two is in the layout, so nothing is reached twice by the keyboard.
Do's
- Cells in a data table.
- A row that mixes text, people, status and actions.
- A column the reference table draws as number, date, status, switch, popup or text block.
- A column that sends people to another page in the app, like Open billing run, drawn as the reference redirect cell.
Don'ts
- Do not invent a local table cell, Tag, Trend, FileIcon, PaymentMethod or ActionCell.
- Do not draw a progress bar in a cell. Use type progress; it is a kit Meter.
- Do not use Badge for trends. Use a trend type.
- Do not use link for actions like Delete or Send. Use actions or actionIcons.
- Do not draw a local Avatar, Badge, Checkbox or Button. Cell composes the kit ones.
- Use actionMenu instead of actionIcons when a row has more than 3 actions or a destructive one.
- Do not put more than 3 badges or 3 actions in one cell.
- Do not fake a progress cell before the kit Meter exists.
- Do not use raw hex.
- Do not use status for a pill. status is a dot and a label; use badge for a pill.
- Do not use switch for a choice that waits for Save. Use checkbox; a switch applies right away.
- Do not use popupTrigger to go to another page. Use link or redirect.
- Do not use textBlock at sm. sm holds one line; the text is cut with an ellipsis.
- Do not write numbers in a text cell. Use number so they line up at the end.
- Do not use redirect for a new tab. It always stays in the same tab.
- Do not use redirect for actions like Delete or Send. Use actions or actionIcons.
<Cell type="text" size="md" alignment="start" label="INV-1042" treeToggle="box" />