Tables with hidden columns

Responsive column visibility

This is a responsive bootstrap 3 table that will hide the "ISO" columns on small screens. Go ahead and resize the browser window. floatThead will detect that some columns were hidden on resize and rock on.

But what If you need to hide a column without a window resize? In that case you need to tell floatThead to reflow itself by calling .floatThead("reflow") or triggering an event named reflow on the table.

Hiding a column after plugin init

Another issue you may encounter when trying to hide a column is that when the header is floated you will not be able to select the header cells if you run the obvious column selector: $table.find("tr>:nth-child(1)") because the thead is not within your table.
You have two floatThead methods at your disposal to remedy the situation:

$table.floatThead("getFloatContainer") which will return the div within which the floating table, and your thead may reside. The caveat is that at certain times your thead may be "unfloated" back into your table.

$table.floatThead("getRowGroups") which will return the thead, tbody and tfoot (if present) from the original table, regardless of where they are located now. Keep in mind that this method does not return a table. Here is an example that removes a random column

var $table = $('table');
var $hideRandom = $("#hideRandomColumn");

$table.floatThead();

$hideRandom.on("click", function(e){
    e.preventDefault();
    var randomColumn = ~~(Math.random() * $table.find("tbody tr:first td:visible").length)+1;
    $table.floatThead("getRowGroups").find("tr>:visible:nth-child("+randomColumn+")").remove();
    $table.floatThead("reflow"); //make floatThead notice the missing column
});

Another way to hide columns

You may also consider selecting that column before running the floatThead plugin on the table. This will give you a reference to the cells that will not change after the plugin runs. Here is an example:

ShowHide 'Country name' Column

var $table = $('table');
var $toggleCountry = $("#toggleCountry");
var $countyNameColumn = $table.find("tr>:first-child"); //select before floating the headers!

$table.floatThead();

$toggleCountry.on("click", function(e){
    e.preventDefault();
    $countyNameColumn[$countyNameColumn.hasClass("hide") ? "removeClass" : "addClass"]("hide");
    $table.floatThead("reflow"); //make floatThead notice the missing column
});

Auto-reflow with a mutation observer

The following option only works in browsers that support the MutationObserver API.
Set autoReflow to true, and the plugin will automatically reflow itself when the table's internal dom structure changes.

$('table').floatThead({autoReflow:true});

