Conversational Actions will be deprecated on June 13, 2023. For more information, see Conversational Actions sunset.

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

Here’s an example of what a table looks like.


Requirements

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

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).

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.

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.

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.

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

Do.

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

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.