Data tables

Data tables display sets of data across rows and columns.

Interactive demo

This demo lets you preview the data table component and its configuration options.

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
Diagram of a data table labeling the five parts of its anatomy
  1. Container
  2. Column header names
  3. Sort button
  4. Row checkboxes
  5. Rows

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.

Data table with cursor hovering on one row

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
Data table showing hover states for headers with truncated text and enabled sorting

<caption |

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

Data table showing keyboard focus state for checkbox

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.

Data table with inline menus

A table with inline menus

Data table with expanded inline menu showing two predefined options

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.

Data table showing pagination controls positioned at the bottom of the 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.

Custom styled data table with dark background white text

Rally’s customized data tables

Color

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

Diagram pointing out four aspects of a data table that are themeable including the container, table title, 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.

Custom type, Roboto Condensed, applied to sample 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.

square corners applied to shape system for Rally

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.

diagram of touch target for checkbox

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.

diagram for icon size

Icon size: 40 x 40dp

Table cell padding

Table cell padding is minimized to improve content density.

diagram for padding in table cells
  • 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.

diagram highlighting the rounded corners on a data table

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.

diagram highlighting no elevation is applied to data tables

Elevation: 0dp

Container outline

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

diagram highlighting the container used for data tables

Container outline: 1dp

Height and padding

diagram of height and padding for rows and columns
  • 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.

diagram highlighting right-alignment for a column that holds numerical data

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