expandFirst option to better
illustrate how disabling the row toggle has no effect on the actual functionality and that details are still created for hidden columns.
"Date of Birth" column is always hidden using the all breakpoint.
This is done so the toggle is always displayed regardless of the screen size unless it is disabled.
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.
| 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-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.
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>
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".
| 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-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".
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>