Data tables

Data tables display sets of data across rows and columns.

Developer documentation

Platform

Status

Android

Planned

iOS

Planned

Web

Available

Flutter

Available


Usage

Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights.

Data tables can contain:

  • Interactive components (such as chips, buttons, or menus)
  • Non-interactive elements (such as badges)
  • Tools to query and manipulate data

Principles

Data tables are hierarchical, interactive, and intuitive

Read More

Organized

Data tables should organize content in a meaningful way, such as using hierarchy or alphabetization.

Interactive

Data tables should allow user interaction, so that users can customize how data is displayed or interacted with.

Intuitive

Data tables should be easy to use, with a logical structure that makes content easy to understand.


Anatomy

Data tables organize information across:

  • Columns
  • Column header names
  • Rows
  • Footers
  • Pagination
  1. Container

  2. Column header names

  3. Sort button

  4. Row checkboxes

  5. Rows

Data table elements

Column header names describe the type of content displayed in each column. Each row contains data related to a single entity. Data tables can include...

Read More

Baseline elements

Column header names describe the type of content displayed in each column. Each row contains data related to a single entity.

Interactive elements

Data tables can include interactive elements, such as:

  • Checkboxes (on rows)
  • Sorting (on columns)
  • Icons that communicate alerts

Controls that manipulate how table data is displayed (such as pagination or filter chips) should be placed directly above or below a table.

Above the header row, a filter bar shows two active filters. Pagination is shown below the last row.

Columns

The baseline row height is 54dp, and the column header row height is 56dp (4dp taller than regular rows). There is 32dp or more of...

Read More

Height and padding

The baseline row height is 54dp, and the column header row height is 56dp (4dp taller than regular rows).

Padding

There is 32dp or more of padding between columns.

There is 16dp padding on the left and right side of each header name.

Text

Column header text uses a medium weight font (to differentiate it from row text).

Text that is longer than the column width is truncated with an ellipsis. On hover, a tooltip shows the full name.

Long column headers are truncated with an ellipsis.

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

Sorting

To help users sort information, a column can display column sorting by default. To indicate which column is sorted by default, place a downward or...

Read More

To help users sort information, a column can display column sorting by default.

To indicate which column is sorted by default, place a downward or upward arrow icon next to the column header’s name.

Sorting in descending order is indicated with a downward arrow.

Reversing sort order

To reverse the sort order of a column, the user taps the header name or arrow icon. Upon sorting, the arrow icon rotates 180 degrees.

Sorting by column (in ascending order) indicated with an upward arrow

A table sorted in reverse: the downward arrow shows that the column is sorted in descending order.

Row checkbox

When a row checkbox is selected, the row should display a background color. For users who use screen magnification, the background color fill provides a...

Read More

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

For users who use screen magnification, the background color fill provides a way to indicate that a row has been selected, as the selected checkbox may appear outside of the magnified screen area.

For more information on selection states, visit States.

A selected row checkbox with background fill color on the entire row


Behavior

Row hover (Desktop)

When a user hovers over a row, that row displays a background color.

Read More

When a user hovers over a row, that row displays a background color.

Hovering over a row

Column hover (desktop)

When the user hovers over a column header:

Read More

When the user hovers over a column header:

  • A tooltip can display the full column name (if it’s truncated) or a detailed description
  • If sorting is enabled, an arrow icon can appear next to the column’s header

A tooltip or a downward or upward arrow icon can be displayed when hovering over a column name. Two cursors are displayed for demonstration purposes.

Focus

When using keyboard focus, an indicator appears as users tab through interactive items (such as checkboxes).

Read More

When using keyboard focus, an indicator appears as users tab through interactive items (such as checkboxes).

Keyboard focus on the checkbox

Inline menus

Inline menus allow selection from a predefined set of menu items. They are embedded directly in a table cell. Menus display a list of choices...

Read More

Inline menus allow selection from a predefined set of menu items. They are embedded directly in a table cell.

A table with inline menus

An expanded inline menu

Pagination

Pagination controls provide swift access to all pages, while indicating that more pages exist. They display: Pagination is placed at the bottom of a table.

Read More

Pagination controls provide swift access to all pages, while indicating that more pages exist.

They display:

  • Number of rows per page
  • Left and right arrows for navigating pages
  • Total number of rows, including the range currently in view

Placement

Pagination is placed at the bottom of a table.

Ten rows per page are displayed, with a total of 100 rows.


Theming

Rally Material Theme

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

Read More

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

Rally’s customized data tables

Color

Rally’s data tables use custom color on four elements: the container, table text, header text, and dividers.

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, with 0dp long cut corners.

Element

Category

Attribute

Value

Container

Large component

Family

Size

Cut

0;0;0;0dp


Specs

Touch target area

The minimum touch target for interactive elements is 48 x 48 dp.

Touch target size for a checkbox or any other interactive element: 48 x 48dp

Element bounds

Touch targets can extend areas beyond the bounds of an element.

Icon size: 40 x 40dp

Table cell padding

Table cell padding is minimized to improve content density.

  • Table cell top & bottom padding: 6dp
  • Table cell left padding: 8dp

Corner radius

Data tables have a rectangular shape by default, with subtle rounded corners.

Table corner radius: 4dp

Elevation

Data tables don’t express elevation as they are often in front of solid color backgrounds.

They also don’t move in front of or behind other surfaces.

Elevation: 0dp

Container outline

An outline can separate a table from either another table or other components.

Container outline: 1dp

Height and padding

  • Header row height: 56dp
  • Row height: 52dp (4dp shorter than the header row)
  • Padding: 16dp
  • Container dimensions expand to fit content

Numerical alignment

Align numbers to the right for improved scannability.

Numbers in the column are right-aligned with the column header name