Grids

Use grids to display tabular data in a structured, easy-to-scan layout. Keep grid data values concise and consistently-formatted to maximize readability.

DO

Apply the same formatting to all data in a given column

Keep row heights uniform, preferably keeping text short so that it can be displayed on one line

DON'T

Don't use grids to display large blocks of text

Don't show different types of content or varied formatting within the same column

Don't display values that create variation in row height as this makes the grid hard to scan

Alignment

Left-align text and right-align numbers and dates (in left-to-right locales).

Align headers consistently with column content.

Styling Options

Spacing

The "Standard" grid spacing offers a good balance between information density and readability.

Use the "Dense" spacing option to reduce the need for vertical scrolling when showing grids with a large number of rows. Note that some users may find the dense grids to be harder to read because of their reduced white space.

Shade Alternate Rows

Use the alternate row shading option to help users match up values on the same row when scanning grids with a lot of data. The shading may not be necessary when showing grids with only a few rows of data.

Border Style

Use the "Light" border style to remove the outer border and vertical column divider lines from grids. This creates a less cluttered look for simple grids that can easily be scanned without the need for extra decorative lines.

Selection Style

DO

Use the "Row Highlight" selection style for read only content. An example of this can be seen in the master-detail pattern.

DON'T

Avoid mixing "Row Highlight" selection style and interactive components, such as links or inputs, in grid cells. This may make it difficult for the user to differentiate between clicking on the row or one of the interactive components within the row. Instead, use the "Checkbox" selection style when there are interactive components in a grid.

Consistency

When displaying multiple grids on the same page, use the same density and styling options for all grids to create a consistent experience.

Fixed Height

Use the height option to maintain a fixed height for the grid regardless of the number of rows and to ensure that the header is always visible.

DON'T

Don't pick a fixed height when the grid is the only/main thing on the page as users may have to scroll the page AND scroll the contents of the grid to find what they're looking for.

DON'T

Don't mix paging and fixed heights as users would have to scroll and page to find what they're looking for. At the same time, be aware of performance considerations when choosing to remove paging or setting a very large batch size and relying on scrolling.

Accessibility

When designing a grid, use the row header parameter to help screen reader users better understand the context of each cell they’re traversing. The row header acts as the identifier for a given row, similar to how the column header is the identifier for each column. When users navigate to a cell within a grid, both the corresponding column header and row header values are announced by the screen reader.

Note that the row header is only recognized as the header for columns to its right. Because of this, the first column containing text is usually the correct choice for row header.

FEEDBACK