uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
330 lines (309 loc) • 17.5 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Table</h1>
<div class="uk-margin">
<select id="js-size-switcher" class="uk-select uk-form-width-small">
<option value="">Default</option>
<option value="uk-table-small">Small</option>
<option value="uk-table-large">Large</option>
</select>
<button class="uk-button uk-button-default" type="button" uk-toggle="target: .uk-table; cls: uk-table-justify">Justify</button>
</div>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-hover">
<caption>Table caption</caption>
<thead>
<tr>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Footer</td>
<td>Table Footer</td>
<td>Table Footer</td>
<td>Table Footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
<td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
<td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr class="uk-active">
<td>Active Row</td>
<td>Active Row</td>
<td>Active Row</td>
<td>Active Row</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>Table Sub Heading</th>
<th>Table Sub Heading</th>
<th>Table Sub Heading</th>
<th>Table Sub Heading</th>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
</table>
</div>
<h2>Table Divider</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-divider uk-table-hover">
<thead>
<tr>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
<td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
<td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr class="uk-active">
<td>Active Row</td>
<td>Active Row</td>
<td>Active Row</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>Table Sub Heading</th>
<th>Table Sub Heading</th>
<th>Table Sub Heading</th>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
</table>
</div>
<h2>Table Striped</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped uk-table-hover ">
<thead>
<tr>
<th>Table Heading</th>
<th>Table Heading</th>
<th>Table Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
<td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
<td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr class="uk-active">
<td>Active Row</td>
<td>Active Row</td>
<td>Active Row</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>Table Sub Heading</th>
<th>Table Sub Heading</th>
<th>Table Sub Heading</th>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
</table>
</div>
<h2>Widths</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-divider uk-table-hover">
<thead>
<tr>
<th class="uk-table-shrink"></th>
<th class="uk-table-shrink"></th>
<th class="uk-table-expand">Expand</th>
<th class="uk-width-small">Truncate</th>
<th class="uk-width-medium">Width Medium</th>
<th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="uk-checkbox" type="checkbox"></td>
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
<td class="uk-table-link">
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</td>
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
</tr>
<tr>
<td><input class="uk-checkbox" type="checkbox"></td>
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
<td class="uk-table-link">
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</td>
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
</tr>
<tr>
<td><input class="uk-checkbox" type="checkbox"></td>
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
<td class="uk-table-link">
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</td>
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
</tr>
<tr>
<td><input class="uk-checkbox" type="checkbox"></td>
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
<td class="uk-table-link">
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</td>
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
</tr>
</tbody>
</table>
</div>
<h2>Responsive</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-divider uk-table-hover uk-table-responsive">
<thead>
<tr>
<th class="uk-table-shrink"></th>
<th class="uk-table-shrink"></th>
<th class="uk-table-expand">Expand</th>
<th class="uk-width-small">Truncate</th>
<th class="uk-width-medium">Width Medium</th>
<th class="uk-table-shrink uk-text-nowrap">Shrink + Nowrap</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="uk-checkbox" type="checkbox"></td>
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
<td class="uk-table-link">
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</td>
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
</tr>
<tr>
<td><input class="uk-checkbox" type="checkbox"></td>
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
<td class="uk-table-link">
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</td>
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
</tr>
<tr>
<td><input class="uk-checkbox" type="checkbox"></td>
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
<td class="uk-table-link">
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</td>
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
</tr>
<tr>
<td><input class="uk-checkbox" type="checkbox"></td>
<td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
<td class="uk-table-link">
<a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</td>
<td class="uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td class="uk-text-nowrap">Lorem ipsum dolor</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
UIkit.util.on('#js-size-switcher', 'change', function () {
var value = this.value;
UIkit.util.$$('.uk-table').forEach(function (table) {
UIkit.util.removeClass(table, options);
UIkit.util.addClass(table, value);
});
});
</script>
</body>
</html>