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
Table header cells can be tweaked by in different ways.
Body cells can be tweaked in different ways.
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 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
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.
Single item selected
All items selected
Actions are typically displayed using an IconMenu component in the last column of a row.
Menu is displayed
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.
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.