No Headers

How to create tables that have no header row.

Note

Certain components such as sorting require a header row to be functional. To continue to use sorting as an example, without a header row there is no UI to click to initiate the sort operation.

Simply make sure the first tr in your table contains only td cells and supply the column option attributes on them. If a header row is still being displayed you can explicitly set the showHeader option to false to ensure it is hidden. As per all static tables the rows are parsed directly from the tables tr elements using the current columns and individual cell options.

Notes

  • The second and third columns do not need a data-title attribute as they are never hidden and displayed in a detail row. All columns that could be displayed in a detail row should provide a title otherwise a simple one such as "Column 1", "Column 2", etc. is generated and displayed.
  • None of the columns supply a data-name attribute so a parsed row objects properties would be named "col1", "col2", etc.
1DenniseFuhrmanHigh School History TeacherNovember 8th 2011July 25th 1960
2ElodiaWeiszWallpaperer HelperOctober 15th 2010March 30th 1982
3RaeannHanerInternal Medicine Nurse PractitionerNovember 28th 2013February 26th 1966
4JunieLandaOffbearerOctober 31st 2010March 29th 1966
5SolomonBittingerRoller SkaterDecember 29th 2011September 22nd 1964
6BarLewisClownNovember 12th 2012August 4th 1991
7UshaLeakShips Electronic Warfare OfficerAugust 14th 2012November 20th 1979
8LorrianeCookeTechnical Services LibrarianSeptember 21st 2010April 7th 1969
jQuery(function($){
	$('.table').footable();
});
<table class="table">
	<tr>
		<td data-title="ID" data-breakpoints="xs">1</td>
		<td>Dennise</td>
		<td>Fuhrman</td>
		<td data-title="Job Title" data-breakpoints="xs">High School History Teacher</td>
		<td data-title="Started On" data-breakpoints="xs sm">November 8th 2011</td>
		<td data-title="Date of Birth" data-breakpoints="xs sm md">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>
</table>

You must set the showHeader option to false, by default this is true and one would be generated and displayed in the table. You must also supply the columns and rows options or else the plugin will not be able to generate the table correctly.

Notes

  • The second and third columns do not need a title value as they are never hidden and displayed in a detail row. All columns that could be displayed in a detail row should provide a title otherwise a simple one such as "Column 1", "Column 2", etc. is generated and displayed.
  • 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.
1DenniseFuhrmanHigh School History TeacherNovember 8th 2011July 25th 1960
2ElodiaWeiszWallpaperer HelperOctober 15th 2010March 30th 1982
3RaeannHanerInternal Medicine Nurse PractitionerNovember 28th 2013February 26th 1966
4JunieLandaOffbearerOctober 31st 2010March 29th 1966
5SolomonBittingerRoller SkaterDecember 29th 2011September 22nd 1964
6BarLewisClownNovember 12th 2012August 4th 1991
7UshaLeakShips Electronic Warfare OfficerAugust 14th 2012November 20th 1979
8LorrianeCookeTechnical Services LibrarianSeptember 21st 2010April 7th 1969
jQuery(function($){
	$('.table').footable({
		"showHeader": false,
		"columns": [
			{ "name": "id", "title": "ID", "breakpoints": "xs" },
			{ "name": "firstName" },
			{ "name": "lastName" },
			{ "name": "jobTitle", "title": "Job Title", "breakpoints": "xs" },
			{ "name": "started", "title": "Started On", "breakpoints": "xs sm" },
			{ "name": "dob", "title": "Date of Birth", "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>