Hiding Columns - FooTable - GitHub Pages

Toggle navigation FooTable

• Getting started
• Components
  • Editing
  • Filtering
  • Paging
  • Sorting
  • State

• JSDocs
• GitHub

Hiding Columns

How to completely hide a column from view.

Notes

• In the below examples the first row is expanded by default using the expandFirst option to better illustrate how setting a columns visible option to false will hide it from both the normal and details rows.
• In the below examples the "Date of Birth" column is always hidden using the all breakpoint. This is done so the details of the first row are always displayed regardless of the screen size so you can see the ID column is not visible.

To hide a column entirely from view, meaning it will not be displayed in either the normal or details row, simply use the visible column option and set it to false.

This example shows a table where the first column ID is completely hidden from view using the data-visible column attribute.

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" data-expand-first="true"> <thead> <tr> <th data-visible="false">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> <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 where the first column ID is completely hidden from view using the visible column option.

jQuery(function($){ $('.table').footable({ "expandFirst": true, "columns": [ { "name": "id", "visible": false }, { "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": "Date of Birth", "breakpoints": "all" } ], "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>