Fork me on GitHub

Tables with hidden columns

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.

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
});

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:

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
});

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