Demo Section

Each variation will be presented in the following section.

Table with head (top) and caption

Table Caption
Header 1	Header 2	Header 3	Header 4
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia	Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.	A small river named Duden flows by their place and supplies it with the necessary regelialia.	It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.	The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.	She packed her seven versalia, put her initial into the belt and made herself on the way.	When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.

Table with head (left)

Header 1	Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.	A small river named Duden flows by their place and supplies it with the necessary regelialia.	It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
Header 2	The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.	She packed her seven versalia, put her initial into the belt and made herself on the way.	When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.

Table without head

Table Data 1	Table Data 2	Table Data 3
It is a paradisematic country, in which roasted parts of sentences fly into your mouth.	A small river named Duden flows by their place and supplies it with the necessary regelialia.	It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Table for person list

Name	E-mail	Telefon	Fax	Raum	Gruppen
Titel Vorname Nachname	vorname.nachname@verwaltung.uni-muenchen.de	+49 (0)89 2180 - 9000	+49 (0)89 2180 - 99 - 9000	Zi. 123	Gruppe
Vorname Nachname	vorname.nachname@lmu.de	+49 (0)89 2180 - 9000	+49 (0)89 2180 - 99 - 9000	Zi. 34	Gruppe ich was nicht was
Prof. Dr. rer. nat. Andreas JungTestperson	Andreas.Jung-Testperson@verwaltung.uni-muenchen.de	+49 (0)89 2180 - 9000 - 3000 - 234	+49 (0)89 2180 - 99 - 9000	Zi. 34	Gruppe ich was nicht was
Vorname Nachname	vorname.nachname@lmu.de	+49 (0)89 2180 - 9000	+49 (0)89 2180 - 99 - 9000	Zi. 34	Gruppe ich was nicht was

Readme

Table

Description

The <table> element represents data with more than one dimension, in the form of a table.

The specs says:

Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table’s cells must completely cover that grid without overlap.

Tables must not be used as layout aids

JIRA

LMU-67

Requirements

@veams/core - Veams Core Framework.

Installation

Installation with Veams

veams install component table

veams -i c table

Fields

`table.hbs`

Settings

Parameter	Type	Default	Description
settings.tableContextClass	String	`'default'`	Context class of component.
settings.tableClasses	String	`''`	Modifier classes for component.
settings.tableJsModule	String	`''`	Modifier for a spezific JS-Module - used for integrating the scroll-indicator for handling scrolling by long tables
settings.scrollIndicatorEnabled	Boolean	`false`	Here you can handle the usability of the Scrollindicator, ‘true’ : Everything for the functionality of the scroll-indicator will be included
settings.scrollbarSecond	Boolean	`false`	Here you can include a markup to show a second scrollbar at the top of the table. Setting ‘true’ will include the specific code.
settings.filterEnabled	Boolean	`false`	Setting on ‘true’ will include a Attribute called ‘data-js-filter-element=“filter-table”’ in the Table Element. This attribute can be used in other Moduls to geht the Element by Javascript

Content

Parameter	Type	Description
content.tableCaption	String	A caption for the table.
content.tableHeader	Object	An object which contains the headings.
content.tableHeader.tableRows	Array	Rows in header.
content.tableBody	Object	An object which contains the body.
content.tableBody.tableRows	Array	Rows in body.

`table__row.hbs`

Settings

Parameter	Type	Description
settings.trClass	String	Row classes.

Content

Parameter	Type	Description
content.tableCells	Array	Table cells.

`table__cell.hbs`

Settings

Parameter	Type	Description
settings.thTag	Boolean	Definition of th or td.
settings.cellClass	String	Cell classes like is-th, is-td or is-bold.
settings.tableCellJsModule	STRING	If this Attribute exist and it is not empty the th or td-Element get a data-js-item-Attribute with the Value of the Attribute defined in the JSON-Attribute tableCellJsModule. In use to sort Table Rows in person-list with the Attribute ‘data-js-item=table-sort’
settings.dataLabel	STRING	Optional - is the Name that descripe the content of the Cell. Similar to the th-Name. is used for person-list-Tables to show the Name of the Row
settings.dataSort	STRING	Optional - contains the Sortstring for the specific cell. In combination with the Sort-solution by person-list important. Here you can included the wished sortname

Content

Parameter	Type	Description
content.cellContent	String	Cell content.
content.cellContentClass	String	Cell content will be included in a span tag with this class. In use for the fax Element f.E.
content.cellLinkHref	String	Url to create a Link-Element with this Link around the content.
content.cellLinkClass	String	Class for the Link-Element around the content. Only usefull in combination with the Attribute ‘cellLinkHref’

