How can I initially hide columns in a p:dataTable with p:columnToggler

Question

I'm using PrimeFaces v.5 with this version a new component is released that ColumnToggler, when view is rendered, refreshed all checkbox are checked as a default operation.

What I need to do is;

• to uncheck some columns when I initialize the view,
• make p:columnToggler remember checked and unchecked options when a refresh operation occurs on p:dataTable

Answer 1

The best solution depends on the PrimeFaces version you are using.

PrimeFaces >= 5.2

See the other answer in this question.

workaround for < 5.2

You need to solve the first problem manually by overriding Primefaces' own ColumnToggler.prototype.render() function

first add styleClass="not-show-at-start" to your column that you want to insvisibe at start to access in javascript render() function;

<!--This column will not be shown at start-->
<p:column headerText="Cloumn to hide initially" width="70" styleClass="not-show-at-start">
    <h:outputText value="#{entityVar.nmProcessOwner}" />
</p:column>

<!--This column will be shown at start-->
<p:column headerText="Column to show initially" width="70">
     <h:outputText value="#{entityVar.nmProcessOwner}" />
</p:column>

secondy create a javascript file and paste code below in it, this function will re assign render function of ColumnToggler

PrimeFaces.widget.ColumnToggler.prototype.render = function() {
    //variable for creating id referance for each checkbox in ColumnToggler
    var id=0;
    this.columns = this.thead.find("> tr > th:visible:not(.ui-static-column)");
    this.panel = $("<div></div>").attr("id", this.cfg.id).addClass("ui-columntoggler ui-widget ui-widget-content ui-shadow ui-corner-all").append('<ul class="ui-columntoggler-items"></ul').appendTo(document.body);
    this.itemContainer = this.panel.children("ul");
    for (var a = 0; a < this.columns.length; a++) {
        id++;
        var b = this.columns.eq(a);
        $('<li class="ui-columntoggler-item"><div class="ui-chkbox ui-widget"><div id="cb'+id /*creating id for each checkbox for accessing later*/+'" class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active"><span class="ui-chkbox-icon ui-icon ui-icon-check"></span></div></div><label>' + b.children(".ui-column-title").text() + "</label></li>").data("column", b.attr("id")).appendTo(this.itemContainer);
        
        //access clumns using class reference(not-show-at-start) created in jsf page
        if(b.hasClass( "not-show-at-start")){
            //access checkbox using id attribute created above and uncheck it
            //this will hide columns that have "not-show-at-start" class
            this.uncheck($('#cb'+id));
        }
    }
    
    this.hide();
}