Table

Table component with a head and body with multiple rows. The table structure can be defined in the component and will be the same for all the rows. The grid is custom made but based upon the l-grid.

There is a wrapper around the table which is needed to have an overflow-x: auto when the table is too big to display completely.

Alternate

This table has a slightly different styling then the default table styling. The even rows get a background-color, the odds stay white.

px 

			
				<div class="o-table o-table--alternate-rows">
	<table class="o-table__content">
		<thead class="o-table__header">
			<tr class="o-table__header-row">
				<th class="o-table__title-4-12 ">Name</th>
				<th class="o-table__title-4-12 ">Occupation</th>
				<th class="o-table__title-4-12 ">Date of birth</th>
			</tr>
		</thead>
		<tbody class="o-table__body">
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
		</tbody>
	</table>
</div>

Compact

Display a more compact table, where spacing and maximum width of the columns are adjusted so that the scroll is less likely to trigger. This is mainly used in other components to improve experience (less scroll)

px 

			
				<div class="o-table o-table--compact">
	<table class="o-table__content">
		<thead class="o-table__header">
			<tr class="o-table__header-row">
				<th class="o-table__title-4-12 ">Name</th>
				<th class="o-table__title-4-12 ">Occupation</th>
				<th class="o-table__title-4-12 ">Date of birth</th>
			</tr>
		</thead>
		<tbody class="o-table__body">
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
		</tbody>
	</table>
</div>

Custom

Not every table is possibile to style with the <table> tag. Because of this a so called custom or simulation is created using divs.

px 

			
				<div class="o-table o-table--custom ">
	<div class="o-table__content">
		<div class="o-table__header-row">
			<div class="o-table__title-4-12 ">Name</div>
			<div class="o-table__title-4-12 ">Occupation</div>
			<div class="o-table__title-4-12 ">Date of birth</div>
		</div>
		<div class="o-table__body">
			<div class="o-table__row">
				<div class="o-table__col-4-12">John Doe</div>
				<div class="o-table__col-4-12">Teacher</div>
				<div class="o-table__col-4-12">01/12/1991</div>
			</div>
			<div class="o-table__row">
				<div class="o-table__col-4-12">John Doe</div>
				<div class="o-table__col-4-12">Teacher</div>
				<div class="o-table__col-4-12">01/12/1991</div>
			</div>
			<div class="o-table__row">
				<div class="o-table__col-4-12">John Doe</div>
				<div class="o-table__col-4-12">Teacher</div>
				<div class="o-table__col-4-12">01/12/1991</div>
			</div>
			<div class="o-table__row">
				<div class="o-table__col-4-12">John Doe</div>
				<div class="o-table__col-4-12">Teacher</div>
				<div class="o-table__col-4-12">01/12/1991</div>
			</div>
			<div class="o-table__row">
				<div class="o-table__col-4-12">John Doe</div>
				<div class="o-table__col-4-12">Teacher</div>
				<div class="o-table__col-4-12">01/12/1991</div>
			</div>
		</div>
	</div>
</div>

Default

px 

			
				<div class="o-table ">
	<table class="o-table__content">
		<thead class="o-table__header">
			<tr class="o-table__header-row">
				<th class="o-table__title-4-12 ">Name</th>
				<th class="o-table__title-4-12 ">Occupation</th>
				<th class="o-table__title-4-12 ">Date of birth</th>
			</tr>
		</thead>
		<tbody class="o-table__body">
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
		</tbody>
	</table>
</div>

Sortable

px 

			
				<div class="o-table ">
	<table class="o-table__content">
		<thead class="o-table__header">
			<tr class="o-table__header-row">
				<th class="o-table__title-4-12 o-table__title--sortable">Name</th>
				<th class="o-table__title-4-12 o-table__title--sortable">Occupation</th>
				<th class="o-table__title-4-12 o-table__title--sortable">Date of birth</th>
			</tr>
		</thead>
		<tbody class="o-table__body">
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
			<tr class="o-table__row">
				<td class="o-table__col-4-12">John Doe</td>
				<td class="o-table__col-4-12">Teacher</td>
				<td class="o-table__col-4-12">01/12/1991</td>
			</tr>
		</tbody>
	</table>
