Tabulator: How to get a column of a column group? - tabulator

Question

If you take a look at the first example at http://tabulator.info/examples/4.4#column-groups, how do I get a reference to the column "Personal Info", so I can toggle/show/hide it?
I tried it with var col = table.getColumn("Personal Info") but that did not work (as expected).
I would prefer a vanilla JS solution which uses the built-in tabulator API. But jQuery is also ok as an alternative.
Here is a jsfiddle https://jsfiddle.net/jmartsch/g7xewtf6/17/
I found out, that I can use console.log(table.getColumn('gender').getParentColumn());
This does work, but it is not very elegant. It would be nice to have a solution that directly selects the column group header.

Answer 1

const tabledatasimple=[{id:1,name:"Oli Bob",location:"United Kingdom",gender:"male",rating:1,col:"red",dob:"14/04/1984"},{id:2,name:"Mary May",location:"Germany",gender:"female",rating:2,col:"blue",dob:"14/05/1982"},{id:3,name:"Christine Lobowski",location:"France",gender:"female",rating:0,col:"green",dob:"22/05/1982"},{id:4,name:"Brendon Philips",location:"USA",gender:"male",rating:1,col:"orange",dob:"01/08/1980"},{id:5,name:"Margret Marmajuke",location:"Canada",gender:"female",rating:5,col:"yellow",dob:"31/01/1999"},{id:6,name:"Frank Harbours",location:"Russia",gender:"male",rating:4,col:"red",dob:"12/05/1966"},{id:7,name:"Jamie Newhart",location:"India",gender:"male",rating:3,col:"green",dob:"14/05/1985"},{id:8,name:"Gemma Jane",location:"China",gender:"female",rating:0,col:"red",dob:"22/05/1982"},{id:9,name:"Emily Sykes",location:"South Korea",gender:"female",rating:1,col:"maroon",dob:"11/11/1970"},{id:10,name:"James Newman",location:"Japan",gender:"male",rating:5,col:"red",dob:"22/03/1998"}];
const table = new Tabulator("#example-table", {
height: "311px",
data: tabledatasimple,
columnVertAlign: "bottom", //align header contents to bottom of cell
columns: [{
title: "Name",
field: "name",
width: 160
},
{ //create column group
title: "Work Info",
columns: [{
title: "Progress",
field: "progress",
align: "right",
sorter: "number",
width: 100
},
{
title: "Rating",
field: "rating",
align: "center",
width: 80
},
{
title: "Driver",
field: "car",
align: "center",
width: 80
},
],
},
{ //create column group
title: "Personal Info",
field: "pInfo",
columns: [{
title: "Gender",
field: "gender",
width: 90
},
{
title: "Favourite Color",
field: "col",
width: 140
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date",
width: 130
},
],
},
],
});
const columns = table.getColumns(true);
doSomething = (colName) => {
columns.forEach((col) => {
if (col.getDefinition().field === colName) {
col.hide();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.1/dist/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/tabulator_modern.css" rel="stylesheet" />
<div id="example-table"></div>
<button id="hidePInfo" onclick="doSomething('pInfo')">Hide Personal Info</button>