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 d

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;

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 = $("
").attr("id", this.cfg.id).addClass("ui-columntoggler ui-widget ui-widget-content ui-shadow ui-corner-all").append('
' + b.children(".ui-column-title").text() + "").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();
}