Datagrid

Datagrids are used for organizing large volumes of data in a logical an consistent way allowing users to easily scan, compare, and perform actions on them.

Example of a complex datagrid

Header cells

Table header cells can be tweaked by in different ways.

Body cells

Body cells can be tweaked in different ways.

Background options

Border options

Box model

By default table cells contain text and will be fluid. Stretching to fill as much space as possible. Cells containing fixed width elements should wrap to fit their contents.

All table cells have 12px padding left and right.

Cells containing text and will be fluid. Stretching to fill as much space as possible.

Cells containing fixed width elements should wrap to fit their contents.

Sortable

Sortable header cells have a hover state, when active an icon appears next to the label.

Sortable header cell behavior

3px margin between label and sort icon

Selectable

For selectable datagrids checkboxes are added before table header and every body row. Selecting one or more rows triggers bulk actions.

Selecting the checkbox in the table header selects all rows.

No selection

Single item selected

All items selected

Actions

Actions are typically displayed using an IconMenu component in the last column of a row.

IconMenu hover

Menu is displayed

Sticky

When screen size is sparse use sticky columns to keep important information visible at all times.

You can choose to create any number of sticky columns from the left or the right. Either works.

Full width table

Complex datagrids with lots of content will mostly stretch the full width of the page to use all the space available. Extra horizontal padding should be added for more breathing room and proper visual alignment.

Table content sits too close to left navigation and is not aligned with header above

Extra padding (12px) gives more breathing room and aligns table content with header above

Table in content area

Simple datagrids with light content should be displayed in an island and wrapped in content area.

Mixed layout

Sometimes layout may consist of a fixed-width content area combined with a full-width fluid datagrid. This is perfectly fine, don’t worry too much if page content does not align with datagrid content in this case.