@adobe/coral-spectrum
Version:
Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.
1,247 lines • 56 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coral.Table</title>
<script>document.addEventListener('click', function(event) {if (event.target.nodeName === 'A' || event.matchedTarget && event.matchedTarget.nodeName === 'A') {event.preventDefault();}});</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<style>.hljs{background:#fff;font-size:12px;border-radius:4px;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;}</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const markup = document.body.querySelectorAll('.markup');
for (var i = 0; i < markup.length; i++) {
const code = markup[i].innerHTML;
const id = 'markup-code-' + i;
markup[i].insertAdjacentHTML('afterend',
'<div style="margin:10px 0">' +
'<a onclick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden" class="coral-Link" href="#">Toggle markup</a>' +
'<pre hidden>' +
'<code id="'+ id +'" class="html">' +
'</code>' +
'</pre>' +
'</div>');
document.getElementById(id).textContent = code;
}
window.hljs.initHighlightingOnLoad();
});
</script>
<link rel="stylesheet" href="../css/coral.css">
<script>
document.addEventListener('DOMContentLoaded', function() {
var headings = document.getElementsByTagName('H2');
for (var i = 0; i < headings.length; i++) {
var heading = headings[i];
var table = heading.nextElementSibling;
if (table.tagName === 'TABLE') {
heading.id = Coral.commons.getUID();
table.setAttribute('labelledby', heading.id);
}
}
const script = document.createElement('script');
script.src = '../js/coral.js';
script.dataset.coralIcons = '../resources/';
document.head.appendChild(script);
});
</script>
<style>
table[is="coral-table"] {
max-width: 500px;
}
</style>
</head>
<body class="coral--lightest">
<main class="u-coral-margin">
<div style="position:absolute;top:16px;right:16px;">
<strong style="padding-right:8px"><span class="u-coral-hiddenS">Theme:</span></strong>
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--light'">Light</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--lightest'">Lightest</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--dark'">Dark</a> |
<a href="#" class="coral-Link theme" onclick="document.body.className='coral--darkest'">Darkest</a>
<strong style="padding:0 8px 0 16px"><span class="u-coral-hiddenS">Scale:</span></strong>
<a href="#" class="coral-Link scale" onclick="document.body.classList.remove('coral--large')">Medium</a> |
<a href="#" class="coral-Link scale" onclick="document.body.classList.add('coral--large')">Large</a>
</div>
<h1 class="coral-Heading--XXL">Table</h1>
<h2 class="coral-Heading--M">Usage notes</h2>
<hr class="coral-Divider--L">
<p class="coral-Body--M u-coral-padding-vertical">
Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
</p>
<h2 class="coral--Heading--S">Default</h2>
<div class="markup">
<table is="coral-table">
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Quiet variant</h2>
<div class="markup">
<table is="coral-table" variant="quiet">
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Checkbox selection</h2>
<div class="markup">
<style>
.table-sticky [coral-table-scroll] {
max-height: 200px;
}
</style>
<table is="coral-table" selectable orderable multiple class="table-sticky">
<colgroup>
<col is="coral-table-column" fixedwidth>
<col is="coral-table-column" sortable>
<col is="coral-table-column" sortable sortabletype="date">
<col is="coral-table-column" fixedwidth>
</colgroup>
<thead is="coral-table-head" sticky>
<tr is="coral-table-row">
<th is="coral-table-headercell">
<coral-checkbox coral-table-select></coral-checkbox>
</th>
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Date</th>
<th is="coral-table-headercell"></th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<coral-checkbox></coral-checkbox>
<coral-icon icon="folder" autoarialabel="on"></coral-icon>
</td>
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">January 28, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<coral-checkbox></coral-checkbox>
<img alt="" src="https://via.placeholder.com/128x128" alt="thumbnail">
</td>
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">February 15, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<coral-checkbox></coral-checkbox>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">May 16, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<coral-checkbox></coral-checkbox>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">January 28, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<coral-checkbox></coral-checkbox>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">December 1, 2011</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<coral-checkbox></coral-checkbox>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">February 15, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">May 16, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">ListView selection</h2>
<div class="markup">
<style>
.table-sticky [coral-table-scroll] {
max-height: 200px;
}
</style>
<table is="coral-table" selectable orderable multiple class="table-sticky" variant="list">
<colgroup>
<col is="coral-table-column" fixedwidth>
<col is="coral-table-column" sortable>
<col is="coral-table-column" sortable sortabletype="date">
<col is="coral-table-column" fixedwidth>
</colgroup>
<thead is="coral-table-head" sticky>
<tr is="coral-table-row">
<th is="coral-table-headercell">
<coral-checkbox coral-table-select></coral-checkbox>
</th>
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Date</th>
<th is="coral-table-headercell"></th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<coral-icon icon="folder" autoarialabel="on"></coral-icon>
</td>
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">January 28, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<img alt="" src="https://via.placeholder.com/128x128" alt="thumbnail">
</td>
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">February 15, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">May 16, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">January 28, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">December 1, 2011</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">February 15, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" coral-table-rowselect>
<img alt="" src="https://via.placeholder.com/128x128">
</td>
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">May 16, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Content with centered alignment</h2>
<div class="markup">
<table is="coral-table">
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell">
<p>There are no saved activities in your account yet.</p>
<p>Get started now.</p>
</td>
</tr>
</tbody>
<colgroup>
<col is="coral-table-column" alignment="center">
</colgroup>
</table>
</div>
<h2 class="coral--Heading--S">Column divider</h2>
<div class="markup">
<table is="coral-table">
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body" divider="column">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Cell divider</h2>
<div class="markup">
<table is="coral-table">
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell"></th>
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
<th is="coral-table-headercell"></th>
</tr>
</thead>
<tbody is="coral-table-body" divider="cell">
<tr is="coral-table-row">
<th is="coral-table-headercell">Left Label</th>
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
<th is="coral-table-headercell">Right Label</th>
</tr>
<tr is="coral-table-row">
<th is="coral-table-headercell">Left Label</th>
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
<th is="coral-table-headercell">Right Label</th>
</tr>
<tr is="coral-table-row">
<th is="coral-table-headercell">Left Label</th>
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
<th is="coral-table-headercell">Right Label</th>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Sticky head example</h2>
<div class="markup">
<table is="coral-table" class="table-sticky">
<thead is="coral-table-head" divider="cell" sticky>
<tr is="coral-table-row">
<th is="coral-table-headercell">Column 1 with loooooooonnnnnng text</th>
<th is="coral-table-headercell">Column 2 with loooooooonnnnnng text</th>
<th is="coral-table-headercell">Column 3</th>
</tr>
<tr is="coral-table-row">
<th is="coral-table-headercell">Sub Column 1 has a long text also</th>
<th is="coral-table-headercell">Sub Column 2</th>
<th is="coral-table-headercell">Sub Column 3 wants to mimic sub column 1</th>
</tr>
</thead>
<tbody is="coral-table-body" divider="column">
<tr is="coral-table-row">
<td is="coral-table-cell">Cell 1</td>
<td is="coral-table-cell">Cell 2</td>
<td is="coral-table-cell">Cell 3</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell">Cell 1</td>
<td is="coral-table-cell">Cell 2</td>
<td is="coral-table-cell">Cell 3</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell">Cell 1</td>
<td is="coral-table-cell">Cell 2</td>
<td is="coral-table-cell">Cell 3</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell">Cell 1</td>
<td is="coral-table-cell">Cell 2</td>
<td is="coral-table-cell">Cell 3</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell">Cell 1</td>
<td is="coral-table-cell">Cell 2</td>
<td is="coral-table-cell">Cell 3</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Sortable columns</h2>
<div class="markup">
<table is="coral-table">
<colgroup>
<col is="coral-table-column" sortable sortabledirection="ascending">
<col is="coral-table-column" sortable sortabletype="number">
<col is="coral-table-column" sortable sortabletype="date">
</colgroup>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell" value="20398">20,398</td>
<td is="coral-table-cell" value="1322694000000">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell" value="23857">23,857</td>
<td is="coral-table-cell" value="1327705200000">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell" value="3498">3,498</td>
<td is="coral-table-cell" value="1329260400000">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell" value="20398">20,398</td>
<td is="coral-table-cell" value="1337119200000">May 16, 2012</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Custom sorting</h2>
<div class="markup">
<style>
.table-custom-sorting {
min-height: 200px;
}
</style>
<table is="coral-table" class="table-custom-sorting">
<colgroup>
<col is="coral-table-column" sortable sortabletype="custom" sortabledirection="ascending">
</colgroup>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
</tr>
</thead>
<tbody is="coral-table-body"></tbody>
</table>
<script>
window.addEventListener('load', function() {
var activities = ['Beta', 'Alpha', 'Charlie', 'Echo', 'Delta', 'Golf', 'Hotel', 'Foxtrot'];
function appendActivity (table, activity) {
table.items.add().appendChild(new Coral.Table.Cell().set({
content: {
textContent : activity
}
}));
}
function customSort(table, newDirection) {
table.items.clear();
var data = activities.slice();
if (newDirection === Coral.Table.Column.sortableDirection.DEFAULT) {
data.slice(0,4).forEach(function(activity) {
appendActivity(table, activity);
});
}
else if (newDirection === Coral.Table.Column.sortableDirection.ASCENDING) {
data.sort().slice(0,4).forEach(function(activity) {
appendActivity(table, activity);
});
}
else if (newDirection === Coral.Table.Column.sortableDirection.DESCENDING) {
data.sort().reverse().slice(0,4).forEach(function(activity) {
appendActivity(table, activity);
});
}
}
// Custom sorting example
var customSortingTable = document.querySelector('.table-custom-sorting');
customSort(customSortingTable, customSortingTable.columns.firstElementChild.sortableDirection);
customSortingTable.on('coral-table:beforecolumnsort', function(event) {
customSort(customSortingTable, event.detail.direction);
});
});
</script>
</div>
<h2 class="coral--Heading--S">Sortable + orderable columns</h2>
<div class="markup">
<table is="coral-table">
<colgroup>
<col is="coral-table-column" orderable sortable sortabledirection="ascending">
<col is="coral-table-column" orderable sortable sortabletype="number">
<col is="coral-table-column" sortable sortabletype="date">
</colgroup>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tfoot is="coral-table-foot">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</tfoot>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Selectable rows</h2>
<div class="markup">
<table is="coral-table" selectable multiple>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Echo</td>
<td is="coral-table-cell">1,331</td>
<td is="coral-table-cell">June 26, 2015</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Foxtrot</td>
<td is="coral-table-cell">41,331</td>
<td is="coral-table-cell">July 12, 2014</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Selectable cells</h2>
<div class="markup">
<table is="coral-table">
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Version A</th>
<th is="coral-table-headercell">Version B</th>
<th is="coral-table-headercell">Version C</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row" selectable>
<td is="coral-table-cell" coral-table-cellselect>
<coral-checkbox></coral-checkbox>
<h3 class="coral-Heading coral-Heading--5">Demo</h3>
</td>
<td is="coral-table-cell" coral-table-cellselect>
<h3 class="coral-Heading coral-Heading--5">Demo</h3>
</td>
<td is="coral-table-cell" coral-table-cellselect>
<h3 class="coral-Heading coral-Heading--5">Demo</h3>
</td>
</tr>
<tr is="coral-table-row" selectable multiple>
<td is="coral-table-cell">
<coral-checkbox coral-table-cellselect>Update</coral-checkbox>
</td>
<td is="coral-table-cell">
<coral-checkbox coral-table-cellselect>Update</coral-checkbox>
</td>
<td is="coral-table-cell">
<coral-checkbox coral-table-cellselect>Update</coral-checkbox>
</td>
</tr>
<tr is="coral-table-row" selectable>
<td is="coral-table-cell">
<coral-checkbox coral-table-cellselect>Publish</coral-checkbox>
</td>
<td is="coral-table-cell">
<coral-checkbox coral-table-cellselect>Publish</coral-checkbox>
</td>
<td is="coral-table-cell">
<coral-checkbox coral-table-cellselect>Publish</coral-checkbox>
</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Orderable columns + orderable rows</h2>
<div class="markup">
<table is="coral-table" orderable>
<colgroup>
<col is="coral-table-column" orderable>
<col is="coral-table-column" orderable>
<col is="coral-table-column" orderable>
</colgroup>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Orderable columns + orderable rows + sticky head</h2>
<div class="markup">
<table is="coral-table" orderable class="table-sticky">
<colgroup>
<col is="coral-table-column" orderable>
<col is="coral-table-column" orderable>
<col is="coral-table-column" orderable>
</colgroup>
<thead is="coral-table-head" sticky>
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Fixed width columns + sticky head + quiet variant</h2>
<div class="markup">
<table is="coral-table" orderable variant="quiet" class="table-sticky">
<colgroup>
<col is="coral-table-column" orderable fixedwidth>
<col is="coral-table-column" orderable sortable sortabledirection="ascending" sortabletype="number">
<col is="coral-table-column" orderable fixedwidth>
</colgroup>
<thead is="coral-table-head" sticky>
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body" divider="cell">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">April</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">June</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Orderable rows with handles</h2>
<div class="markup">
<table is="coral-table" orderable>
<colgroup>
<col is="coral-table-column">
<col is="coral-table-column">
<col is="coral-table-column">
<col is="coral-table-column" fixedwidth>
</colgroup>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body" orderable>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder></button>
</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Lockable rows</h2>
<div class="markup">
<table is="coral-table" lockable>
<colgroup>
<col is="coral-table-column" sortable sortabledirection="ascending">
<col is="coral-table-column">
<col is="coral-table-column">
<col is="coral-table-column" fixedwidth>
</colgroup>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell" sortable>Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
<th is="coral-table-headercell"></th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" icon="lockClosed" variant="quietaction" iconautoarialabel="on" coral-table-rowlock></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" icon="lockClosed" variant="quietaction" iconautoarialabel="on" coral-table-rowlock></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" icon="lockClosed" variant="quietaction" iconautoarialabel="on" coral-table-rowlock></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
<td is="coral-table-cell">
<button is="coral-button" type="button" icon="lockClosed" variant="quietaction" iconautoarialabel="on" coral-table-rowlock></button>
</td>
</tr>
</tbody>
</table>
</div>
<h2 class="coral--Heading--S">Hidden columns example</h2>
<div class="markup">
<div class="hide-control">
<coral-checkbox type="checkbox" target=".hide-activities-col">Toggle activities</coral-checkbox>
<coral-checkbox type="checkbox" target=".hide-numbers-col">Toggle numbers</coral-checkbox>
<coral-checkbox type="checkbox" target=".hide-date-col">Toggle date</coral-checkbox>
</div>
<table is="coral-table">
<colgroup>
<col is="coral-table-column" class="hide-activities-col">
<col is="coral-table-column" class="hide-numbers-col">
<col is="coral-table-column" class="hide-date-col">
</colgroup>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
<th is="coral-table-headercell">Date</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">January 28, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">December 1, 2011</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">February 15, 2012</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">May 16, 2012</td>
</tr>
</tbody>
</table>
<script>
window.addEventListener('load', function() {
document.addEventListener('change', function(event) {
if (event.target.closest('.hide-control')) {
var checkbox = event.target.closest('coral-checkbox');
event.target.closest('.markup').querySelector(checkbox.getAttribute('target')).hidden = checkbox.checked;
}
});
});
</script>
</div>
<h2 class="coral--Heading--S">Additive table</h2>
<div class="markup">
<table is="coral-table">
<colgroup>
<col is="coral-table-column">
<col is="coral-table-column">
<col is="coral-table-column" fixedwidth>
</colgroup>
<thead is="coral-table-head">
<tr is="coral-table-row">
<th is="coral-table-headercell">Activities</th>
<th is="coral-table-headercell">Numbers</th>
</tr>
</thead>
<tbody is="coral-table-body">
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Alpha</td>
<td is="coral-table-cell">23,857</td>
<td is="coral-table-cell">
<button row-remove is="coral-button" type="button" icon="close" iconSize="XS" variant="quietaction" aria-label="Remove" title="Remove"></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Beta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">
<button row-remove is="coral-button" type="button" icon="close" iconSize="XS" variant="quietaction" aria-label="Remove" title="Remove"></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Charlie</td>
<td is="coral-table-cell">3,498</td>
<td is="coral-table-cell">
<button row-remove is="coral-button" type="button" icon="close" iconSize="XS" variant="quietaction" aria-label="Remove" title="Remove"></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell" role="rowheader">Delta</td>
<td is="coral-table-cell">20,398</td>
<td is="coral-table-cell">
<button row-remove is="coral-button" type="button" icon="close" iconSize="XS" variant="quietaction" aria-label="Remove" title="Remove"></button>
</td>
</tr>
<tr is="coral-table-row">
<td is="coral-table-cell">
<input aria-label="input" is="coral-textfield" variant="quiet" type="text" placeholder="Type Activity">
</td>
<td is="coral-table-cell">
<input aria-label="input" is="coral-textfield" variant="quiet" type="text" placeholder="Type Number">
</td>
<td is="coral-table-cell">
<button row-add is="coral-button" type="button" icon="add" iconSize="XS" variant="quietaction" aria-label="Add" title="Add"></button>
</td>
</tr>
</tbody>
</table>
<script>
window.addEventListener('load', function() {
// Additive table example
document.addEventListener('click', function(event) {
if (event.target.closest('[row-remove]')) {
event.target.closest('tr[is="coral-table-row"]').remove();
}
});
document.addEventListener('click', function(event) {
if (event.target.closest('[row-add]')) {
var row = event.target.closest('tr[is="coral-table-row"]');
var rowClone = row.cloneNode(true);
var table = row.closest('table[is="coral-table"]');
// Copy user input to cell content
row.items.getAll().forEach(function(cell) {
var textfield = cell.querySelector('input');
if (textfield) {
cell.content.textContent = textfield.value;
}
cell.classList.remove('u-coral-nopadding');
});
// Change button
var button = row.querySelector('[row-add]');
if (button) {
button.icon = 'close';
button.removeAttribute('row-add');
button.setAttribute('row-remove', '');
}
// Append the clone
Array.prototype.forEach.call(rowClone.querySelectorAll('input'), function(textfield) {
textfield.value = '';
});
table.items.add(rowClone);
}
});
});
</script>
</div>
<h3 class="coral-Heading--S">CSS only</h3>
<div class="markup">
<!-- Deprecated -->
<table class="coral-Table">
<thead class="coral-Table-head">
<tr class="coral-Table-row">
<th class="coral-Table-headerCell">Pet Name</th>
<th class="coral-Table-headerCell">Type</th>
<th class="coral-Table-headerCell">Good/Bad</th>
</tr>
</thead>
<tbody class="coral-Table-body">
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Squeak</td>
<td class="coral-Table-cell">Mouse</td>
<td class="coral-Table-cell">Bad</td>
</tr>
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Spot</td>
<td class="coral-Table-cell">Dog</td>
<td class="coral-Table-cell">Bad</td>
</tr>
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Fluffy</td>
<td class="coral-Table-cell">Velociraptor</td>
<td class="coral-Table-cell">Good</td>
</tr>
</tbody>
</table>
</div>
<h3 class="coral-Heading--S">CSS only with hover state</h3>
<div class="markup">
<!-- Deprecated -->
<table class="coral-Table coral-Table--hover">
<thead class="coral-Table-head">
<tr class="coral-Table-row">
<th class="coral-Table-headerCell">Pet Name</th>
<th class="coral-Table-headerCell">Type</th>
<th class="coral-Table-headerCell">Good/Bad</th>
</tr>
</thead>
<tbody class="coral-Table-body">
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Mongo</td>
<td class="coral-Table-cell">Chihuahua</td>
<td class="coral-Table-cell">Bad</td>
</tr>
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Tiny</td>
<td class="coral-Table-cell">Great Dane</td>
<td class="coral-Table-cell">Bad</td>
</tr>
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Jaws</td>
<td class="coral-Table-cell">Pit Bull</td>
<td class="coral-Table-cell">Good</td>
</tr>
</tbody>
</table>
</div>
<h3 class="coral-Heading--S">CSS only with borders</h3>
<div class="markup">
<!-- Deprecated -->
<table class="coral-Table coral-Table--bordered">
<thead class="coral-Table-head">
<tr class="coral-Table-row">
<th class="coral-Table-headerCell">Pet Name</th>
<th class="coral-Table-headerCell">Type</th>
<th class="coral-Table-headerCell">Good/Bad</th>
</tr>
</thead>
<tbody class="coral-Table-body">
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Hopper</td>
<td class="coral-Table-cell">Frog</td>
<td class="coral-Table-cell">Good</td>
</tr>
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Pokey</td>
<td class="coral-Table-cell">Porcupine</td>
<td class="coral-Table-cell">Good</td>
</tr>
<tr class="coral-Table-row">
<td class="coral-Table-cell" role="rowheader">Mr. Snuggles</td>
<td class="coral-Table-cell">Snake</td>
<td class="coral-Table-cell">Bad</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>