8.1.0

Table

Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.
Table shift and alignment attributes can work in conjunction with each other, as well as be applied to the table header (not just the table body).

Small


Use table size "sm" when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.

Table can leverage the max-width property. Learn more in our visual guidelines.

Medium


Use table size "md" to add padding around each row to increase reading comfortability.

Large


Use table size "lg" to add padding around each row to maximize reading comfortability.

Row Alignment


This is to be used to shift the whole row.
The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

Column Alignment


You can individually align a pieace of table data, but a more practical use would be applied to align a column.
In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

Shift Row


Shift Column Data


You can individually shift a pieace of table data, or shift an entire column.
The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

Side Highlight


Side highlight can take product, status, and category colors. To view full list of colors, visit token colors.

Note: Only use category colors for categories. Do not mix it with product or status colors.

Table Container Off


Disable Hover


Multi-line


Force Single Line


Data Table


Responsive Tables


Table with 1 Action


If there is one button on each row of the table, ideally, it should use the secondary variant and be placed at the end of the row

Table with 2 Actions


If there are two actions on each of the row, one should ideally one should use the secondary variant and the other use the link variant. The button using the secondary variant should be placed at the end.

Table with 2+ Actions


If there are more than two actions on each row, then they should be contained in secondary circle icon button with the ellipsis-h icon (horizontal ellipsis) at the end of the row

Table with Actions in the Middle


If the button is towards the middle of the table, it should likely use button variant link

Table with Icon Buttons


Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon


UI Samples using Table Kit

Get the full picture. See how this kit is used in our samples.