---
title: Table
description: Table is a mobile data table for Figma: a pinned lead column, sideways scroll, sortable headers and three row heights for iOS and Android apps.
group: Components
source: https://www.appetiteui.com/docs/table
dateModified: 2026-10-03
---

# Table

Updated: October 3, 2026.

Table shows rows of data on a phone. It pins the leading column, scrolls the others sideways and keeps every row in one table at one height, in three densities, so people can compare values across rows.

## Preview

Click a header to sort, scroll the table sideways to slide the values under the pinned column, and switch the row density.

Specimen: Table, Layout Inset, Density Default, Show pinned column, Show actions column. Inset 361 x 268, header 44, rows 56, lead column 160.

Rows are separated by a hairline: the table draws no row hover and no striping.

The Table page of the file holds Table, Trend Chip and Key Value Row. A cell can also hold the Sparkline from the [Chart](https://www.appetiteui.com/docs/chart) page.

Read from the Table set, node 16152:1156, on October 2, 2026.

## Which layouts does Table have?

Table has two layouts. Inset keeps the table inside a card or a padded screen, and Full bleed runs it from one screen edge to the other.

Specimen: Layout Inset, Layout Full bleed. Inset 361 x 268, radius 16; Full bleed 393 x 268, radius 0.

| Layout | Width | Radius | Outline | Lead column |
| --- | --- | --- | --- | --- |
| Inset | 361 | 16 | 1 pt on all four sides | 160 |
| Full bleed | 393 | 0 | 1 pt on top and bottom only | 168 |

Inset is a 393 pt screen less 16 pt of margin on each side. Inside a card, set the table radius to the card radius minus the card padding, so the corners stay concentric.

Full bleed is for a table that meets the screen edge and scrolls sideways: its lead column sits on the 24 pt margin, which is why that column is 8 wider than in Inset. The Tasks table screen uses Full bleed.

Both layouts measure 268 tall with four rows at Default density: a 44 header and four rows of 56. The outline is a stroke drawn inside the frame, so it takes no height.

## When should a column be pinned?

Pin the column that names the row, so a value never loses its label while it scrolls. Pin one column only, and only when the table is wider than the screen.

Specimen: Pinned column at rest, scrolled by 120. Lead column 160, scroll area 436, fade 40.

| Part | Measure | What it does |
| --- | --- | --- |
| Pinned column | 160, from the table/column/lead token | Stays at the left edge, with a 1 pt right hairline in border/soft-100. |
| Scroll area | Four columns, 436 wide | Amount 104, Status 132, Invoice 120 and Actions 80 slide under the pinned column. |
| Peek | 201 of a 361 table | One full value column fits beside the pinned one and the next is cut, which invites the scroll. |
| Scroll hint | 40 wide fade at the right edge | Fades to the table ground, 92 percent at 70 percent of its width, so more columns read as more. |
| Edge shadow | dropShadow/edge | Falls on the values that pass under the pinned column once the table has scrolled. |
| Show pinned column | Boolean, on by default | Turn it off when every column fits in one screen width. |

A pinned column pays for itself when the table has more columns than fit beside it. On a 393 pt screen a 160 pt pinned column leaves 233 pt, a little under two value columns at the default width, so a table with three or more columns scrolls and gains from the pin.

A table with a lead column and one value column fits without a pin, and the pin would only take 160 pt of width.

## Which density fits which screen?

Use Default for most tables. Compact fits screens people scan row by row, and Comfortable fits cells that hold two lines or that fingers press.

Specimen: Density Compact, Default, Comfortable. Rows 48, 56 and 64, padding 16, gap 8.

| Density | Row height | Room above and below a 36 control | Use for |
| --- | --- | --- | --- |
| Compact | 48 | 6 | Long lists people scan, such as transactions. |
| Default | 56 | 10 | Most tables, and the density the Table is built at. |
| Comfortable | 64 | 14 | Cells with two lines, such as User, and tables people mostly tap. |

Density is a property of _Table Cell, so the Table itself has none. To change a table, select its cells and set Density once.

The header stays 44 at every density.

## Header and sort

The header is one weak band. Only the sorted column carries a mark, so the eye finds the active sort without reading every label.

Specimen: Sort None, Asc, Desc, Align Leading and Trailing. Header 44, padding 16, gap 4, sort mark 16.

| Sort | Label | Mark |
| --- | --- | --- |
| None | text/soft-500, sm/default | None: the label stands alone. |
| Asc | text/strong-950, sm/emphasized | chevron-up, 16 pt, in brand/base. |
| Desc | text/strong-950, sm/emphasized | chevron-down, 16 pt, in brand/base. |

A click cycles None, Asc, Desc and back to None, which the file wires as six prototype reactions at 120 ms on the standard easing. On hover and keyboard focus the header label takes the strong color.

Align sets which edge the label sits on: Leading for words, Trailing for numbers, so a number column lines up under its header. Type Icon adds a 16 pt glyph before the label for the kind of data in the column, such as text, date, status or person.

## What can a Table cell hold?

A cell holds one of eight parts, chosen through its Content swap. Each part hugs its content, so the cell does the aligning.

Specimen: Text, Value, Status, Action, User, Trend, Sparkline, Slot. Cell 120 wide, padding 16, hairline 1.

| Part | Use for | Size | Built from |
| --- | --- | --- | --- |
| _Cell Content / Text | Names, descriptions and any value that reads as words. | Hugs, 20 high | Label in fg/strong-950, sm/default |
| _Cell Content / Value | A number. Right aligned so the digits line up down the column. | Hugs, 20 high | sm/emphasized in fg/strong-950 |
| _Cell Content / Status | One word that names the status. | 24 high | Badge, Pill, Soft, with the Dot on |
| _Cell Content / Action | One action. Put the rest behind a menu. | 36 round | Button, Neutral, Weak, Size sm, icon only |
| _Cell Content / User | A row about a person: avatar, name and a second line. | 126 by 36 | Avatar at 24, name in sm/emphasized, second line in xs/default, fg/sub-700 |
| _Cell Content / Trend | A change against a previous period. | 68 by 24 | Trend Chip |
| _Cell Content / Sparkline | Shape only. The number belongs in its own column. | 64 by 20 | Sparkline, seven points |
| _Cell Content / Slot | Anything the kit does not ship. | 120 by 24 | Frame on bg/weak-50 with a border/sub-200 stroke at radius 8 |

Content is an instance swap with these eight parts as its preferred values, so adding a kind of cell costs one component and no extra variant.

Cell contents use instance swap rather than native slots on purpose: Figma support confirmed on April 7, 2026 that once slot content is touched, even to reapply the same value, it stops inheriting library updates, and every filled table cell would freeze against the next Appetite UI release.

## How do you show a change where down is good?

Set Direction to Down and Tone to Positive. Direction is what the number did, and Tone is whether that is good news: churn going up is Up and Negative, a falling cost is Down and Positive.

Specimen: Direction Up, Down, Flat by Tone Positive, Negative, Neutral. Height 24, padding 4 by 8, gap 4, arrow 12.

Trend Chip is 24 high with 4 by 8 of padding, a 12 pt arrow and the value in `xs/emphasized`. Positive and Negative sit on the lighter step of their state family with the `dark-950` step as ink, and Neutral sits on `bg/weak-50` with `fg/sub-700`.

The arrow follows the number and the color follows the news, so a falling cost can be Down and Positive. The arrow is a picture and the tone is a color, so a screen reader needs the words: the live chip carries them as hidden text.

A Sparkline colors by direction: Up is state/success/base-500, Down is state/error/base-500 and Flat is fg/sub-700. Beside a Trend Chip of the opposite tone it contradicts the chip, so pair a Sparkline with a number and let the chip carry the tone.

## When does a Key Value Row replace a table?

When the data is one record. A Key Value Row is a label on the left and a value on the right, for summaries and detail lists. A table gives columns, this gives pairs.

Specimen: Key Value Row, Divider on, last row without. 361 x 44, padding 12, divider 1.

The row is 361 by 44 with 12 pt above and below. The label is `sm/default` in `fg/sub-700`, and the value is `sm/emphasized` in `fg/strong-950`.

The divider is an absolute 1 pt layer in `border/soft-100`, because a layer can be switched by a component property and a stroke cannot: turn the Divider boolean off on the last row of a list.

## Properties

Every property of the parts a table uses. Table has 2 layouts, _Table Header Cell is Align by Sort for 6 variants, _Table Cell is Align by Density for 6 variants and Trend Chip is Direction by Tone for 9 variants.

| Set | Property | Type | Options | Default |
| --- | --- | --- | --- | --- |
| Table | `Layout` | Variant | Inset or Full bleed | Inset |
| Table | `Show pinned column` | Boolean | On or off | On |
| Table | `Show actions column` | Boolean | On or off | On |
| Table | `Row 3` | Boolean | On or off | On |
| Table | `Row 4` | Boolean | On or off | On |
| _Table Header Cell | `Align` | Variant | Leading or Trailing | Leading |
| _Table Header Cell | `Sort` | Variant | None, Asc or Desc | None |
| _Table Header Cell | `Label` | Text | Any text | Column |
| _Table Header Cell | `Type Icon` | Boolean | On or off | Off |
| _Table Header Cell | `Type Icon Swap` | Instance swap | The Icons set | type |
| _Table Cell | `Align` | Variant | Leading or Trailing | Leading |
| _Table Cell | `Density` | Variant | Compact, Default or Comfortable | Compact |
| _Table Cell | `Content` | Instance swap | The eight _Cell Content parts | _Cell Content / Text |
| Trend Chip | `Direction` | Variant | Up, Down or Flat | Up |
| Trend Chip | `Tone` | Variant | Positive, Negative or Neutral | Positive |
| Trend Chip | `Value` | Text | Any text | 12.4% |
| Key Value Row | `Label` | Text | Any text | Subtotal |
| Key Value Row | `Value` | Text | Any text | 1,248.00 |
| Key Value Row | `Divider` | Boolean | On or off | On |
| Sparkline, on the Chart page | `Trend` | Variant | Up, Down or Flat | Up |
| Sparkline, on the Chart page | `Show Dot` | Boolean | On or off | On |

Row 3 and Row 4 take the table from four rows down to two. _Table Cell opens on Density Compact, while the Table is built from Default cells.

Read from the Table page of the Figma file on October 2, 2026.

## Tokens

Every value the Table parts read, resolved through its aliases to the Foundations primitive.

| Token | Light | Dark | Applied to |
| --- | --- | --- | --- |
| `bg/white-0` | #FFFFFF | #0E0E0F | Table ground, body cells, the pinned column |
| `bg/weak-50` | #F4F5F5 | #242427 | Header band, Neutral Trend Chip, Action button, Slot |
| `border/soft-100` | #E9E9EA | #2F2F31 | Outline, row hairline, pinned hairline, Divider |
| `border/sub-200` | #D1D1D6 | #48484A | Slot stroke |
| `text/soft-500` | #8E8E93 | #AEAEB2 | Header label at Sort None |
| `text/strong-950` | #0E0E0F | #FFFFFF | Header label when sorted |
| `fg/strong-950` | #0E0E0F | #FFFFFF | Cell text, values, names, Key Value Row value |
| `fg/sub-700` | #48484A | #C7C7CC | Second line of User, Key Value Row label, Neutral Trend Chip, Flat Sparkline |
| `brand/base` | #155DFC | #2B7FFF | Sort chevron |
| `state/success/lighter-50` | #F0FDF4 | #22C55E at 16% | Positive Trend Chip, Success status |
| `state/success/dark-950` | #09361B | #86EFAC | Ink on the Positive chip and the Success status |
| `state/success/base-500` | #22C55E | #16A34A | Status dot, Sparkline Up |
| `state/error/lighter-50` | #FEF2F2 | #FB2C36 at 16% | Negative Trend Chip, Error status |
| `state/error/dark-950` | #460809 | #FFA2A2 | Ink on the Negative chip and the Error status |
| `state/error/base-500` | #FB2C36 | #FB2C36 | Sparkline Down |

| Token | Value | Applied to |
| --- | --- | --- |
| `table/column/lead` | 160 | The pinned column |
| `table/column/default` | 120 | A value column |
| `table/column/action` | 80 | The Actions column |
| `dimensions/spacing/4` | 16 | Cell and header padding at the sides |
| `dimensions/spacing/2` | 8 | Gap inside a cell |
| `dimensions/spacing/1` | 4 | Gap inside a header cell |
| `dimensions/radius/xl` | 16 | Inset outline |
| `dimensions/radius/md` | 8 | Slot cell |
| `dropShadow/edge` | 6 0 12, spread -4, black at 8% | Pinned column edge, drawn once the table scrolls |
| `sm/default`, `sm/emphasized` | 14 on 20, Regular and Semi Bold | Labels, values, names |
| `xs/default`, `xs/emphasized` | 12 on 16, Regular and Semi Bold | Second line of User, Trend Chip, Status |

Only the lead, default and action widths are tokens. Column / Amount is 104 wide and Column / Status is 132 wide in the Table, with no width variable behind either.

## How does Table differ on iOS and Material 3?

Table has no counterpart on the Apple or Material 3 pages of the file, so Appetite UI draws one Table that is the same on both platforms.

| Appetite UI component | iOS counterpart | Material 3 counterpart | What differs |
| --- | --- | --- | --- |
| Table | None in the file. The nearest pattern is List. | None in the file. The nearest pattern is List. | A platform list holds one value per row. Table keeps columns, pins one and scrolls the rest. |
| Key Value Row | None in the file. A List row with a detail value comes closest. | None in the file. A List row with trailing text comes closest. | Key Value Row is a pair with a divider layer, built for summaries. |
| Trend Chip | None in the file | None in the file | Neither platform page carries a change indicator. |

## Keyboard and screen readers

A table that scrolls sideways has to take focus, and every part of it needs a name. The Table specimen on this page does all of it.

| Part | Role and name | Keyboard |
| --- | --- | --- |
| Table | A table with a caption. Header cells are th with scope col, the first cell of each row is th with scope row. | Reads by row and column in a screen reader's table mode. |
| Scroll region | A region with a name that says it scrolls sideways, in the tab order. | Tab to it, then the arrow keys scroll. |
| Sort header | A button inside the th, with aria-sort on the sorted column only. | Enter or Space cycles None, Ascending, Descending. A polite status line says how the rows were sorted. |
| Action | An icon button named with its row, such as Actions for Ines Roca. | Tab, then Enter or Space. |
| Status | The word is the status, and color repeats it. | Not focusable. |
| Trend Chip | Hidden text states the direction and the tone before the value. | Not focusable. |

The Action control is 36 pt. The Platform collection sets `platform/min-touch-target` to 44 on iOS and 48 on Android, so give the control a transparent hit area of 44 pt: a 48 pt Compact row has room for it, and an Android build needs 48.

The header label at Sort None is `text/soft-500` on `bg/weak-50`, a contrast of 2.99 to 1 in light and 7.0 to 1 in dark. The same soft text color on white is 3.26 to 1.

Light mode is under 4.5 to 1 for 14 pt text and is a documented product choice. Give a header label in your own product a color at 4.5 to 1, such as text/sub-700.

## Guidelines

- Do: Align numbers to the trailing edge in Value cells, so the digits line up down the column.

- Avoid: Do not left align numbers. Digits of different lengths stop lining up and the column cannot be compared.

- Do: Put one word in a Status cell and let the dot and the tint repeat it.

- Avoid: Do not put a sentence in a Status cell. It truncates and the badge stops reading as a state.

Pin the one column that names the row and keep every other column in the scroll area. Keep one row height across the table, and keep one action per row with the rest behind a menu.

Set a Trend Chip from direction first and tone second.

## Examples

Three tables made of the parts above, with the rows the Figma file ships: the invoices of the Table set, the tasks of the Tasks table screen in Full bleed, and the top sellers of the Examples board.

Specimen: Invoices, Layout Inset. Inset 361, Full bleed 393, Density Default.

Specimen: Tasks, Layout Full bleed, Type Icon on. Inset 361, Full bleed 393, Density Default.

Specimen: Top sellers, Layout Inset, Sparkline and Trend Chip columns. Inset 361, Full bleed 393, Density Default.

The tasks table sorts by Due, so its header carries the one mark. Top sellers sorts by Sales, descending, and puts a Sparkline and a Trend Chip beside the number: scroll it sideways to reach the Trend column.

Rows from the Table set, the Tasks Table screen and the Table Examples board, read on October 2, 2026.