Data Tables

Data table molecule and its variations don't yet have a direct sketch component. However this molecule is being used in other organisms such as product technical data and product comparison.

Tempalte Details:

Name:

Table

Documentation:

https://www.contorion.de/designsystem/templates/table

Template:

@application/components/table.template.twig

Twigprops:

isStripedTheme, isReverseStripedTheme, isMdCompact

Table themes

Ready

Fluid:

Default Theme
Table Cell 1X1	Table Cell 1X2	Table Cell 1X3
Table Cell 2X1	Table Cell 2X2	Table Cell 2X3
Table Cell 3X1	Table Cell 3X2	Table Cell 3X3

Primary Theme
Table Cell 1X1	Table Cell 1X2	Table Cell 1X3
Table Cell 2X1	Table Cell 2X2	Table Cell 2X3
Table Cell 3X1	Table Cell 3X2	Table Cell 3X3

Responsive:

Data tables HTML and CSS >>

Table borders

Ready

Fluid:

Table with vertical Splits
Table Cell 1X1	Table Cell 1X2	Table Cell 1X3
Table Cell 2X1	Table Cell 2X2	Table Cell 2X3
Table Cell 3X1	Table Cell 3X2	Table Cell 3X3

Table with horizontal Splits
Table Cell 1X1	Table Cell 1X2	Table Cell 1X3
Table Cell 2X1	Table Cell 2X2	Table Cell 2X3
Table Cell 3X1	Table Cell 3X2	Table Cell 3X3

Table with horizontal and vertical Splits
Table Cell 1X1	Table Cell 1X2	Table Cell 1X3
Table Cell 2X1	Table Cell 2X2	Table Cell 2X3
Table Cell 3X1	Table Cell 3X2	Table Cell 3X3

Responsive:

Data tables HTML and CSS >>

STYLE

GRID

ATOMS

MOLECULES

ORGANISMS

TEMPLATES

PAGES

DEVELOPER

MOLECULES

Data Tables

Name:

Documentation:

Template:

Twigprops:

Table themes

Fluid:

Responsive:

Table borders

Fluid:

Responsive: