EvoToolkit - v3.7.2 (Changelog)

Table

Simple table component for displaying tabular data.

Source

Contributors

Luke Harrison
  • Overview
  • Theming

Table of contents

Base

Modifiers

Base

Standard

This is the default state of the table component. Borders are used to cleary seperate rows, whilst a hover effect makes focusing on a particular row easier on the eyes.

Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 6076 03/01/2016 £2,443
Visa - 1237 07/01/2016 £1,181 
<table class='c-table'>
	<thead>
		<tr>
			<th>Account</th>
			<th>Due Date</th>
			<th>Amount</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Visa - 3412</td>
			<td>04/01/2016</td>
			<td>&pound;1,190</td>
		</tr>
		<tr>
			<td>Visa - 6076</td>
			<td>03/01/2016</td>
			<td>&pound;2,443</td>
		</tr>
		<tr>
			<td>Visa - 1237</td>
			<td>07/01/2016</td>
			<td>&pound;1,181</td>
		</tr>
	</tbody>
</table>

Sized

By default, all table columns have equal width, however using width utility classes, you can resize individual columns, with the remainder filling the available space automatically.

Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 6076 03/01/2016 £2,443
Visa - 1237 07/01/2016 £1,181 
<table class='c-table'>
	<thead>
		<tr>
			<th class='u-width-3/12'>Account</th>
			<th>Due Date</th>
			<th class='u-width-6/12'>Amount</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Visa - 3412</td>
			<td>04/01/2016</td>
			<td>&pound;1,190</td>
		</tr>
		<tr>
			<td>Visa - 6076</td>
			<td>03/01/2016</td>
			<td>&pound;2,443</td>
		</tr>
		<tr>
			<td>Visa - 1237</td>
			<td>07/01/2016</td>
			<td>&pound;1,181</td>
		</tr>
	</tbody>
</table>

Modifiers

A list of modifiers for the table component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Bare

Using this modifier removes the outer borders of the table. Use if your table is placed right up to the edges of its parent component to avoid a double border. A practical example can be found by clicking the "Open Modal" button.

Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 6076 03/01/2016 £2,443
Visa - 1237 07/01/2016 £1,181

My Modal

Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 6076 03/01/2016 £2,443
Visa - 1237 07/01/2016 £1,181 
<table class='c-table c-table--bare u-mb-large'>
	<thead>
		<tr>
			<th>Account</th>
			<th>Due Date</th>
			<th>Amount</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Visa - 3412</td>
			<td>04/01/2016</td>
			<td>&pound;1,190</td>
		</tr>
		<tr>
			<td>Visa - 6076</td>
			<td>03/01/2016</td>
			<td>&pound;2,443</td>
		</tr>
		<tr>
			<td>Visa - 1237</td>
			<td>07/01/2016</td>
			<td>&pound;1,181</td>
		</tr>
	</tbody>
</table>

<button class="c-button" data-modal="js-my-modal">Open Modal</button>
<div class="c-modal c-modal--small js-my-modal">
	<div class="c-modal__wrapper">
		 <div class="c-modal__title-wrapper">
				<h1 class="c-modal__title">My Modal</h1>
				<svg class="c-modal__close js-close-modal" tabindex="0"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
		 </div>
		 <div class="c-modal__box">
				<div class="c-modal__content">
					 <table class='c-table c-table--bare'>
					 	<thead>
					 		<tr>
					 			<th>Account</th>
					 			<th>Due Date</th>
					 			<th>Amount</th>
					 		</tr>
					 	</thead>
					 	<tbody>
					 		<tr>
					 			<td>Visa - 3412</td>
					 			<td>04/01/2016</td>
					 			<td>&pound;1,190</td>
					 		</tr>
					 		<tr>
					 			<td>Visa - 6076</td>
					 			<td>03/01/2016</td>
					 			<td>&pound;2,443</td>
					 		</tr>
					 		<tr>
					 			<td>Visa - 1237</td>
					 			<td>07/01/2016</td>
					 			<td>&pound;1,181</td>
					 		</tr>
					 	</tbody>
					 </table>
					 <div class="o-box u-p-small c-box u-align-center">
						 <button class="c-button js-close-modal">
						 	Close
						 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
						</button>
					</div>
				</div>
		 </div>
	</div>
</div>

Responsive Collapse

This modifier collapses the table into a single column until the specified breakpoint is hit. This should be used to make the table readable on smaller screens. Please note, you need to add a data-table-label attribute to each cell referencing the column it belongs to. This makes sure it's correctly labelled in its collapsed state.

Also, if you add a c-table__full-width-label class to one of your data-table-label <td> elements or c-table--full-width-labels to the component base, labels and contents will stack vertically when in collapsed state. This is useful when dealing with long labels or large content to make sure they don't overlay.

Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 1237 07/01/2016 £1,181
Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 1237 07/01/2016 £1,181 
<table class='c-table c-table--collapse@max-md u-mb-regular'>
	<thead>
		<tr>
			<th>Account</th>
			<th>Due Date</th>
			<th>Amount</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-table-label='Account'>Visa - 3412</td>
			<td data-table-label='Due Date'>04/01/2016</td>
			<td data-table-label='Amount'>&pound;1,190</td>
		</tr>
		<tr>
			<td data-table-label='Account' class="c-table__full-width-label">Visa - 1237</td>
			<td data-table-label='Due Date' class="c-table__full-width-label">07/01/2016</td>
			<td data-table-label='Amount' class="c-table__full-width-label">&pound;1,181</td>
		</tr>
	</tbody>
</table>

<table class='c-table c-table--collapse@max-md c-table--full-width-labels'>
	<thead>
		<tr>
			<th>Account</th>
			<th>Due Date</th>
			<th>Amount</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-table-label='Account'>Visa - 3412</td>
			<td data-table-label='Due Date'>04/01/2016</td>
			<td data-table-label='Amount'>&pound;1,190</td>
		</tr>
		<tr>
			<td data-table-label='Account'>Visa - 1237</td>
			<td data-table-label='Due Date'>07/01/2016</td>
			<td data-table-label='Amount'>&pound;1,181</td>
		</tr>
	</tbody>
</table>

Vertical Alignment

Default Center Vertical Alignment
Center (Default) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum turpis id leo fringilla, at maximus purus ullamcorper. In hac habitasse platea dictumst.
Top Vertical Alignment
Top Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum turpis id leo fringilla, at maximus purus ullamcorper. In hac habitasse platea dictumst. 
<table class="c-table u-mb-regular">
	<tbody>
		<tr class="u-hide@sm3">
			<th class="c-type--bold">Default Center Vertical Alignment</th>
		</tr>
		<tr>
			<td class="c-box c-box--border c-type--bold u-width-3/12 u-width-2/12@lg u-hide@max-sm3">Center (Default)</td>
			<td class="u-align-left">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum turpis id leo fringilla, at maximus purus ullamcorper. In hac habitasse platea dictumst.
			</td>
		</tr>
	</tbody>
</table>

<table class="c-table c-table--top">
	<tbody>
		<tr class="u-hide@sm3">
			<th class="c-type--bold">Top Vertical Alignment</th>
		</tr>
		<tr>
			<td class="c-box c-box--border c-type--bold u-width-3/12 u-width-2/12@lg u-hide@max-sm3">Top</td>
			<td class="u-align-left">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum turpis id leo fringilla, at maximus purus ullamcorper. In hac habitasse platea dictumst.
			</td>
		</tr>
	</tbody>
</table>

Sizes

A smaller version of the table with reduced cell padding.

Standard Table
Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 6076 03/01/2016 £2,443
Visa - 1237 07/01/2016 £1,181
Small Table
Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 6076 03/01/2016 £2,443
Visa - 1237 07/01/2016 £1,181 
<table class='c-table u-mb-regular'>
	<thead>
		<tr>
			<th colspan="3">Standard Table</th>
		</tr>
		<tr>
			<th>Account</th>
			<th>Due Date</th>
			<th>Amount</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Visa - 3412</td>
			<td>04/01/2016</td>
			<td>&pound;1,190</td>
		</tr>
		<tr>
			<td>Visa - 6076</td>
			<td>03/01/2016</td>
			<td>&pound;2,443</td>
		</tr>
		<tr>
			<td>Visa - 1237</td>
			<td>07/01/2016</td>
			<td>&pound;1,181</td>
		</tr>
	</tbody>
</table>

<table class='c-table c-table--small'>
	<thead>
		<tr>
			<th colspan="3">Small Table</th>
		</tr>
		<tr>
			<th>Account</th>
			<th>Due Date</th>
			<th>Amount</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Visa - 3412</td>
			<td>04/01/2016</td>
			<td>&pound;1,190</td>
		</tr>
		<tr>
			<td>Visa - 6076</td>
			<td>03/01/2016</td>
			<td>&pound;2,443</td>
		</tr>
		<tr>
			<td>Visa - 1237</td>
			<td>07/01/2016</td>
			<td>&pound;1,181</td>
		</tr>
	</tbody>
</table>

You can theme the table component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-table-border-color light
$component-table-row-hover-color very-light
$component-table-header-background-color very-light
$component-table-collapse-even-row-color very-light