Visual components Table

Table

Use a table to display static data to users in an easily scannable format.

Note that users can only view (not interact with) the information in a table. If you want users to interact, consider using a list instead.

Example Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Requirements Expand and collapse content An arrow that points down when collapsed and points up when expanded.

This visual component currently supports customization.

Field name

Required?

Restrictions/Customizations

Table title

No

Customizable font family and color.

Max 1 line (additional characters will be cut off).

The card height collapses if no title is specified.

Subtitle

No

Plain text. Fixed font, color, and size.

Max 1 line (additional characters will be cut off).

Will not display without title.

The card height collapses if no subtitle is specified.

Foreground image

No

Customizable image shape (angled or rounded corners).

Card background

No

Customizable image or color.

Column header

Yes

Plain text. Fixed font, color, and size.

Customizable text alignment for header and content (left, right, or center).

Customizable column prioritization (first 3 guaranteed to display).
No character limit, but smaller surfaces may truncate rather than wrapping.

Row content

Yes

Plain text. Fixed font, color, and size.

Customizable row prioritization (first 3 guaranteed to display).

Max 20 characters (additional characters will be cut off).

Action link

No

1 link allowed.

Customizable link color.

Interactivity

  • The table card has no interaction without an action link—it only presents information.
  • With an action link added, users can tap it to view web content or advance the dialog.

Guidance Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Tables are optimized to display tabular data (for example, sports standings, election results, or flights). Aim for three to five columns and rows; depending on screen size, at least three will be displayed. So prioritize your most relevant information in the first three columns and rows.

Use tables to convey static information that doesn’t need much explanation. This information should be clean and easily glanceable, avoiding the appearance of a busy spreadsheet. So be sure that your data is labeled clearly and concisely. The goal should be to provide information, not to help users make a selection (for that, use a list).

Data should be brief, essential, and easy to understand.

Striking the right balance between detail and concision is key. Offer enough detail for your user to distinguish between table items, but not so much as to be overwhelming.

Persona: Ibento (fake ticket-seller). User input: What was the final score the last time I went to a SportsTeam game? Spoken prompt: Last time you attended a game, SportsTeam beat the Others 13 to 4. Do you want to hear more recent scores? Display prompt: Here are the scores. Want to hear about some more recent games? Visual: Table card titled “Recent scores”, with a subtitle that says “SportsTeam games you’ve attended”. Column headers are Opponent/Date, Final score, and W/L. The rows are populated with dates, scores, and win-loss information for games against the Others, DifferentTeam, and EnemyTeam. The action link says “See more”. Chips: Upcoming games, recent scores.

Do.

To improve scannability, only include useful information in your table. If you have additional columns with nice-to-know details, prioritize your most important information so that it will display on all surfaces.

Persona: Ibento (fake ticket-seller). User input: What was the final score the last time I went to a SportsTeam game? Spoken prompt: Last time you attended a game, SportsTeam beat the Others 13 to 4. Do you want to hear more recent scores? Display prompt: Here are the scores. Want to hear about some more recent games? Visual: Table card titled “Recent scores”, with a subtitle that says “SportsTeam games you’ve attended”. Column headers are Game, Final score, and Location. The rows are populated with numbers, scores, and locations for games 1, 2, and 3. The action link says “See more”. Chips: Upcoming games, recent scores.

Don’t.

The lack of detail in this table makes it hard to tell which team won each game, and non-essential information (the game number) is placed at the front, hiding helpful details like the Win/Loss column and the opposing teams’ names.

Keep the core of the message in the prompts.

Even when the visuals provide the best answer, make sure the prompts still directly address the user’s request and move the conversation forward.

Persona: Sekai (fake shoe store). User input: What size do I wear in European shoes? Spoken prompt: A men’s American size 11 is a European 44. Here’s a size conversion chart. Do you want to browse some European styles? Display prompt: Here’s a size conversion chart. Do you want to check out some European shoes? Visual: Table card titled “Conversion chart”. The subtitle reads, “U.S. and European men’s shoe sizes”. The column headers are U.S. size, Euro, and Inches. The rows are populated with corresponding measurements for U.S. sizes 10.5, 11, and 11.5. The action link reads “See more”. Chips: European men’s shoes, No I’m done.

Do.

The prompts should both 1) answer the user’s question and 2) propel the conversation with a question.

Persona: Sekai (fake shoe store). User input: What size do I wear in European shoes? Spoken prompt: Here’s a size conversion chart. Display prompt: Here’s a size conversion chart. Visual: Table card titled “Conversion chart”. The subtitle reads, “U.S. and European men’s shoe sizes”. The column headers are U.S. size, Euro, and Inches. The rows are populated with corresponding measurements for U.S. sizes 10.5, 11, and 11.5. The action link reads “See more”. Chips: European men’s shoes, No I’m done.

Don’t.

Don’t assume that the user has immediate access to the screen; the prompts should always provide the direct answer to the user’s question. Also, without a question, the prompts here fail to push the interaction forward.