Sorting columns

Notes

As this example does not make use of the paging component only a limited number of rows are displayed. To see an example containing thousands of rows that uses the sorting component please take a look at the showcase example.
Sorting requires a header row to be able to function correctly, without one there is no UI to click to initiate the sort operation.
The sorting component relies on a columns type option being correctly set.

To enable sorting on a table the only option that must be set is the enabled option with a value of true, all other options for the component will fall back to there defaults if not supplied. See the sorting component documentation for a list of all available options.

ID	First Name	Last Name	Job Title	Started On	Date of Birth
1	Dennise	Fuhrman	High School History Teacher	November 8th 2011	July 25th 1960
2	Elodia	Weisz	Wallpaperer Helper	October 15th 2010	March 30th 1982
3	Raeann	Haner	Internal Medicine Nurse Practitioner	November 28th 2013	February 26th 1966
4	Junie	Landa	Offbearer	October 31st 2010	March 29th 1966
5	Solomon	Bittinger	Roller Skater	December 29th 2011	September 22nd 1964
6	Bar	Lewis	Clown	November 12th 2012	August 4th 1991
7	Usha	Leak	Ships Electronic Warfare Officer	August 14th 2012	November 20th 1979
8	Lorriane	Cooke	Technical Services Librarian	September 21st 2010	April 7th 1969

jQuery(function($){
	$('.table').footable();
});

<table class="table" data-sorting="true">
	<thead>
		<tr>
			<th data-breakpoints="xs" data-type="number">ID</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th data-breakpoints="xs">Job Title</th>
			<th data-breakpoints="xs sm" data-type="date" data-format-string="MMMM Do YYYY">Started On</th>
			<th data-breakpoints="xs sm md" data-type="date" data-format-string="MMMM Do YYYY">Date of Birth</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Dennise</td>
			<td>Fuhrman</td>
			<td>High School History Teacher</td>
			<td>November 8th 2011</td>
			<td>July 25th 1960</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Elodia</td>
			<td>Weisz</td>
			<td>Wallpaperer Helper</td>
			<td>October 15th 2010</td>
			<td>March 30th 1982</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Raeann</td>
			<td>Haner</td>
			<td>Internal Medicine Nurse Practitioner</td>
			<td>November 28th 2013</td>
			<td>February 26th 1966</td>
		</tr>
		<tr>
			<td>4</td>
			<td>Junie</td>
			<td>Landa</td>
			<td>Offbearer</td>
			<td>October 31st 2010</td>
			<td>March 29th 1966</td>
		</tr>
		<tr>
			<td>5</td>
			<td>Solomon</td>
			<td>Bittinger</td>
			<td>Roller Skater</td>
			<td>December 29th 2011</td>
			<td>September 22nd 1964</td>
		</tr>
		<tr>
			<td>6</td>
			<td>Bar</td>
			<td>Lewis</td>
			<td>Clown</td>
			<td>November 12th 2012</td>
			<td>August 4th 1991</td>
		</tr>
		<tr>
			<td>7</td>
			<td>Usha</td>
			<td>Leak</td>
			<td>Ships Electronic Warfare Officer</td>
			<td>August 14th 2012</td>
			<td>November 20th 1979</td>
		</tr>
		<tr>
			<td>8</td>
			<td>Lorriane</td>
			<td>Cooke</td>
			<td>Technical Services Librarian</td>
			<td>September 21st 2010</td>
			<td>April 7th 1969</td>
		</tr>
	</tbody>
</table>

Note

Columns with HTML or Date data can make use of the data-sort-value attribute on a cell to supply a different value to use when sorting.

How to create a table that uses the sorting component.

Notes

Note