Single Headers

How to create tables that have a single header row.

Simply make sure your table contains a thead element and supply the column option attributes on the last tr elements cells. As per all static tables the rows are parsed directly from the tables tr elements using the current columns and individual cell options.

Notes

  • No data-title attributes are supplied except for the "Date of Birth" column, the rest are parsed from the cells text values.
  • No columns supply a data-name attribute so a parsed row objects properties would be named "col1", "col2", etc.
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">
	<thead>
		<tr>
			<th data-breakpoints="xs">ID</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th data-breakpoints="xs">Job Title</th>
			<th data-breakpoints="xs sm">Started On</th>
			<th data-breakpoints="xs sm md" data-title="DOB">Date of Birth</th>
		</tr>
	</thead>
	<tbody>
		<tr data-expanded="true">
			<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>

By default the showHeader options is set to true so you only need to supply the columns and rows options so the plugin can generate the table correctly.

Notes

  • In the below example row options are supplied with the first row to specify that it should be expanded by default if any columns are hidden.
  • All columns are supplied a name and title so the plugin can correctly parse the supplied rows and generate the header row. 
jQuery(function($){
	$('.table').footable({
		"columns": [
			{ "name": "id", "title": "ID", "breakpoints": "xs" },
			{ "name": "firstName", "title": "First Name" },
			{ "name": "lastName", "title": "Last Name" },
			{ "name": "jobTitle", "title": "Job Title", "breakpoints": "xs" },
			{ "name": "started", "title": "Started On", "breakpoints": "xs sm" },
			{ "name": "dob", "title": "DOB", "breakpoints": "xs sm md" }
		],
		"rows": [
			{
				"options": {
					"expanded": true
				},
				"value": { "id": 1, "firstName": "Dennise", "lastName": "Fuhrman", "jobTitle": "High School History Teacher", "started": "November 8th 2011", "dob": "July 25th 1960" }
			},
			{ "id": 2, "firstName": "Elodia", "lastName": "Weisz", "jobTitle": "Wallpaperer Helper", "started": "October 15th 2010", "dob": "March 30th 1982" },
			{ "id": 3, "firstName": "Raeann", "lastName": "Haner", "jobTitle": "Internal Medicine Nurse Practitioner", "started": "November 28th 2013", "dob": "February 26th 1966" },
			{ "id": 4, "firstName": "Junie", "lastName": "Landa", "jobTitle": "Offbearer", "started": "October 31st 2010", "dob": "March 29th 1966" },
			{ "id": 5, "firstName": "Solomon", "lastName": "Bittinger", "jobTitle": "Roller Skater", "started": "December 29th 2011", "dob": "September 22nd 1964" },
			{ "id": 6, "firstName": "Bar", "lastName": "Lewis", "jobTitle": "Clown", "started": "November 12th 2012", "dob": "August 4th 1991" },
			{ "id": 7, "firstName": "Usha", "lastName": "Leak", "jobTitle": "Ships Electronic Warfare Officer", "started": "August 14th 2012", "dob": "November 20th 1979" },
			{ "id": 8, "firstName": "Lorriane", "lastName": "Cooke", "jobTitle": "Technical Services Librarian", "started": "September 21st 2010", "dob": "April 7th 1969" }
		]
	});
});
<table class="table"></table>