Data tables

Data tables display sets of data.


Usage

Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.

Data tables can include:

  • A corresponding visualization
  • Navigation
  • Tools to query and manipulate data

When including tools, they should be placed directly above or below the table.

Principles

Data tables are hierarchical, interactive, and intuitive

Read More

Hierarchical

Data table content should be hierarchical, alphabetical, or similarly organized.

Interactive

Data tables should allow user interaction, so that users can sort information in custom ways.

Intuitive

Data tables should work intuitively, allowing users to focus on content, not structure.


Anatomy

Data tables can include three or more columns. A header row at the top lists column names, and all subsequent rows contain data. Data tables can include a corresponding visualization, such as a graph.

If users need to interact with row data, checkboxes should accompany each row.

1. Container

The container holds all data table content.

2. Column header

Column headers are titles for column content.

3. Sorting tool

Sorting tools allow users to reorder table content, appearing only on hover.

4. Row checkbox

Checkboxes allow users to select a row.

5. Table content

Tables contain raw data.

Column header

By default, there is 56dp of padding between columns. Column headers that extend into this padding can either:

Read More

By default, there is 56dp of padding between columns. Column headers that extend into this padding can either:

  1. Enable horizontal scrolling, so users can scroll to see the full column name
  2. Shorten the column name, while displaying it in full in a tooltip (on hover)

Long column headers are truncated with an ellipse.

Hovering over a truncated column header reveals the full text, using a tooltip.

Sorting tool

If sorting is enabled, the left-most column is sorted by default, with an indicator displayed in the column header. Tapping the header of the sorting...

Read More

If sorting is enabled, the left-most column is sorted by default, with an indicator displayed in the column header. Tapping the header of the sorting column reverses the sort order, also rotating the sort icon 180 degrees.

Table with a sorting tool

Row Checkbox

When a checkbox for a row is selected, the row should display a background color. A selected row checkbox

Read More

When a checkbox for a row is selected, the row should display a background color.

A selected row checkbox


Behavior

Row hover (Desktop)

If a user hovers over a row, display a background color in that row. If individual table cells have specific hover states, display both that...

Read More

If a user hovers over a row, display a background color in that row. If individual table cells have specific hover states, display both that cell’s hover state as well as the row hover state.

Hovering over a row

Column hover (Desktop)

On hover, two things can be displayed:

Read More

On hover, two things can be displayed:

  • A tooltip displaying more information about each column header
  • A sort icon in the column header, if sorting is enabled

A tooltip and sort icon can be displayed when hovering over a column name.

Inline text editing

Tables can include editable fields for text editing or adding comments. They are indicated by placeholder text in the field. On tap, an edit dialog...

Read More

Tables can include editable fields for text editing or adding comments. They are indicated by placeholder text in the field. On tap, an edit dialog with a text field or a full dialog is displayed.


An editable table cell with placeholder text


Small edit dialog

Text can be edited using a small edit dialog, allowing users to confirm text by pressing Enter. Dialog edges should align with nearest divider line or table edge.

Large edit dialog

A large edit dialog is a complex, flexible dialog box. Users confirm text by tapping the Save button. Dialog edges should align with the nearest divider line or table edge.

Inline edit icon (Optional)

An inline edit icon allows field editing, with an icon at the opposite end of the cell from content.

Inline menus

Inline menus allow users to select from a predefined list of options. These menus can be directly embedded in a table. Menus display a list...

Read More

Inline menus allow users to select from a predefined list of options. These menus can be directly embedded in a table.

A table with inline menus

An expanded inline menu


Tables within cards

Tables can be embedded within a card. At the bottom of each card, tools can be displayed for table navigation and data manipulation.

Table card with header and footer

Data table card headers

When tables in cards require actionable headers instead of titles, you can either: 1. Action buttons 2. Colored header

Read More

When tables in cards require actionable headers instead of titles, you can either:

  • Display persistent actions
  • Display a contextual header that indicates when items are selected

1. Action buttons

2. Colored header



Theming

Rally Material Theme

This personal finance app’s data tables have been customized using Material Theming. Areas of customization include color, typography, and shape. Rally is a personal finance...

Read More

This personal finance app’s data tables have been customized using Material Theming. Areas of customization include color, typography, and shape.

Rally’s customized data tables

Color

Rally’s data tables uses custom color on two elements: container, table text, header text, and divider.

Element

Category

Attribute

Value

Container

Surface

Color

Opacity

#3C3C46

100%

Table text

On Surface

Color

Opacity

#FFFFFF

100%

Header text

On Surface

Color

Opacity

#FFFFFF

60%

Divider

On Surface

Color

Opacity

#FFFFFF

12%

Typography

Rally’s data tables use custom typography for table text.

Element

Category

Attribute

Value

Text

Body 2

Typeface

Font

Size

Case

Roboto Condensed

Regular

14

Title case

Shape

Rally’s data tables have custom corner shapes.

Element

Attribute

Value

Surface

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Sharp 0dp

Sharp 0dp

Sharp 0dp

Sharp 0dp


Specs

Data tables with a header

  • 48
  • 24
  • 24
  • 30
  • 30
  • 44
  • 16
  • 12
  • C
  • 64
  • 48
  • 20
  • 12
  • 12
  • C
  • 24
  • 16
  • 24
  • 24
  • General

    Right Alignment

  • General

    Left Alignment

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Data tables without a header

  • C
  • C
  • 16
  • 12
  • 24
  • 16
  • 48
  • 47
  • 18
  • General

    Left Alignment

  • General

    Right Alignment

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)


Implementation

Data tables implementation support for each platform is indicated below.

Flutter Material Component

Status: Code Available