SASS

Variables

There are multiple variables which you can change:

Variable	Value	Description

Modifier Classes

There are modifier classes you can add to c-table:

Modifier	Description
is-not-included	Class for the table__row to hide a row in a filtered list
is-included	Class for the table__row to show a row in a filtered list
is-sortfield	Class to show a sorting th-Element
is-asc	Class to show an icon for sorting asc in a th-sort-Element (is-sortfield)
is-desc	Class to show an icon for sorting desc in a th-sort-Element (is-sortfield)

Templates

table.hbs

<div class="c-table{{#if settings.tableContextClass}}--{{settings.tableContextClass}}{{else}}--default{{/if}}{{#if
		settings.tableClasses}} {{settings.tableClasses}}{{/if}}"
     data-css="c-table"{{#if settings.tableJsModule}} data-js-module="{{settings.tableJsModule}}"{{#if settings.tableJsOptions}} data-js-options='{{stringify settings.tableJsOptions}}'{{/if}}{{/if}}>
	<div class="table__indicator"{{#if settings.scrollIndicatorEnabled}} data-js-item="scroll-indicator"{{/if}}>
		{{#if settings.scrollbarSecond}}
		<div class="table__wrapper-second" data-js-item="scroll-wrapper-second">
			<div class="table__content-second" data-js-item="scroll-content-second">&nbsp;</div>
		</div>
		{{/if}}
		<div class="table__wrapper"{{#if settings.scrollIndicatorEnabled}} data-js-item="scroll-wrapper"{{/if}}>
			<table class="table__content"{{#if settings.scrollIndicatorEnabled}} data-js-item="scroll-content"{{/if}}{{#if settings.filterEnabled}} data-js-filter-element="filter-table"{{/if}}>
				{{#if content.tableCaption}}
					<caption class="table__caption">
						{{ content.tableCaption}}
					</caption>
				{{/if}}

				{{#if content.tableHeader}}
					<thead class="table__head">
						{{#each content.tableHeader.tableRows}}
							{{> table__row settings=this.settings content=this.content }}
						{{/each}}
					</thead>
				{{/if}}

				<tbody class="table__body">
					{{#each content.tableBody.tableRows}}
						{{> table__row settings=this.settings content=this.content }}
					{{/each}}
				</tbody>
			</table>
		</div>
	</div>
</div>

table__cell.hbs

<{{#unless settings.thTag}}td{{else}}th{{/unless}} class="table__data{{#unless
		settings.thTag}} is-td{{else}} is-th{{/unless}}{{#if
		settings.cellClass}} {{settings.cellClass}}{{/if}}" {{#if
		settings.tableCellJsModule}} data-js-item="{{settings.tableCellJsModule}}"{{/if}} {{#if
		settings.dataLabel}} data-label="{{settings.dataLabel}}"{{/if}}{{#if
		settings.dataSort}} data-sort="{{settings.dataSort}}"{{/if}}>{{#if
		content.cellLinkHref}}<a href="{{content.cellLinkHref}}" rel="noopener" class="table__link{{#if
		content.cellLinkClass}} {{content.cellLinkClass}}{{/if}}">{{/if}}{{#if
		content.cellContentClass}}<span class="{{content.cellContentClass}}">{{/if}}{{content.cellContent}}{{#if
		content.cellContentClass}}</span>{{/if}}{{#if
		content.cellLinkHref}}</a>{{/if}}</{{#unless
		settings.thTag}}td{{else}}th{{/unless}}>

table__row.hbs

<tr class="table__row{{#if settings.trClass}} {{settings.trClass}}{{/if}}">
	{{#each content.tableCells}}
		{{> table__cell settings=this.settings content=this.content}}
	{{/each}}
</tr>

Data File

table-bp.hjson

{
	"title": "Table",
	"variations": {
		"tableWithHead": {
			"docs": {
				"variationName": "Table with head (top) and caption",
				"sectionCenter": true
			},
			"settings": {
				"tableContextClass": "default",
				"tableClasses": false,
				"tableJsModule": "scroll-indicator",
				"scrollIndicatorEnabled": true
			},
			"content": {
				"tableCaption": "Table Caption",
				"tableHeader": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "Header 1"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "Header 2"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "Header 3"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "Header 4"
										}
									}
								]
							}
						}
					]
				},
				"tableBody": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-bold"
										},
										"content": {
											"cellContent": "Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
										}
									}
								]
							}
						},
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-bold"
										},
										"content": {
											"cellContent": "The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "She packed her seven versalia, put her initial into the belt and made herself on the way."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane."
										}
									}
								]
							}
						}
					]
				}
			}
		},
		"tableHeadLeft": {
			"docs": {
				"variationName": "Table with head (left)",
				"sectionCenter": true
			},
			"settings": {
				"tableContextClass": "",
				"tableClasses": false,
				"tableJsModule": "scroll-indicator",
				"scrollIndicatorEnabled": true
			},
			"content": {
				"tableCaption": false,
				"tableHeader": false,
				"tableBody": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "Header 1"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-bold"
										},
										"content": {
											"cellContent": "Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
										}
									}
								]
							}
						},
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "Header 2"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-bold"
										},
										"content": {
											"cellContent": "The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "She packed her seven versalia, put her initial into the belt and made herself on the way."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane."
										}
									}
								]
							}
						}
					]
				}
			}
		},
		"tableWithoutHead": {
			"docs": {
				"variationName": "Table without head",
				"sectionCenter": true
			},
			"settings": {
				"tableContextClass": "",
				"tableClasses": false,
				"tableJsModule": "scroll-indicator",
				"scrollIndicatorEnabled": true
			},
			"content": {
				"tableCaption": false,
				"tableHeader": false,
				"tableBody": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "Table Data 1"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "Table Data 2"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "Table Data 3"
										}
									}
								]
							}
						},
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
										}
									}
								]
							}
						}
					]
				}
			}
		},
		"tablePerson": {
			"docs": {
				"variationName": "Table for person list",
				"sectionCenter": true
			},
			"settings": {
				"tableContextClass": "person",
				"tableClasses": false,
				"tableJsModule": "scroll-indicator",
				"scrollIndicatorEnabled": true,
				"scrollbarSecond": true,
				"filterEnabled": true
			},
			"content": {
				"tableCaption": "",
				"tableHeader": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": true,
											"cellClass": "",
											"tableCellJsModule": ""
										},
										"content": {
											"cellContent": "Name"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": "",
											"tableCellJsModule": ""
										},
										"content": {
											"cellContent": "E-mail"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": "",
											"tableCellJsModule": ""
										},
										"content": {
											"cellContent": "Telefon"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": "",
											"tableCellJsModule": ""
										},
										"content": {
											"cellContent": "Fax"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": "",
											"tableCellJsModule": ""
										},
										"content": {
											"cellContent": "Raum"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": "",
											"tableCellJsModule": ""
										},
										"content": {
											"cellContent": "Gruppen"
										}
									}
								]
							}
						}
					]
				},
				"tableBody": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-bold is-nowrap",
											"dataLabel": "Name",
											"dataSort": "Titel Vorname Nachname"
										},
										"content": {
											"cellContent": "Titel Vorname Nachname",
											"cellLinkHref": "#",
											"cellLinkClass": "is-internal"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false,
											"dataLabel": "E-mail",
											"dataSort": "vorname.nachname@verwaltung.uni-muenchen.de"
										},
										"content": {
											"cellContent": "vorname.nachname@verwaltung.uni-muenchen.de",
											"cellLinkHref": "mailto:vorname.nachname@verwaltung.uni-muenchen.de",
											"cellLinkClass": "is-mail"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Telefon",
											"dataSort": "49 (0)89 2180 - 9000"
										},
										"content": {
											"cellContent": "+49 (0)89 2180 - 9000",
											"cellLinkHref": "tel: +4908921809000",
											"cellLinkClass": "is-phone"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Fax",
											"dataSort": "49 (0)89 2180 - 99 - 9000"
										},
										"content": {
											"cellContent": "+49 (0)89 2180 - 99 - 9000",
											"cellContentClass": "is-fax"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Raum",
											"dataSort": "Zi. 123"
										},
										"content": {
											"cellContent": "Zi. 123"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false,
											"dataLabel": "Gruppen",
											"dataSort": "Gruppe"
										},
										"content": {
											"cellContent": "Gruppe"
										}
									}
								]
							}
						},
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-bold is-nowrap",
											"dataLabel": "Name",
											"dataSort": "Vorname Nachname"
										},
										"content": {
											"cellContent": "Vorname Nachname"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false,
											"dataLabel": "E-mail",
											"dataSort": "vorname.nachname@lmu.de"
										},
										"content": {
											"cellContent": "vorname.nachname@lmu.de",
											"cellLinkHref": "mailto:vorname.nachname@verwaltung.uni-muenchen.de",
											"cellLinkClass": "is-mail"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Telefon",
											"dataSort": "49 (0)89 2180 - 9000"
										},
										"content": {
											"cellContent": "+49 (0)89 2180 - 9000",
											"cellLinkHref": "tel: +4908921809000",
											"cellLinkClass": "is-phone"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Fax",
											"dataSort": "49 (0)89 2180 - 99 - 9000"
										},
										"content": {
											"cellContent": "+49 (0)89 2180 - 99 - 9000",
											"cellContentClass": "is-fax"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Raum",
											"dataSort": "Zi. 34"
										},
										"content": {
											"cellContent": "Zi. 34"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false,
											"dataLabel": "Gruppen",
											"dataSort": "Gruppe ich was nicht was"
										},
										"content": {
											"cellContent": "Gruppe ich was nicht was"
										}
									}
								]
							}
						},
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-bold is-nowrap",
											"dataLabel": "Name",
											"dataSort": "Prof. Dr. rer. nat. Andreas JungTestperson"
										},
										"content": {
											"cellContent": "Prof. Dr. rer. nat. Andreas JungTestperson"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false,
											"dataLabel": "E-mail",
											"dataSort": "Andreas.Jung-Testperson@verwaltung.uni-muenchen.de"
										},
										"content": {
											"cellContent": "Andreas.Jung-Testperson@verwaltung.uni-muenchen.de",
											"cellLinkHref": "mailto:vorname.nachname@verwaltung.uni-muenchen.de",
											"cellLinkClass": "is-mail"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Telefon",
											"dataSort": "49 (0)89 2180 - 9000 - 3000 - 234"
										},
										"content": {
											"cellContent": "+49 (0)89 2180 - 9000 - 3000 - 234",
											"cellLinkHref": "tel: +4908921809000",
											"cellLinkClass": "is-phone"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Fax",
											"dataSort": "49 (0)89 2180 - 99 - 9000"
										},
										"content": {
											"cellContent": "+49 (0)89 2180 - 99 - 9000",
											"cellContentClass": "is-fax"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Raum",
											"dataSort": "Zi. 34"
										},
										"content": {
											"cellContent": "Zi. 34"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false,
											"dataLabel": "Gruppen",
											"dataSort": "Gruppe ich was nicht was"
										},
										"content": {
											"cellContent": "Gruppe ich was nicht was"
										}
									}
								]
							}
						},
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-bold is-nowrap",
											"dataLabel": "Name",
											"dataSort": "Vorname Nachname"
										},
										"content": {
											"cellContent": "Vorname Nachname"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false,
											"dataLabel": "E-mail",
											"dataSort": "vorname.nachname@lmu.de"
										},
										"content": {
											"cellContent": "vorname.nachname@lmu.de",
											"cellLinkHref": "mailto:vorname.nachname@verwaltung.uni-muenchen.de",
											"cellLinkClass": "is-mail"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Telefon",
											"dataSort": "49 (0)89 2180 - 9000"
										},
										"content": {
											"cellContent": "+49 (0)89 2180 - 9000",
											"cellLinkHref": "tel: +4908921809000",
											"cellLinkClass": "is-phone"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Fax",
											"dataSort": "49 (0)89 2180 - 99 - 9000"
										},
										"content": {
											"cellContent": "+49 (0)89 2180 - 99 - 9000",
											"cellContentClass": "is-fax"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": "is-nowrap",
											"dataLabel": "Raum",
											"dataSort": "Zi. 34"
										},
										"content": {
											"cellContent": "Zi. 34"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false,
											"dataLabel": "Gruppen",
											"dataSort": "Gruppe ich was nicht was"
										},
										"content": {
											"cellContent": "Gruppe ich was nicht was"
										}
									}
								]
							}
						}
					]
				}
			}
		}
	}
}

