Go To Github

COMPONENT

c-table

Demo Section

Each variation will be presented in the following sections.

Table with head (top) and caption

Table Caption
1234
Far far away, behind the word mountains, far from the countries Vokalia and ConsonantiaSeparated 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)

Table withSeparated 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.
left headThe 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

Tablewithouthead
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.

Technical Details

README

Bower versionGitter Chat

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

Installation

Installation with Veams

veams install vc table

Installation with Bower

bower install veams-component-table --save

Fields

c-table.hbs

Settings

  • settings.tableContextClass {String} [default] - Context class of component.
  • settings.tableClasses {String} - Modifier classes for component.

Content

  • 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.

c-table__row.hbs

Settings

  • settings.trClass {String} - Row classes.

Content

  • content.tableCells {Array} - Table cells.

c-table__cell.hbs

Settings

  • settings.thTag {Boolean} - Definition of th or td.
  • settings.cellClass {String} - Cell classes.

Content

  • content.cellContent {String} - Cell content.
Data File
{
	"variations": {
		"tableWithHead": {
			"docs": {
				"variationName": "Table with head (top) and caption",
				"sectionCenter": true
			},
			"settings": {
				"tableContextClass": "zebra",
				"tableClasses": false
			},
			"content": {
				"tableCaption": "Table Caption",
				"tableHeader": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "1"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "2"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "3"
										}
									},
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "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": "zebra",
				"tableClasses": false
			},
			"content": {
				"tableCaption": false,
				"tableHeader": false,
				"tableBody": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": true,
											"cellClass": false
										},
										"content": {
											"cellContent": "Table with"
										}
									},
									{
										"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": "left head"
										}
									},
									{
										"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": "zebra",
				"tableClasses": false
			},
			"content": {
				"tableCaption": false,
				"tableHeader": false,
				"tableBody": {
					"tableRows": [
						{
							"settings": {
								"trClass": false
							},
							"content": {
								"tableCells": [
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "Table"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "without"
										}
									},
									{
										"settings": {
											"thTag": false,
											"cellClass": false
										},
										"content": {
											"cellContent": "head"
										}
									}
								]
							}
						},
						{
							"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."
										}
									}
								]
							}
						}
					]
				}
			}
		}
	}
}
Templates

c-table

<div class="c-table{{#if settings.tableContextClass}}--{{settings.tableContextClass}}{{/if}}{{#if
		settings.tableClasses}} {{settings.tableClasses}}{{/if}}"
     data-css="c-table">
	<table class="table__content">
		{{#if content.tableCaption}}
			<caption class="table__caption">
				{{ content.tableCaption}}
			</caption>
		{{/if}}

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

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

c-table__row.hbs

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

c-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}}">{{content.cellContent}}</{{#unless
		settings.thTag}}td{{else}}th{{/unless}}>
Styles
/* ===================================================
COMPONENT: TABLE
=================================================== */

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

[data-css="c-table"] {
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;

	/*
	Sub Elements
	----------------------- */
	.table__content {
		margin-bottom: 0;
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}

	.table__caption {
		caption-side: bottom;
		text-align: left;
	}

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

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

	/*
	States
	----------------------- */
	.is-th {
	}

	.is-td {
	}

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

/* ---------------------------------------------------
Context: Zebra Table
--------------------------------------------------- */
.c-table--zebra {
	/*
	Sub Elements
	----------------------- */
	.table__row {

		&:nth-child(n+1) {
			background-color: transparent;
		}

		&:nth-child(2n+2) {
			background-color: #F5F5F5;
		}
	}

	/*
	States
	----------------------- */
	.is-th {
		background-color: #999999;
		color: #FFFFFF;
	}
}
HTML Output

Table with head (top) and caption

<div class="c-table--zebra" data-css="c-table">
	<table class="table__content">
		<caption class="table__caption">
			Table Caption
		</caption>
		<thead class="table__head">
			<tr class="table__row">
				<th class="table__data is-th">1</th>
				<th class="table__data is-th">2</th>
				<th class="table__data is-th">3</th>
				<th class="table__data is-th">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>

Table with head (left)

<div class="c-table--zebra" data-css="c-table">
	<table class="table__content">
		<tbody class="table__body">
			<tr class="table__row">
				<th class="table__data is-th">Table with</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">left head</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>

Table without head

<div class="c-table--zebra" data-css="c-table">
	<table class="table__content">
		<tbody class="table__body">
			<tr class="table__row">
				<td class="table__data is-td">Table</td>
				<td class="table__data is-td">without</td>
				<td class="table__data is-td">head</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>