Bootstrap 3 + Primefaces 5 datatable styling

Standard

Using the default theme libraries supplied by Primefaces can make developing a custom look difficult. Having to override / make your own entire primefaces theme becomes painful; bootstrap 3 is the solution. Marrying Primefaces 5 component library and Bootstrap 3 renders a uniform design.

The following is a typical look of the Primefaces “boostrap” theme. Notice the headers on the columns as they have a background image. This design also lacks some functionality with different sized browsers.

Primefaces boostrap theme

Typical primefaces look

Utilizing the bootstrap 3 libraries the table can become responsive, have better design, and require little coding. Notice the difference in various design elements.

Disabled the default theme

Boostrap 3 with Primefaces 5 themes disabled

To marry primefaces and boostrap 3 it requires 3 steps; modifying the web.xml, setting class properties on the datatable, and overriding some default Primefaces css.

Web.xml

The Primefaces community supplies roughly 40 themes to choose from. We however, are not going to use any of them. Place the following code in your web.xml

<context-param>
   <param-name>primefaces.THEME</param-name>
   <param-value>none</param-value>
</context-param>

Setting the property above assures only the base styling will be rendered.

XHTML Page

On the desired page output a dataTable and attach the tableStyleClass attribute to it. The “table” and “table-striped” are Bootstrap css classes. Surround the entire dataTable with a div tag class “table-responsive”. The dataTabe is now responsive utilizing bootstrap css.

<div class="table-responsive">
   <p:dataTable tableStyleClass="table table-striped" value="#{myBean.itms}" var="itm">
      <p:column headerText="Column Name">
         <h:outputText value="#{itm.title}"/>
      </p:column>
   </p:dataTable>
</div>

Extra CSS

The default Primefaces css may still interact with the above dataTable rendering unwanted borders. The solution is to reset the css ui-datatable class generated by Primefaces like so:

.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td {
    border-style: none;
}

6 thoughts on “Bootstrap 3 + Primefaces 5 datatable styling

  1. wesley modanez

    Hello!
    I used your example and he removed the edges with success, but now I don’t seethe other icons of paging or editing.
    Would you have any idea what might be occurring?

    • Since you have disabled the primefaces theme you have to supply your own paging css.

      .ui-paginator {
      margin:0px;
      text-align: center;
      padding:2px;
      }

      .ui-paginator-top {
      border-bottom:0px none;
      }

      .ui-paginator-bottom {
      border-top:0px none;
      }

      .ui-paginator-page,
      .ui-paginator-pages,
      .ui-paginator-next,
      .ui-paginator-last,
      .ui-paginator-first,
      .ui-paginator-prev,
      .ui-paginator-current {
      display: inline-block;
      padding: 2px 6px;
      zoom: 1;
      margin-left: 1px;
      margin-right: 1px;
      text-decoration: none;
      outline: none;
      }

      .ui-paginator-page,
      .ui-paginator-next,
      .ui-paginator-last,
      .ui-paginator-first,
      .ui-paginator-prev{
      cursor: pointer;
      }

      .ui-paginator-current,
      .ui-paginator-rpp-options {
      margin-left: 1em;
      margin-right: 1em;
      }

      .ui-paginator-next .ui-icon,
      .ui-paginator-prev .ui-icon,
      .ui-paginator-first .ui-icon,
      .ui-paginator-last .ui-icon {
      height: auto;
      overflow: inherit;
      }

      /* IE7 Hack */
      .ui-paginator-pages {
      *padding-bottom: 0px;
      }

      .ui-paginator-jtp-select option,
      .ui-paginator-rpp-options option {
      background-image: none;
      border:0 none;
      box-shadow:none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      }

      This is the base CSS for primefaces paginator. A great way to do this would be to supply your own icons using font awesome and content types. This link should provide more details on how to do this.

      http://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content

      • Davies Ojekanmi

        Hi,

        How can I suppress all the css and js that comes with primefaces and use the css and js that comes with bootstrap as a replacement?

        • sixthpoint

          The CSS can be disabled by setting the context param primefaces.THEME to “none” as described above. This will disable the theme and leave the base CSS that drives the components in tack. Without this the more complex components of primefaces would simply not work. As for the JS, you cannot disable it. Primefaces is a component library that sits on JSF which has its own javascript library. The best solution would be to merge the two technologies as best possible. Overwrite CSS here and there to give it a complete look.

        • The CSS can be disabled by setting the context param primefaces.THEME to “none” as described above. This will disable the theme and leave the base CSS that drives the components in tack. Without this the more complex components of primefaces would simply not work. As for the JS, you cannot disable it. Primefaces is a component library that sits on JSF which has its own javascript library. The best solution would be to merge the two technologies as best possible. Overwrite CSS here and there to give it a complete look.

  2. Rodrigo Darti da Costa

    Hi!
    as I will always use a datatable with class style, there is some code in CSS that I can make this standard without putting in XHTML ???

Leave a Reply

Your email address will not be published.