Table

Preview

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.