Is there a way to let users choose which columns to hide/show in the table of the tabulator 5.1 version?

Question

I need to implement this feature for users and I was wondering if the tabulator allows this behaviour.

Here is an example of what I mean: https://bryntum.com/examples/grid/bigdataset/ (right mouse click on any column to hide column)

Thanks in advance

Answer 1

This can be done using the HeaderMenu and rowContextMenu.

  var headerMenu = function(){
    var menu = [];
    var columns = this.getColumns();
    for(let column of columns){
        let icon = document.createElement("i");
        icon.classList.add("fas");
        icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");

        let label = document.createElement("span");
        let title = document.createElement("span");
        title.textContent = " " + column.getDefinition().title;
        label.appendChild(icon);
        label.appendChild(title);

        menu.push({
          label:label,
          action:function(e){
            e.stopPropagation();
          column.toggle();
          if(column.isVisible()){
                icon.classList.remove("fa-square");
              icon.classList.add("fa-check-square");
            }else{
              icon.classList.remove("fa-check-square");
              icon.classList.add("fa-square");
            }
          }
      });
    }
    return menu;
  };

Examples Here Tabulator

and here: jsfiddle