tabler/_includes/cards/table-sorted.html

<div class="card">
	<div class="card-header">
		<h3 class="card-title">Sorted Table</h3>
	</div>
	<table id="js-table-sorted" class="table table-responsive table-striped table-vcenter card-table">
		<thead>
		<tr>
			<th style="width: 1%">&nbsp;</th>
			<th>Name</th>
			<th>Email</th>
			<th>Phone</th>
			<th style="width: 1%">Actions</th>
		</tr>
		</thead>
		<tbody>

		{% for user in site.data.users limit: 8 offset: 10 %}
		<tr>
			<td class="text-center">
				<span class="avatar avatar-md d-block" style="background-image: url({{ user.photo }})"></span>
			</td>
			<td class="font-weight-bold">{{ user.name }} {{ user.surname }}</td>
			<td>{{ user.email }}</td>
			<td>
				{{ user.phone }}
			</td>
			<td class="text-center">
				<div class="btn-group">
					<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Edit">
						<i class="fa fa-pencil"></i>
					</button>
					<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Delete">
						<i class="fa fa-times"></i>
					</button>
				</div>
			</td>
		</tr>
		{% endfor %}
		</tbody>
	</table>
</div>

{% contentfor scripts %}
requirejs(['tablesorter'], function() {
	$('#js-table-sorted').tablesorter({
		cssHeader: 'table-header',
		cssAsc: 'table-header-asc',
		cssDesc: 'table-header-desc',
		headers: {
			0: { sorter: false },
			4: { sorter: false },
		}
	});
});
{% endcontentfor %}