---
title: Datatables
page-header: Datatables
page-libs: [lists]
menu: base.datatables
---

{% assign id = include.map-id | default: 'default' %}
<div class="card">
	<div class="card-body">
		{% assign products = 'Tabler,Tabler Icons,Tabler Emails,Tabler Components,Tabler Illustrations,Bootstrap' | split: ',' %}
		{% assign techs = 'brand-apple,brand-windows,brand-debian,brand-android' | split: ',' %}
		<div id="table-{{ id }}" class="table-responsive">
		<table class="table">
			<thead>
			<tr>
				<th><button class="table-sort" data-sort="sort-name">Name</button></th>
				<th><button class="table-sort" data-sort="sort-city">City</button></th>
				<th><button class="table-sort" data-sort="sort-type">Type</button></th>
				<th><button class="table-sort" data-sort="sort-score">Score</button></th>
				<th><button class="table-sort" data-sort="sort-date">Date</button></th>
				<th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
				<th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
			</tr>
			</thead>
			<tbody class="table-tbody">
			{% for rc in rollercoasters %}
			{% assign progress = forloop.index | random_number %}
			<tr>
				<td class="sort-name">{{ rc.name }}</td>
				<td class="sort-city">{{ rc.city }}</td>
				<td class="sort-type">{{ rc.type }}</td>
				<td class="sort-score">{{ rc.score }}</td>
				<td class="sort-date" data-date="{{ forloop.index | random_date: site.random-date-from, site.random-date-to | date: '%s' }}">{{ forloop.index | random_date: site.random-date-from, site.random-date-to | date: '%B %d, %Y' }}</td>
				<td class="sort-quantity">{{ forloop.index | random_number: 1, 200 }}</td>
				<td class="sort-progress" data-progress="{{ progress }}">
					<div class="row align-items-center">
						<div class="col-12 col-lg-auto">{{ progress }}%</div>
						<div class="col">{% include "ui/progress.html" value=progress width="5rem" %}</div>
					</div>
				</td>
			</tr>
			{% endfor %}
			</tbody>
		</table>
		</div>
	</div>
</div>

{% comment %}
{% capture_global scripts %}
<script>
{% if env == 'development' %}window.tabler_list = window.tabler_list || {};{% endif %}

	document.addEventListener("DOMContentLoaded", function() {
	const list = {% if env == 'development' %}window.tabler_list["table-{{ id }}"] = {% endif %}new List('table-{{ id }}', {
		sortClass: 'table-sort',
		listClass: 'table-tbody',
		valueNames: [ 'sort-name', 'sort-type', 'sort-city', 'sort-score',
			{ attr: 'data-date', name: 'sort-date' },
			{ attr: 'data-progress', name: 'sort-progress' },
			'sort-quantity'
		]
	});
})
</script>
{% endcapture_global %}
{% endcomment %}