</div>

With actions

A table with an extra column that is seperated from the table content and act as an action column that only contains the action for that row with some additional information.

It makes use of the o-table--custom modifier because this styling is not possible with normal tables, instead the div-element must be used.

px 

			
				<div class="o-table o-table--custom o-table--with-actions js-table ">
	<div class="o-table__mobile-actions u-hide@above-viewport-9">
		<div class="o-table__mobile-header-row"></div>
		<div class="o-table__mobile-row">
			<a href="#" class="o-table__mobile-action icon-edit"></a>
		</div>
		<div class="o-table__mobile-row">
			<a href="#" class="o-table__mobile-action icon-edit"></a>
		</div>
		<div class="o-table__mobile-row">
			<a href="#" class="o-table__mobile-action icon-edit"></a>
		</div>
	</div>
	<div class="o-table__wrapper">
		<div class="o-table__content">
			<div class="o-table__header-row">
				<div class="o-table__title-2-12 o-table__title--sortable">Gemeente</div>
				<div class="o-table__title-3-12 o-table__title--sortable">Startdatum</div>
				<div class="o-table__title-2-12 o-table__title--sortable">Taal</div>
				<div class="o-table__title-5-12 ">Meer info</div>
			</div>
			<div class="o-table__body">
				<div class="o-table__row">
					<div class="o-table__col-2-12">
						Berchem
					</div>
					<div class="o-table__col-3-12">
						25 Maart 2019
					</div>
					<div class="o-table__col-2-12">
						Nederlands
					</div>
					<div class="o-table__col-5-12">
						0800 59 2222 / <a href='#'>Contacteer ons</a>
						<div class="a-attribute a-attribute--error o-table__seats">
							<span class="a-attribute__icon a-attribute__icon--before icon-error"></span>
							<p class="a-attribute__text">Nog 2 pl.</p>
						</div>
					</div>
				</div>
				<div class="o-table__row">
					<div class="o-table__col-2-12">
						Berchem
					</div>
					<div class="o-table__col-3-12">
						25 Maart 2019
					</div>
					<div class="o-table__col-2-12">
						Nederlands
					</div>
					<div class="o-table__col-5-12">
						0800 59 2222 / <a href='#'>Contacteer ons</a>
					</div>
				</div>
				<div class="o-table__row">
					<div class="o-table__col-2-12">
						Berchem
					</div>
					<div class="o-table__col-3-12">
						25 Maart 2019
					</div>
					<div class="o-table__col-2-12">
						Nederlands
					</div>
					<div class="o-table__col-5-12">
						0800 59 2222 / <a href='#'>Contacteer ons</a>
						<div class="a-attribute a-attribute--error o-table__seats">
							<span class="a-attribute__icon a-attribute__icon--before icon-error"></span>
							<p class="a-attribute__text">Nog 2 pl.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="o-table__actions u-hide@below-viewport-9">
			<div class="o-table__header-row"></div>
			<div class="o-table__action-row">
				<a class="o-table__action" href="#">
					<span class="o-table__action-text">Inschrijven</span>
					<span class="o-table__action-icon icon-edit"></span>
				</a>
			</div>
			<div class="o-table__action-row">
				<a class="o-table__action" href="#">
					<span class="o-table__action-text">Inschrijven</span>
					<span class="o-table__action-icon icon-edit"></span>
				</a>
			</div>
			<div class="o-table__action-row">
				<a class="o-table__action" href="#">
					<span class="o-table__action-text">Inschrijven</span>
					<span class="o-table__action-icon icon-edit"></span>
				</a>
			</div>
		</div>
	</div>
</div>

With link

This type of table displays an arrow button that will direct to the detail page represented by a row. This is always a custom table, so the modifier o-table--custom is required to create this type of table.

The table is created with the use of o-table--with-links modifier and can be combined with other table modifiers, presented below.

