How to achieve complex header in Bootsfaces datatable

Question

I am using Bootsfaces datatable to display my data. However, I want to achieve complex header as shown here: https://datatables.net/examples/basic_init/complex_header.html

I tried to add <th rowspan> and <th colspan> directly under header facet in the first dataTableColumn, but that have a ugly empty row at the top.

I also tried to add the whole header facet under <b:dataTable...> tag, before the fist <b:dataTableColumn>, but that header code won't be generated into the html. Any other suggestions? I do not want to switch to primefaces or richfaces as my framework as been fixed.

My code that trying to achieve the complex header looks like below:

<b:dataTable value="#{podStatusListBean.podStatusBeanList}" 
                      var="podStatus"
                      id="podStatuses">
     <b:dataTableColumn footer-style='background-color:orange'
                        footer-styleclass="{podStatusListBean.footerVisibility}">
               <f:facet name="header">
                    <tr>
                      <th rowspan="2">Name</th>
                      <th colspan="2">HR Information</th>
                      <th colspan="3">Contact</th>
                    </tr>
               </f:facet>
  ...

Also see https://github.com/TheCoder4eu/BootsFaces-OSP/issues/795. — Stephan Rauh, Jun 15 '17 at 13:54

score 0 · Answer 1 · answered Jun 15 '17 at 19:15

This is a new feature we've added to the next BootsFaces version (probably 1.2). As of June 15, 2017, the current version of BootsFaces 1.1.1 only supports complex headers on a per-column basis.

Complex headers per column (supported since BootsFaces 0.8.0): Add a header facets to the <b:dataTableColumn />, pretty much the way you tried. But keep in mind that BootsFaces already generates the <tr> and <th> tags, so you can nest them a second time. But you can do something like this:

<b:dataTableColumn>
  <f:facet name="header">
    <ul
      style="margin-bottom: 0; list-style-type: none; padding-left: 0">
        <li>Price</li>
        <li>Engine Power</li>
      </ul>
    </f:facet>
         € #{car.price}
         <br />
         #{car.enginePowerKW} KW (#{car.enginePower} hp) 
       </b:dataTableColumn>
</b:dataTable>

More complex headers (will be supported beginning with BootsFaces 1.2.0): Add a header facet to the surrounding <b:dataTable /> tag. In this case you're responsible for defining the correct number of table headers. If you skip one, you'll be rewarded by a JavaScript error. In many cases it will even go by unnoticed, but the initialization of the datatable is incomplete, so you'd rather be careful.

<b:dataTable value="#{carPool.carPool}"
             var="car"
             page-length="5"
             page-length-menu="5,10,20">
  <f:facet name="header">
     <tr>
      <th rowspan="2">Car</th>
      <th colspan="2">Appearance</th>
      <th colspan="2">Technical Data</th>
  </tr>
  <tr>
      <th>Color</th>
      <th>Year</th>
      <th>Price</th>
      <th>Power</th>
 </tr>
    </f:facet>
   <b:dataTableColumn>
       #{car.brand}  #{car.type}
  </b:dataTableColumn>
   <b:dataTableColumn value="#{car.color}" />
   <b:dataTableColumn value="#{car.year}"  order="asc" />
   <b:dataTableColumn value="#{car.price}" />
   <b:dataTableColumn value="#{car.enginePower}"/>
 </b:dataTable>

How to achieve complex header in Bootsfaces datatable

1 Answers1