Styles

_table.scss

/* ===================================================
COMPONENT: TABLE
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */

[data-css="c-table"] {
	margin-bottom: 50px;

	.table__scroll-wrapper {
		overflow-x: auto;
		overflow-y: hidden;
		overflow: -moz-scrollbars-auto;
		-ms-overflow-style: auto;
		-webkit-overflow-scrolling: touch;
	}

	// Responsive overflow behaviour

	.table__indicator {
		position: relative;

		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			width: 10px;
			background-size: 10px 100%;
			z-index: 1;
			opacity: 0;
			transition: opacity $animation-duration-std $animation-easing-std;
		}

		&::before {
			left: 0;
			background: radial-gradient(ellipse at left, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 75%) 0 center;
		}

		&::after {
			right: 0;
			background: radial-gradient(ellipse at right, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
		}

		&.is-scrollable-left {

			&::before {
				opacity: 1;
			}
		}

		&.is-scrollable-right {

			&::after {
				opacity: 1;
			}
		}
	}

	.table__wrapper {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.table__wrapper-second {
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		height: 20px;
		display: none;
		margin-bottom: 8px;

		&.is-scrollbar-visible {
			display: block;

			@include print() {
				display: none;
			}
		}

	}

	.table__content-second {
		height: 20px;
	}

	/*
	Sub Elements
	----------------------- */
	.table__content {
		margin-bottom: 0;
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		border-bottom: 1px solid $color-gray-border;
		max-width: none;
		overflow: visible;
		display: table;
		margin-left: 0;
	}

	.table__caption {
		caption-side: bottom;
		text-align: left;
		margin: 10px 0;
	}

	.table__head-inner {
		padding: 13px 20px;
		font-weight: normal;
		text-align: left;
	}

	.table__data {
		padding: 13px 20px;
		text-align: left;
	}


	.table__row {
		background-color: $color-light;
		a {
			color: $color-green-hc-dark;
			text-decoration: none;
			font-family: $font-bold;
			font-weight: 700;

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;
			}

			&.is-mail, &.is-phone {
				transition: color $animation-duration-std/3 $animation-easing-std;
				position: relative;
				display: block;
				padding: 0 0 0 23px;

				&:focus {
					outline: none;
				}

				&.a11y-focus-key {
					@include a11y-focus-key();
				}

				&::before {
					@include pseudo();
					position: absolute;
					display: block;
					left: 0px;
					vertical-align: unset;

					@include print() {
						display: none;
					}
				}

				@include print() {
					padding: 0;
					font-family: $font-regular;
					font-weight: 400;
				}

			}

			&.is-mail,
			&[href*="mailto:"] {

				&:hover,
				&.a11y-focus-key {

					&::before {
						@include sprites-icon-mail-grey();
					}
				}

				&::before {
					@include sprites-icon-mail-green();
					top: 6px;
				}
			}

			&.is-phone,
			&[href*="tel:"] {

				&:hover,
				&.a11y-focus-key {

					&::before {
						@include sprites-icon-phone-grey();
					}
				}

				&::before {
					@include sprites-icon-phone-green();

					top: 3px;
				}
			}
		}

		&:nth-child(2n) {
			background-color: $color-white;
			a {
				color: $color-green;

				&.is-external, &.is-mail, &.is-internal, &.is-phone, &.is-download {
					color: $color-green;
				}

				&:hover,
				&.a11y-focus-key {
					color: $color-dark;
				}
			}
		}

		@include hcm() {
			border: 1px solid;
		}

	}

	/*
	States
	----------------------- */
	.is-th {
		background-color: $color-dark;
		color: $color-white;
		font-family: $font-bold;
		font-weight: 700;
		padding: 13px 20px;
		text-align: left;
		vertical-align: top;
		border-right: 1px solid $color-white;
		letter-spacing: .25px;

		font-size: 1.5rem;
		line-height: (22/15);

		@include bp($bp-desktop-m) {
			font-size: 1.6rem;
			line-height: (24/16);
		}

		&:last-child {
			border-right: 0;
		}
	}

	.is-td {
		padding: 13px 20px;
		text-align: left;
		vertical-align: top;
		border-right: 1px solid $color-gray-border;
		font-family: $font-regular;
		letter-spacing: .25px;
		color: $color-dark;
		font-size: 1.5rem;
		line-height: (22/15);

		@include bp($bp-desktop-m) {
			font-size: 1.6rem;
			line-height: (24/16);
		}

		&:last-child {
			border-right: 0;
		}

		.is-fax {

			font-family: $font-bold;
			font-weight: 700;
			color: $color-dark;
			position: relative;
			display: block;
			padding: 0 0 0 23px;

			&::before {
				@include pseudo();
				@include sprites-icon-fax-grey();

				position: absolute;
				display: block;
				top: 2px;
				left: 0;
				vertical-align: unset;
				transition: transform $animation-duration-std $animation-easing-std;

				@include print() {
					display: none;
				}
			}

			@include print() {
					padding: 0;
					font-family: $font-regular;
					font-weight: 400;
				}

		}
	}

	.is-bold {
		font-weight: 700;
	}

	.is-sortfield {
		cursor: pointer;
		padding-right: 25px !important;
		position: relative;
		background-clip: padding-box;

		&::after {
			@include pseudo();

			position: absolute;
			right: 8px;
			top: 18px;
			transition: transform $animation-duration-std $animation-easing-std, opacity $animation-duration-std $animation-easing-std;
		}

		&::after {
			@include sprites-icon-sort-table();

		}

		&:hover,
			&.a11y-focus-key {
				color: $color-white;
				background-color: $color-green;
		}

		&.is-asc {
			&::after {
				@include sprites-icon-sort-table-up();
			}
		}

		&.is-desc {
			&::after {
				@include sprites-icon-sort-table-down();
			}
		}


	}


}