px 

			
				<div class="o-table js-table o-table--custom o-table--with-links ">
	<div class="o-table__mobile-actions u-hide@above-viewport-9">
		<div class="o-table__mobile-header-row"></div>
		<div class="o-table__mobile-row">
			<a href="#" class="o-table__mobile-action icon-arrow-right"></a>
		</div>
		<div class="o-table__mobile-row">
			<a href="#" class="o-table__mobile-action icon-arrow-right"></a>
		</div>
		<div class="o-table__mobile-row">
			<a href="#" class="o-table__mobile-action icon-arrow-right"></a>
		</div>
		<div class="o-table__mobile-row">
			<a href="#" class="o-table__mobile-action icon-arrow-right"></a>
		</div>
		<div class="o-table__mobile-row">
			<a href="#" class="o-table__mobile-action icon-arrow-right"></a>
		</div>
	</div>
	<div class="o-table__wrapper">
		<div class="o-table__content">
			<div class="o-table__header-row">
				<div class="o-table__title-4-12 ">Name</div>
				<div class="o-table__title-4-12 ">Occupation</div>
				<div class="o-table__title-4-12 ">Date of birth</div>
			</div>
			<div class="o-table__body">
				<div class="o-table__row">
					<a href="#" class="o-table__row-link">
						<div class="o-table__col-4-12">John Doe</div>
						<div class="o-table__col-4-12">Teacher</div>
						<div class="o-table__col-4-12">01/12/1991</div>
						<span class="o-table__link icon-arrow-right"></span>
					</a>
				</div>
				<div class="o-table__row">
					<a href="#" class="o-table__row-link">
						<div class="o-table__col-4-12">John Doe</div>
						<div class="o-table__col-4-12">Teacher</div>
						<div class="o-table__col-4-12">01/12/1991</div>
						<span class="o-table__link icon-arrow-right"></span>
					</a>
				</div>
				<div class="o-table__row">
					<a href="#" class="o-table__row-link">
						<div class="o-table__col-4-12">John Doe</div>
						<div class="o-table__col-4-12">Teacher</div>
						<div class="o-table__col-4-12">01/12/1991</div>
						<span class="o-table__link icon-arrow-right"></span>
					</a>
				</div>
				<div class="o-table__row">
					<a href="#" class="o-table__row-link">
						<div class="o-table__col-4-12">John Doe</div>
						<div class="o-table__col-4-12">Teacher</div>
						<div class="o-table__col-4-12">01/12/1991</div>
						<span class="o-table__link icon-arrow-right"></span>
					</a>
				</div>
				<div class="o-table__row">
					<a href="#" class="o-table__row-link">
						<div class="o-table__col-4-12">John Doe</div>
						<div class="o-table__col-4-12">Teacher</div>
						<div class="o-table__col-4-12">01/12/1991</div>
						<span class="o-table__link icon-arrow-right"></span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>

Documentation

Modifiers

  • o-table--alternate-rows

    Alternate styling where the background color changes between odds and even rows.

  • o-table--compact

    Define a more compact table where the spacing of each column and the maximum width is decreased. This is less likely to trigger a scroll than the default defined table.

  • o-table--with-actions

    Use this class when a seperate action is linked to every row. This class will make sure that the scroll is applied to the correct elements and that some elements are placed fixed within their container.

  • o-table--custom

    Instead of using the default <table&get; to create a markup, <div> is mainly used. This is done because <table> limits the slicing to much and a responive table cannot be created. Only apply this modifier when <div> is used to markup the table.

  • o-table--with-links

    Use this class when a link is used for every row. The link directs to the detail page. This will make sure the correct behaviour is applied when displaying on mobile devices.

  • o-table__title--sortable

    Add this class to be able to sort that column. It adds an icon to the title

JavaScript

  • js-table

    Class defined to apply the styleguide JavaScript functionality to the component. Should not be used in combination with other frameworks. This will make sure that every row scales accordingly by changing the height of the actions that are placed outside of the row for creating the correct behaviour.