Table

table component

Introduction

The table component can be either a static or an interactive element. Some tables provide the possiblity to add, remove, edit a row or expand it for further information.

Styleguide

Fonts in tables

Table styleguide fonts

Table entry

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
vertical-align: center

Table entry sorted

font-family: Bernina Sans Semibold
font-size: 14px
font-weight: 600
color: $gray-900

Table header

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-700

Table header sorted

font-family: Bernina Sans Bold
font-size: 12px
font-weight: 700
color: $gray-900

Elements and spacings in tables

Table styleguide spacings

x: 12px
y: 4px
z: 40px

Column sorter

To the right of the table header.

width: 8px
height: 8px
icon color: $gray-700

Column line

Responsible for separating columns.

min-width: 12px
line height: 1px
line color: $gray-200

Column zebra

Alternating white and gray table rows, starting always with white.

height: 40px
light color: #fff
dark color: $gray-100

Alignment in tables

Header text should always follow the same alignment as the column content.

Left-aligned content

Center-aligned content

Right-aligned content

Tables with two lines per row

Table with two lines

x: 60px

Table entry link

font-family: Bernina Sans Regular
font-size: 14px
color: $turquoise-600

Second row

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-700

Hover

Hover on table row

Hover on table row

border-width: 1px //inside
border-color: $gray-500

Hover on table header

Hover on table header

font-family: Bernina Sans Regular
font-color: $gray-900

Selection

Selection behavior

border-width: 1px //inside
border-color: theme color shade 500

Empty tables

If a table is empty, the information about the reason is shown with the table like in the example here. An illustration can help to visualize the problem.

Empty table

x: 48px
y: 8px
illustration-box: 92x92px

Headline

Fonts/headline

Description

Fonts/paragraph

Problem state indication

Use the red status color for highlighting problematic elements.

Single metric problem indication

If a single metric in a table entry is affected, use the red status color to highlight only the affected value.

Problem indication of a metric

Problem indication of entity or table row

If the problem affects the entity, but the affected metric is not in the table, the entity name is highlighted in red.

Problem indication of a entity

Important note! Don't color hyperlinks even if the whole entity is affected, in this case use the red indicator.

Problem indication of a entity containing a link

Warning indication

Warnings in tables indicate configuration issues.

Warnings in tables

x: 2px

Warning text

font-family: Bernina Sans Regular
font-size: 12px
font-color: $gray-700

Warning icon

Incident icon

color: $warning
icon-width: 16px
icon-height: 16px

Expandable table

To show more details in context of a single table row, use an expandable table.

To guarantee a reasonable perception of the content in the content area, there are some limitations of controls which can be used:

Keep in mind to limit the content in expandable tables for better visual perception. As a rule of thumb, we recommend to keep the content height under 580px (estimated available height on a screen width of 1024px). If there is a lot of content, consider navigating to a details page.

Please keep in mind:

Expandable tables on entity screens

Expandable table on an entity screen

x: 2px, theme color shade 500
y: 16px
z: 12px
expanded table row: theme color shade 100

Expandable tables on settings pages

Expandable table on settings pages

x: 2px, $gray-700
y: 16px
expanded table row: $gray-200

Edit a table entry

The table component supports two edit modes:

Please use the nested button within the table row.

All input fields, as well as update and cancel buttons are then within the expanded table row. The update button gets enabled as soon as changes are made. Triggering either of the buttons, the table row is updated and collapses again.

Edit within expanded table

Delete a table entry

Use remove as a table column header if this action can be reverted (means the value is not in the list any more, but still not deleted). Use delete as a table column header if the value definitely is going to be deleted from the table. The abort icon used in the nested button triggers the remove or delete action.

Delete a table entry

x: 40px
y: 12px
z: 8px

Create a table entry

With the create or add button on top of the table a new table row can be added. The form to create a new table entry replaces the button.

Create a table entry

x: 20px
y: 32px

Form for creating a table entry

border top: 2px line, $gray-200
border bottom:: 2px line, $gray-200
background-color: $gray-100
x: 16px
y: 20px
z: 60px

Example workflow:

Create a table entry

Move up/down

For tables where the sorting of the rows is crucial (e.g. Process group detection rules) the sorter up and sorter down icons are used in a nested button to move rows.

Move up and down of table rows

width: 20px
height: 20px
icon color: $turquoise-600

Filtering in tables

By default, a filter icon and the watermark Filter this table indicate the filter action. The filter is only applied to the table underneath.

Table filter

Icon

width: 16px
height: 16px
color: $turquoise-600

Font

font family: Bernina Sans Regular
font size: 14px
color: $gray-500

Hover of filter button

Table filter hover

icon color: $turquoise-700
font color: $gray-600

Table filter behavior

As soon as filter is focused, an input field appears. The matching text is highlighted in the table entries.

Table filter behavior

Table filter styling

Table filter styling

[input-field:] (/components/input-field)

x: 16px
y: 4px
z: 8px

Behavior

On smaller screens the table converts to an expandable table containing the most right columns as key-value pairs until the width fits the screen.

Responsive tables

Combination with other components

Buttons or switches in tables

It is possible to use buttons in tables. Buttons can also appear on hover.

Switches in tables (e.g. to enable/disable monitoring of an entity) are vertically centered in the table row.

Charts in tables

Micro bar charts can be used in tables to visualize information and enable easy comparison. Keep the number of bar charts to one and explain the chart with an appropriate table header. The metric can be added in the same column. For good legibility the metric should be right aligned in front of the bar chart.

Micro bar charts in tables

x: 8px
y: 16px

Colors are always dependent on the environment the chart is in theme colors.

Tables in Overlays

It is possible to use tables in overlays.