Country name	ISO#	ISO2	ISO3	FIPS	Warnings	Travel advice	Notes	Capital cities	Currencies	Economy	Population
Afghanistan	4	AF	AFG	AF	Yes	Yes	No	N/A	AFN		30,551,674
Albania	8	AL	ALB	AL	None	Yes	No	N/A	ALL		3,173,271
Algeria	12	DZ	DZA	AG	Yes	Yes	No	N/A	DZD		39,208,194
American Samoa	16	AS	ASM	AQ	None	No	No	N/A	USD		55,165
Andorra	20	AD	AND	AN	None	Yes	No	N/A	EUR		79,218
Angola	24	AO	AGO	AO	Yes	Yes	No	N/A	AOA		21,471,618
Anguilla	660	AI	AIA	AV	None	No	No	N/A	XCD	N/A	14,300
Antarctica	10	AQ	ATA	AY	None	No	No	N/A	N/A	N/A	N/A
Antigua and Barbuda	28	AG	ATG	AC	Yes	Yes	No	N/A	XCD		89,985
Argentina	32	AR	ARG	AR	None	Yes	Yes	N/A	ARS		41,446,246
Armenia	51	AM	ARM	AM	None	Yes	No	N/A	AMD		2,976,566
Aruba	533	AW	ABW	AA	None	No	No	N/A	AWG		102,911
Australia	36	AU	AUS	AS	None	Yes	No	N/A	AUD		23,342,553
Austria	40	AT	AUT	AU	None	Yes	No	N/A	EUR		8,495,145
Azerbaijan	31	AZ	AZE	AJ	Yes	Yes	No	N/A	AZN		9,413,420
Bahamas	44	BS	BHS	BF	None	Yes	No	N/A	BSD		377,374
Bahrain	48	BH	BHR	BA	Yes	Yes	No	N/A	BHD		1,332,171
Bangladesh	50	BD	BGD	BG	Yes	Yes	No	N/A	BDT		156,594,962
Barbados	52	BB	BRB	BB	Yes	Yes	No	N/A	BBD		284,644
Belarus	112	BY	BLR	BO	Yes	Yes	No	N/A	BYR		9,356,678
Belgium	56	BE	BEL	BE	None	Yes	No	N/A	EUR		11,104,476
Belize	84	BZ	BLZ	BH	Yes	Yes	No	N/A	BZD		331,900
Benin	204	BJ	BEN	BN	Yes	Yes	No	N/A	XOF		10,323,474
Bermuda	60	BM	BMU	BD	None	No	No	N/A	BMD		65,341
Bhutan	64	BT	BTN	BT	Yes	Yes	No	N/A	BTN INR		753,947
Bolivia	68	BO	BOL	BL	None	Yes	No	N/A	BOB BOV		10,671,200
Bosnia and Herzegovina	70	BA	BIH	BK	None	Yes	No	N/A	BAM		3,829,307
Botswana	72	BW	BWA	BC	Yes	Yes	No	N/A	BWP		2,021,144
Bouvet Island	74	BV	BVT	BV	None	No	No	N/A	NOK	N/A	N/A
Brazil	76	BR	BRA	BR	Yes	Yes	No	N/A	BRL		200,361,925
British Indian Ocean Territory	86	IO	IOT	IO	None	No	No	N/A	USD	N/A	N/A
British Virgin Islands	92	VG	VGB	VI	None	No	No	N/A	USD	N/A	28,341
Brunei	96	BN	BRN	BX	Yes	Yes	No	N/A	BND		417,784
Bulgaria	100	BG	BGR	BU	None	Yes	No	N/A	BGN		7,222,943
Burkina	854	BF	BFA		None	Yes	No	N/A	XOF		16,934,839
Burma	104	MM	MMR	BM	Yes	Yes	No	N/A	MMK		53,259,018
Burundi	108	BI	BDI	BY	Yes	Yes	No	N/A	BIF		10,162,532
Cambodia	116	KH	KHM	CB	None	Yes	No	N/A	KHR		15,135,169
Cameroon	120	CM	CMR	CM	Yes	Yes	No	N/A	XAF		22,253,959
Canada	124	CA	CAN	CA	None	Yes	No	N/A	CAD		35,181,704
Cape Verde	132	CV	CPV	CV	None	Yes	No	N/A	CVE		498,897
Cayman Islands	136	KY	CYM	CJ	None	No	No	N/A	KYD		58,435
Central African Republic	140	CF	CAF	CT	Yes	Yes	No	N/A	XAF		4,616,417
Chad	148	TD	TCD	CD	Yes	Yes	No	N/A	XAF		12,825,314
Chile	152	CL	CHL	CI	None	Yes	No	N/A	CLF CLP		17,619,708
China	156	CN	CHN	CH	Yes	Yes	No	N/A	CNY		1,385,566,537
Christmas Island	162	CX	CXR	KT	None	No	No	N/A	AUD	N/A	N/A
Cocos (Keeling) Islands	166	CC	CCK		None	No	No	N/A	AUD	N/A	N/A
Colombia	170	CO	COL	CO	Yes	Yes	No	N/A	COP COU		48,321,405
Comoros	174	KM	COM	CN	Yes	Yes	No	N/A	KMF		734,917
Congo	178	CG	COG	CF	None	Yes	Yes	N/A	XAF		4,447,632
Congo (Democratic Republic)	180	CD	COD		None	Yes	Yes	N/A	CDF		67,513,677
Cook Islands	184	CK	COK	CW	None	No	No	N/A	NZD	N/A	20,629
Costa Rica	188	CR	CRI	CS	None	Yes	No	N/A	CRC		4,872,166
Croatia	191	HR	HRV	HR	None	Yes	No	N/A	HRK		4,289,714
Cuba	192	CU	CUB	CU	Yes	Yes	No	N/A	CUC CUP		11,265,629
Curaçao	531	CW	CUW		None	No	No	N/A	ANG		158,760
Cyprus	196	CY	CYP	CY	None	Yes	No	N/A	EUR		1,141,166
Czech Republic	203	CZ	CZE	EZ	None	Yes	No	N/A	CZK		10,702,197
Denmark	208	DK	DNK	DA	None	Yes	No	N/A	DKK		5,619,096
Djibouti	262	DJ	DJI	DJ	Yes	Yes	No	N/A	DJF		872,932
Dominica	212	DM	DMA	DO	Yes	Yes	Yes	N/A	XCD		72,003
Dominican Republic	214	DO	DOM	DR	None	Yes	Yes	N/A	DOP		10,403,761
East Timor	626	TL	TLS		None	Yes	No	N/A	USD		1,132,879

Table and data borrowed from http://api.tinata.co.uk/countries