A demo showing how to hide a column completely, so it does not show in the table or the row detail.

Notice the column below named ID. When the FooTable is initialized, that column will be hidden. Even when resizing the table to smaller sizes, the detail for the column will not be shown.

Initialize the FooTable!

ID First Name Job Title DOB Status
1 Isidra Traffic Court Referee 22 Jun 1972 Active
2 Shona Airline Transport Pilot 3 Oct 1981 Disabled
3 Granville Business Services Sales Representative 19 Apr 1969 Suspended
4 Easer Drywall Stripper 13 Dec 1977 Active
5 Maple Aviation Tactical Readiness Officer 30 Dec 1991 Suspended
6 Maxine Business Services Sales Representative 17 Oct 1987 Disabled
7 Lorraine Hemodialysis Technician 11 Nov 1983 Disabled
8 Lizzee Technical Services Librarian 1 Nov 1961 Suspended
9 Judi Electrical Lineworker 23 Jun 1981 Active
10 Lauri Blackjack Supervisor 15 Nov 1985 Suspended

Setting Up Hidden Columns

All you need to do is add a few data attributes for the column:

data-hide="all" - this makes sure the column is hidden at all breakpoints

data-ignore="true" - this makes sure the column is left out the of detail row

This can be seen for the Job Title column in the example below:

<table class="footable table">
	<thead>
		<tr>
			<th data-ignore="true" data-hide="all">ID</th>
			<th data-toggle="true">Name</th>
			<th data-hide="phone,tablet">Status</th>
		</tr>
	</thead>