/* ---------------------------------------------------
Context: default
--------------------------------------------------- */
.c-table--default {

}

.c-table--person {

	.table__indicator {
		position: relative;

		&::before,
		&::after {
			width: 10px;
			background-size: 10px 100%;
		}

		@include print() {
			&::before,
			&::after {
				display: none;
			}
		}
	}

	.table__head {
		display: none;

		@include bp($bp-tablet-l) {
			display:table-header-group;
		}
	}

	.table__content {
		border-bottom: 0;
		empty-cells: show;

		@include bp($bp-tablet-l) {
			border-bottom: 1px solid $color-gray-border;
		}
	}

	.is-nowrap {
		@include bp($bp-tablet-l) {
			white-space: nowrap;
		}
	}

	.is-th {
		@include bp($bp-tablet-l) {
			padding: 13px 5px;
		}
	}

	.is-td {
		float: left;
		width: 100%;
		border-right: 0;
		vertical-align: middle;
		position: relative;
		padding: 5px 5px 5px 10px;

		@include bp($bp-mobile-p) {
			border-bottom: 1px solid $color-gray-border;
			padding: 13px 5px 13px 120px;
		}

		@include bp($bp-tablet-p) {
			padding: 13px 5px 13px 25%;
		}

		@include bp($bp-tablet-l) {
			width: auto;
			float: none;
			border-bottom: 0;
			border-right: 1px solid $color-gray-border;
			vertical-align: top;
			padding: 13px 5px;
		}

		@include print() {
			border-bottom: 1px solid $color-dark;
			padding: 5px 5px 5px 20%;
		}

		&::before {
			content:attr(data-label);
			display: block;
			word-wrap: break-word;
			font-family: $font-bold;
			font-weight: 700;
			text-align: left;
			vertical-align: top;
			letter-spacing: .25px;
			font-size: 1.5rem;
			line-height: (22/15);
			height: calc(100%);

			@include bp($bp-mobile-p) {
				position: absolute;
				top: 0px;
				left: 0px;
				padding: 13px 5px;
				background-color: $color-dark;
				color: $color-white;
				border-right: 1px solid $color-white;
				width: calc(120px - (3 * 5px));
				height: calc(100% - (2 * 13px));
			}

			@include bp($bp-tablet-p) {
				width: calc(25% - (3 * 5px));
			}

			@include bp($bp-tablet-l) {
				display: none;
				width: 0;
				height: 0;
				padding: 0;
			}

			@include print() {
				position: absolute;
				top: 0px;
				left: 0px;
				padding: 5px;
				background-color: transparent;
				color: $color-dark;
				border-right: 1px solid $color-dark;
				width: calc(20% - (3 * 5px));
				height: calc(100% - ((2 * 5px) + 1px));
			}

		}

		&:last-child {
			border-right: 0;
			border-bottom: 0;
		}
	}

	.table__row {
		float: left;
		width: 100%;
		margin-bottom: 2em;
		border: 1px solid $color-dark;
		background-color: $color-light;

		a {
			color: $color-green-hc-dark;
		}

		@include bp($bp-tablet-l) {
			width: auto;
			float: none;
			margin-bottom: 0;
			border: 0;
		}

		@include print() {
			border: 1px solid $color-dark;
		}

		&.is-not-included {
			display: none;
		}

		&.is-included {
			background-color: $color-light;

			.is-td {
				@include bp($bp-tablet-l) {
					border-bottom: 1px solid $color-gray-border;
				}

				&:last-child {
					@include bp($bp-tablet-l) {
						border-bottom: 1px solid $color-gray-border;
					}
				}
			}

		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}

HTML Output

Table with head (top) and caption

<div class="c-table--default" data-css="c-table" data-js-module="scroll-indicator">
	<div class="table__indicator" data-js-item="scroll-indicator">
		<div class="table__wrapper" data-js-item="scroll-wrapper">
			<table class="table__content" data-js-item="scroll-content">
				<caption class="table__caption">
					Table Caption
				</caption>
				<thead class="table__head">
					<tr class="table__row">
						<th class="table__data is-th">Header 1</th>
						<th class="table__data is-th">Header 2</th>
						<th class="table__data is-th">Header 3</th>
						<th class="table__data is-th">Header 4</th>
					</tr>
				</thead>
				<tbody class="table__body">
					<tr class="table__row">
						<td class="table__data is-td">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</td>
						<td class="table__data is-td is-bold">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</td>
						<td class="table__data is-td">A small river named Duden flows by their place and supplies it with the necessary regelialia.</td>
						<td class="table__data is-td">It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</td>
					</tr>
					<tr class="table__row">
						<td class="table__data is-td">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</td>
						<td class="table__data is-td is-bold">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</td>
						<td class="table__data is-td">She packed her seven versalia, put her initial into the belt and made herself on the way.</td>
						<td class="table__data is-td">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

Table with head (left)

<div class="c-table--default" data-css="c-table" data-js-module="scroll-indicator">
	<div class="table__indicator" data-js-item="scroll-indicator">
		<div class="table__wrapper" data-js-item="scroll-wrapper">
			<table class="table__content" data-js-item="scroll-content">
				<tbody class="table__body">
					<tr class="table__row">
						<th class="table__data is-th">Header 1</th>
						<td class="table__data is-td is-bold">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</td>
						<td class="table__data is-td">A small river named Duden flows by their place and supplies it with the necessary regelialia.</td>
						<td class="table__data is-td">It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</td>
					</tr>
					<tr class="table__row">
						<th class="table__data is-th">Header 2</th>
						<td class="table__data is-td is-bold">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</td>
						<td class="table__data is-td">She packed her seven versalia, put her initial into the belt and made herself on the way.</td>
						<td class="table__data is-td">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

Table without head

<div class="c-table--default" data-css="c-table" data-js-module="scroll-indicator">
	<div class="table__indicator" data-js-item="scroll-indicator">
		<div class="table__wrapper" data-js-item="scroll-wrapper">
			<table class="table__content" data-js-item="scroll-content">
				<tbody class="table__body">
					<tr class="table__row">
						<td class="table__data is-td">Table Data 1</td>
						<td class="table__data is-td">Table Data 2</td>
						<td class="table__data is-td">Table Data 3</td>
					</tr>
					<tr class="table__row">
						<td class="table__data is-td">It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</td>
						<td class="table__data is-td">A small river named Duden flows by their place and supplies it with the necessary regelialia.</td>
						<td class="table__data is-td">It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

Table for person list

<div class="c-table--person" data-css="c-table" data-js-module="scroll-indicator">
	<div class="table__indicator" data-js-item="scroll-indicator">
		<div class="table__wrapper-second" data-js-item="scroll-wrapper-second">
			<div class="table__content-second" data-js-item="scroll-content-second">&nbsp;</div>
		</div>
		<div class="table__wrapper" data-js-item="scroll-wrapper">
			<table class="table__content" data-js-item="scroll-content" data-js-filter-element="filter-table">
				<thead class="table__head">
					<tr class="table__row">
						<th class="table__data is-th">Name</th>
						<th class="table__data is-th">E-mail</th>
						<th class="table__data is-th">Telefon</th>
						<th class="table__data is-th">Fax</th>
						<th class="table__data is-th">Raum</th>
						<th class="table__data is-th">Gruppen</th>
					</tr>
				</thead>
				<tbody class="table__body">
					<tr class="table__row">
						<td class="table__data is-td is-bold is-nowrap" data-label="Name" data-sort="Titel Vorname Nachname"><a href="#" rel="noopener" class="table__link is-internal">Titel Vorname Nachname</a></td>
						<td class="table__data is-td" data-label="E-mail" data-sort="vorname.nachname@verwaltung.uni-muenchen.de"><a href="mailto:vorname.nachname@verwaltung.uni-muenchen.de" rel="noopener" class="table__link is-mail">vorname.nachname@verwaltung.uni-muenchen.de</a></td>
						<td class="table__data is-td is-nowrap" data-label="Telefon" data-sort="49 (0)89 2180 - 9000"><a href="tel: +4908921809000" rel="noopener" class="table__link is-phone">+49 (0)89 2180 - 9000</a></td>
						<td class="table__data is-td is-nowrap" data-label="Fax" data-sort="49 (0)89 2180 - 99 - 9000"><span class="is-fax">+49 (0)89 2180 - 99 - 9000</span></td>
						<td class="table__data is-td is-nowrap" data-label="Raum" data-sort="Zi. 123">Zi. 123</td>
						<td class="table__data is-td" data-label="Gruppen" data-sort="Gruppe">Gruppe</td>
					</tr>
					<tr class="table__row">
						<td class="table__data is-td is-bold is-nowrap" data-label="Name" data-sort="Vorname Nachname">Vorname Nachname</td>
						<td class="table__data is-td" data-label="E-mail" data-sort="vorname.nachname@lmu.de"><a href="mailto:vorname.nachname@verwaltung.uni-muenchen.de" rel="noopener" class="table__link is-mail">vorname.nachname@lmu.de</a></td>
						<td class="table__data is-td is-nowrap" data-label="Telefon" data-sort="49 (0)89 2180 - 9000"><a href="tel: +4908921809000" rel="noopener" class="table__link is-phone">+49 (0)89 2180 - 9000</a></td>
						<td class="table__data is-td is-nowrap" data-label="Fax" data-sort="49 (0)89 2180 - 99 - 9000"><span class="is-fax">+49 (0)89 2180 - 99 - 9000</span></td>
						<td class="table__data is-td is-nowrap" data-label="Raum" data-sort="Zi. 34">Zi. 34</td>
						<td class="table__data is-td" data-label="Gruppen" data-sort="Gruppe ich was nicht was">Gruppe ich was nicht was</td>
					</tr>
					<tr class="table__row">
						<td class="table__data is-td is-bold is-nowrap" data-label="Name" data-sort="Prof. Dr. rer. nat. Andreas JungTestperson">Prof. Dr. rer. nat. Andreas JungTestperson</td>
						<td class="table__data is-td" data-label="E-mail" data-sort="Andreas.Jung-Testperson@verwaltung.uni-muenchen.de"><a href="mailto:vorname.nachname@verwaltung.uni-muenchen.de" rel="noopener" class="table__link is-mail">Andreas.Jung-Testperson@verwaltung.uni-muenchen.de</a></td>
						<td class="table__data is-td is-nowrap" data-label="Telefon" data-sort="49 (0)89 2180 - 9000 - 3000 - 234"><a href="tel: +4908921809000" rel="noopener" class="table__link is-phone">+49 (0)89 2180 - 9000 - 3000 - 234</a></td>
						<td class="table__data is-td is-nowrap" data-label="Fax" data-sort="49 (0)89 2180 - 99 - 9000"><span class="is-fax">+49 (0)89 2180 - 99 - 9000</span></td>
						<td class="table__data is-td is-nowrap" data-label="Raum" data-sort="Zi. 34">Zi. 34</td>
						<td class="table__data is-td" data-label="Gruppen" data-sort="Gruppe ich was nicht was">Gruppe ich was nicht was</td>
					</tr>
					<tr class="table__row">
						<td class="table__data is-td is-bold is-nowrap" data-label="Name" data-sort="Vorname Nachname">Vorname Nachname</td>
						<td class="table__data is-td" data-label="E-mail" data-sort="vorname.nachname@lmu.de"><a href="mailto:vorname.nachname@verwaltung.uni-muenchen.de" rel="noopener" class="table__link is-mail">vorname.nachname@lmu.de</a></td>
						<td class="table__data is-td is-nowrap" data-label="Telefon" data-sort="49 (0)89 2180 - 9000"><a href="tel: +4908921809000" rel="noopener" class="table__link is-phone">+49 (0)89 2180 - 9000</a></td>
						<td class="table__data is-td is-nowrap" data-label="Fax" data-sort="49 (0)89 2180 - 99 - 9000"><span class="is-fax">+49 (0)89 2180 - 99 - 9000</span></td>
						<td class="table__data is-td is-nowrap" data-label="Raum" data-sort="Zi. 34">Zi. 34</td>
						<td class="table__data is-td" data-label="Gruppen" data-sort="Gruppe ich was nicht was">Gruppe ich was nicht was</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

TABLE (Standard Module )

src/app/shared/components/table/templates

Demo Section

Table with head (top) and caption

Table with head (left)

Table without head

Table for person list

Readme

Table

Description

JIRA

Requirements

Installation

Installation with Veams

Fields

table.hbs

Settings

Content

table__row.hbs

Settings

Content

table__cell.hbs

Settings

Content

SASS

Variables

Modifier Classes

Templates

table.hbs

table__cell.hbs

table__row.hbs

Data File

table-bp.hjson

Styles

_table.scss

HTML Output

Table with head (top) and caption

Table with head (left)

Table without head

Table for person list

Wonach suchst du?

`table.hbs`

`table__row.hbs`

`table__cell.hbs`