Remove select all checkbox in PrimeFaces datatable

Question

Is there a way to remove the select all check box on the header of the p:datatable.

I need check box on the individual row but not on the header.

score 9 · Answer 1 · answered Jul 28 '14 at 14:16

9

This works very well :

.ui-chkbox.ui-chkbox-all.ui-widget {
    display:none !important;
 }

answered Jul 28 '14 at 14:16

Debutantjsf

109
1
5

score 6 · Answer 2 · answered Sep 16 '13 at 05:18

What you can do is below:

Add the below in your default.css file:

.table-no-select-all .ui-chkbox-all {
     display: none !important;
}

And then in your facelet, refer that like below:

<h:form id="form"> 
   <p:dataTable id="cars" rowIndexVar="idx" styleClass="table-no-select-all" ...>
     <p:column selectionMode="multiple" style="width:2%" />  
   </p:dataTable>
 </h:form>

Thanks.

score 3 · Answer 3 · answered Jun 10 '14 at 12:52

I managed to do this by using p:columnGroup for specifying headers.

 <p:dataTable id="selectByPotentialTable" var="replacementByPotential"
    widgetVar="selectByPotentialTable"
    value="#{kmSelectByPotentialBean.allReplacementPrintersViewModel}"
    selection="#{kmSelectByPotentialBean.selectedByPotentialReplacement}">

        <p:columnGroup type="header">
            <p:row>
               <p:column/>
               <p:column headerText="Printer Model"/>
            </p:row>
        </p:columnGroup>
        <p:column selectionMode="multiple" style="width:2%;text-align:center"/>
        <p:column>
            #{replacementByPotential.name}
        </p:column>

</p:dataTable>

If you change your mind and you want the selectAll checkbox to be displayed, you need to change

<p:columnGroup type="header">
        <p:row>
        <p:column/>
           <p:column headerText="Printer Model"/>
        </p:row>
</p:columnGroup>

to

<p:columnGroup type="header">
        <p:row>
           <p:column selectionMode="multiple" style="width:2%;text-align:center"/>
           <p:column headerText="Printer Model"/>
        </p:row>
</p:columnGroup>

score 1 · Answer 4 · answered May 08 '13 at 01:50

For example:

<h:form id="form"> 
   <p:dataTable id="cars" rowIndexVar="idx" ...>
     <p:column selectionMode="multiple" style="width:2%" />  
   </p:dataTable>
 </h:form>

Primefaces add default suffix _head to datatable's header, in example: datatable's header will have id cars_head, so you can disable select all checkbox via css .ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default is checkbox's style of all checkbox in datatable.

If you use JSF 2.0:

    <style type="text/css">
        #form-cars_head .ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default{
            display:none !important;
        }
    </style>

you need to add this configuration to web.xml to use '-' in component's id:

    <context-param>
        <param-name>javax.faces.SEPARATOR_CHAR</param-name>
        <param-value>-</param-value>
    </context-param>

I was able to achieve this by overriding .ui-chkbox-all{ display: none !important;} but this is applied to all the all the tables. Is there a way it can be applied to one particular table. — KCP, May 08 '13 at 13:25

score 1 · Answer 5 · edited Mar 09 '23 at 10:56

1

This works for me in PrimeFaces 6.0

.ui-widget-header div.ui-chkbox.ui-widget {
    display: none !important;
}

edited Mar 09 '23 at 10:56

Jasper de Vries

19,370
6
64
102

answered Nov 01 '17 at 17:39

Fabricio

11
1

score 0 · Answer 6 · edited Mar 09 '23 at 10:57

0

In PrimeFaces 8.

.ui-datatable .ui-selection-column .ui-chkbox-all {
    display: none !important;
}

edited Mar 09 '23 at 10:57

Jasper de Vries

19,370
6
64
102

answered Mar 09 '23 at 10:54

solo king jec

31
3

Remove select all checkbox in PrimeFaces datatable

6 Answers6