Data Display

Tables

Planned

The Carbon table component class expands tables to 100% width, aligns everything to the left, and adds some padding and a fine-line border around every table cell.

Header 1	Header 2	Header 3
Content 1.1	Content 2.1	Content 3.1
Content 1.2	Content 2.2	Content 3.2
Content 1.3	Content 2.3	Content 3.3

Options

Header 1	Header 2	Header 3
Content 1.1	Content 2.1	Content 3.1
Content 1.2	Content 2.2	Content 3.2
Content 1.3	Content 2.3	Content 3.3

Standard Table

Use a standard table when a table is the main focus of an experience. The styles are helpful for making the content stand out.

Subtle Table

Subtle tables are for when tables need to be subdued or quiet. Removing styles allows them to blend into the content of the page more and be lower on the visual heirarchy.

Compact Table

In some cases, users may prefer to have a compact table format. This shrinks the amount of white space present allowing for more rows to be displayed on a given page at a time. This is most helpful when users are comparing items within a massive data set within a table.

Column Dividers

Column dividers are for organizing table content and aid the user in parsing related data. These are optional; use them carefully to group related content.

Selectable Rows

Some tables should allow a user to select rows, on which they can take an action. If a table has selectable rows, it should have checkboxes to the left of the table. All tables have a hover state regardless of if actions or selections can be made. This aids the user in viewing content in a single row.

Clickable Rows

Some tables should allow a user to click on a row in order to navigate into that item. In these cases, the whole row is clickable. In cases where there are multiple potential locations for a single row item, as is the case for when links are present in the row, only the cells should be clickable.

Semantic Variants

Use semantic classes on table rows, or individual cells. Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Responsive Tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Row Actions

Row Actions are presented on the far right of tables. Action column should be furthest right. They follow the rules of an Action group component, displaying up to three actions. If more are needed, the first two are shown and a menu icon is shown to contain the remaining actions. All actions are represented with icons and include tooltips and hidden labels.

Table Actions

Table Actions sit on the top of tables. Appropriate actions for a table would anything that pertains to the table's data set, or that adds to that data set. Multi select actions would also be present here. Individual cell or row actions should use Row Actions instead.

Table / Card Switch

Another way to present information is through cards. These cards can summarize many properties and actions related to a specific object in a small mobile-friendly way. A downside of these cards is that because the information is organized by objects instead of tabulature, it's harder to sort visually compare properties across multiple objects. In many cases, these two options may make sense for the same content depending on the tasks that the content is being used for. In these cases, offering the option to toggle between the two display modes provides the user a way of viewing the content in the most optimal way for them.

Reordering Columns

Provide the ability to reorder columns through drag and drop. For more guidance, see the Drag and Drop pattern.

Resizing Columns

Provide the ability to resize column widths through drag and drop. For more guidance, see the Drag and Drop pattern.

Inline Editing

Tables that allow inline editing can be done by signifying the cell is editable, and then switching the content to an appropriate input when clicked. An example is a string, the signifier would be changing the mouse cursor to the text edit insert icon, and then on click provide a text field that fits into the cell. When the user presses enter or clicks outside of the input, the input disappears and the new string is displayed.

Frozen Headers and Columns

search, sort, filter, pagination, other (multi item actions, table data actions, etc)

Pagination

Pagination on tables that require it is placed at the bottom of the table.

Behaviors

Responsive Table Overflow

Responsive tables make use of overflow-y:hidden, which clips off any content that goes beyond the bottom or top edges of the table. In Particular, this can clip off dropdown menus and other widgets.

Empty State

What happens when the content hasn't loaded or if the search criteria is too strict and no items are shown.

Usage Guidelines

Respect Vertical Alignment All content should be centered vertically within the row to offer the right visual balance.

Don't use Zebra Stripes Both standard and quiet tables already have row dividers to aid users in parsing related data. Don't customize the background color of alternating rows.

Use Column Dividers Sparingly Column dividers are optional decorations that can help organize table content and create groups of data. Only use these when necessary, and don't add them to every column.

Content Guidelines

Left Align Textual Data Similar to a paragraph of text, textual data is always left-aligned within a table. Never use center alignment.

Right Align Numberical data Numerical data should generally be right-aligned for the ease of scanning and comparing. This should only be left-aligned when numbers are arbitrary identifiers, known as “nominal numbers,” which means they can’t be compared or combined arithmetically (e.g. Post / ZIP codes, IP addresses, phone numbers). Column headers follow the alignment of the data.

Use Tabular numbers for numerical data When users need to compare numerical values, use tabular (monospaced) and lining (not old style) numbers to make it easier. These features are supported by Adobe Clean via the OpenType panel in Illustrator or via the CSS font feature settings.

Use an en dash (-) for missing values When there are gaps in the data, use an en dash (–) to represent null or not applicable (N/A) values.

Multi row / column cells Cells may sometimes pass through multiple rows or columns. In these cases, use the multi row / multi cell options to properly display this content.

Implementation

Information Tab

Checklist

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).

All Color Schemes

Works properly across all color schemes (light, dark).

Accessible Contrast for Text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible Contrast for UI Components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Defined Options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).

Defined Behaviors

Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing Guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization Guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard Interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design Tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI Kit

Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.