gistfile1.txt

<template name="sortableTableHeaderIcons">
	<i class="icon-caret-down sortIcon desc pull-right"></i><i class="icon-caret-up sortIcon asc pull-right"></i>
</template>

<template name="xxx">
		<table class="table table-striped table-bordered table-hover">
			<thead>
				{{#constant}}
				<tr>
					<th class="sortableTableHeader" data-field="name">
						{{>sortableTableHeaderIcons}}
						Name
					</th>
					<th class="sortableTableHeader" data-field="status">
						{{>sortableTableHeaderIcons}}
						Status
					</th>
					<th class="sortableTableHeader" data-field="created">
						{{>sortableTableHeaderIcons}}
						Created
					</th>
					
				</tr>
				{{/constant}}
			</thead>
			<tbody>
				{{#each items}}
					..print row...
				{{/each}}
			</tbody>
		</table>
</template>


Template.xxx.helpers({
	items: function () {
		return Users.find(query,{
			sort:Session.get('itemsSort')
		});
	}
});


Template.xxx.events({
	'click .sortableTableHeader': function(event, template){
		var header = $(event.currentTarget);
		var field = header.data('field');
		var direction = 1;
		if(header.hasClass('sorted')){
			if(header.hasClass('asc'))
				direction = -1;
			header.toggleClass('asc').toggleClass('desc');
		}else{
			$(".sortableTableHeader.sorted").removeClass('sorted').removeClass('asc').removeClass('desc');
			header.addClass("sorted").addClass("asc");
		}
		switch(field){
			case "name":
				Session.set('itemsSort', {'profile.nameLower':direction});
				break;
			case "created":
				Session.set('itemsSort', {'createdAt':direction, 'profile.nameLower':1});
				break;
			case "status":
				Session.set('itemsSort', {'status':direction, 'profile.nameLower':1});
				break;
		}
	}
	
	
	//some less styling
	.sortableTableHeader{
	cursor: pointer;
	white-space: nowrap;
	&:not(.sorted){
		.sortIcon{
			display:none;
		}
	}
	&.sorted{
		background-color: @lightColoredBackground;
		&.asc{
			.sortIcon.desc{
				display:none;
			}
		}
		&.desc{
			.sortIcon.asc{
				display:none;
			}
		}
	}
}