Tables are great for displaying data

By now it should be obvious to everyone, that tables are not the way to go for laying out pages, and in fact never has been. Fortunately, today we have awesome stuff for layout control like flexbox and CSS Grid. However, tables are still quite awesome for their orignal purpose - the display of data.

Indskrevne studerende Opgjort pr. år den 1. oktober
Fakultet2014201520162017
Arts12.32011.42810.6199.750
Science and Technology7.1767.0966.7136.766
Health4.2834.3304.3534.398
Aarhus BSS14.34113.66312.81212.206
I alt38.12036.51734.49733.120

Table density

Tables in the Delphinus Design System come in three diffrent densities. You should select your density depending on how much data you have and how much real estate is available.

Default table density
Fakultet2014201520162017
Arts12.32011.42810.6199.750
Science and Technology7.1767.0966.7136.766
Health4.2834.3304.3534.398
Aarhus BSS14.34113.66312.81212.206
I alt38.12036.51734.49733.120
Dense table style
Fakultet2014201520162017
Arts12.32011.42810.6199.750
Science and Technology7.1767.0966.7136.766
Health4.2834.3304.3534.398
Aarhus BSS14.34113.66312.81212.206
I alt38.12036.51734.49733.120
Very dense table style
Fakultet2014201520162017
Arts12.32011.42810.6199.750
Science and Technology7.1767.0966.7136.766
Health4.2834.3304.3534.398
Aarhus BSS14.34113.66312.81212.206
I alt38.12036.51734.49733.120

Responsive behavior
Wall-to-wall horizontal scroll

The tables above are all wrapped in a container, that allow the table to overflow and cause horizontal scroll, if the table i wider than the viewport. Note the wrapper ensures that it is only the table, not the entire page that is oerflown. This is prettymuch how tables work when viewing a Wikipedia-article on your phone. Except a small enhancement, that sets a minimum width on the table, preventing the table and its content from being completely compressed and obscrured, as you sometimes see on Wikipedia.

The table below and this page block is further enhanced in a way, that allows the table to overflow all the way to the edge of the display, making it more visually clear that content is hiding in the horizontal direction.

Table with wall-to-wall horizontal scrolling
Fakultet2014201520162017
Arts12.32011.42810.6199.750
Science and Technology7.1767.0966.7136.766
Health4.2834.3304.3534.398
Aarhus BSS14.34113.66312.81212.206
I alt38.12036.51734.49733.120

Responsive behavior
Wrapping the table

The tables below take a different approach to responsive design, than the horizontal overflow shown above. Each tablerow is wrapped into a column of its own. Depending on the table's content and number of columns, this behavoir can be set a two different breakpoints.

Please note: This should only in rare cases be used on tables with 2 columns or less.

Wrap at medium viewport width
Fakultet2014201520162017
Arts12.32011.42810.6199.750
Science and Technology7.1767.0966.7136.766
Health4.2834.3304.3534.398
Aarhus BSS14.34113.66312.81212.206
I alt38.12036.51734.49733.120
Wrap at default viewport width
Fakultet2014201520162017
Arts12.32011.42810.6199.750
Science and Technology7.1767.0966.7136.766
Health4.2834.3304.3534.398
Aarhus BSS14.34113.66312.81212.206
I alt38.12036.51734.49733.120

Cell alignment

By default cells are left and top alignedYou can right align stuff
And you can center align stuffLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Updating rows

When updateing data in a table row you can draw the user's attention to that row by shotly highlighting its background.

JS for demo buttons not yet implemented

Rows should not be persistently hightlighted as, shown below. Only shortly, by adding af flash modifier class to the row, and the removing it immediately again. This will cause the background color to change instantly and then fade out.

Select a hightlight style

This row was updated
This row was updated with something successful
This row was updated with some thing that triggred a warning