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

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/[email protected]/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>