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
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
Container
Column header names
Sort button
Row checkboxes
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...
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 52dp, and the column header row height is 56dp (4dp taller than regular rows). There is 32dp or more of...
Height and padding
The baseline row height is 52dp, 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...
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...
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.
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:
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).
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...
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.
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...
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