Row Toggle

How to disable the row toggle or change its position.

Notes

Disable the toggle

To hide the row toggle entirely simply use the showToggle option and set its value to false.

This example shows a table with the data-show-toggle attribute applied and set to false.

IDFirst NameLast NameJob TitleStarted OnDOB
1DenniseFuhrmanHigh School History TeacherNovember 8th 2011
DOBJuly 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" data-show-toggle="false">
	<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="all" 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>

This example shows a table with the showToggle option set to false.

IDFirst NameLast NameJob TitleStarted OnDOB
1DenniseFuhrmanHigh School History TeacherNovember 8th 2011
DOBJuly 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({
		"showToggle": false
		"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>

Position the toggle

To change where the toggle is positioned you can use the toggleColumn option. This option currently only supports two values; "first" and "last" where "first" will append the toggle to the first visible column in the table while "last" will append it to the last visible column.

This example shows a table with the data-toggle-column attribute applied and set to "last".

IDFirst NameLast NameJob TitleStarted OnDOB
1DenniseFuhrmanHigh School History TeacherNovember 8th 2011
DOBJuly 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" data-toggle-column="last">
	<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="all" 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>

This example shows a table with the toggleColumn option set to "last".

IDFirst NameLast NameJob TitleStarted OnDOB
1DenniseFuhrmanHigh School History TeacherNovember 8th 2011
DOBJuly 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({
		"toggleColumn": "last"
		"expandFirst": true,
		"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": [
			{ "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>