Tables

Tables are used to organize large amounts of related information into categories making them easy to scan.

Standard tables

This is a straight-forward Bootstrap 4 table with table cells set to vertically align center. You can override this by using Bootstrap’s alignment utility classes.

table

Sortable tables

The sortable table allows for reordering of table rows by drag and drop. This table should be used when the order of rows needs to be customizable and mirror the order in which the items exist elsewhere (e.g. navs, featured content sliders).

table_sort

Nested tables

Nested tables have two levels of hierarchy, nesting child rows under a parent row. This table enables a person to take action on all children on the parent row via the action menu, yet also includes an edit link on each child level. Nested tables should only be used when it’s important to display a parent/child relationship between rows, and when there are less than 5 rows of children per parent.

table--nested