tabler-ui/src/_includes/cards/table-sorted.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<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>

<script>
requirejs(['tablesorter', 'jquery'], function(tablesorter, $) {
	$(document).ready(function(){
		$('#js-table-sorted').tablesorter({
			cssHeader: 'table-header',
			cssAsc: 'table-header-asc',
			cssDesc: 'table-header-desc',
			headers: {
				0: { sorter: false },
				4: { sorter: false }
			}
		});
	});
});
</script>