uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
330 lines (309 loc) • 17.6 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" aria-label="Size switcher">
<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>
<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>
<tfoot>
<tr>
<td>Table Footer</td>
<td>Table Footer</td>
<td>Table Footer</td>
<td>Table Footer</td>
</tr>
</tfoot>
</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" aria-label="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" aria-label="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" aria-label="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" aria-label="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" aria-label="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" aria-label="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" aria-label="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" aria-label="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>
const {$$, addClass, on, removeClass } = UIkit.util;
on('#js-size-switcher', 'change', (e) => {
const options = $$('option', e.target).map(({value}) => value);
for (const el of $$('.uk-table')) {
removeClass(el, options);
addClass(el, e.target.value);
}
});
</script>
</body>
</html>