<p:dataTable var="car" value="#{dtPaginatorView.cars}" rows="10"
                     paginator="true"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     rowsPerPageTemplate="5,10,15">
    <p:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>

    <p:column headerText="Year">
        <h:outputText value="#{car.year}" />
    </p:column>

    <p:column headerText="Brand">
        <h:outputText value="#{car.brand}" />
    </p:column>

    <p:column headerText="Color">
        <h:outputText value="#{car.color}" />
    </p:column>
</p:dataTable>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    ...
  </div>
  <div id="tabs-2">
 	...
  </div>
  <div id="tabs-3">
	...
</div>

<paper-action-dialog backdrop autoCloseDisabled layered="false">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <paper-button affirmative autofocus>Tap me to close</paper-button>
</paper-action-dialog>

<dom-module id="seed-element">

  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
      }
    </style>
    <content></content>
    <p class="author">
      <img src="{{author.image}}">
      Cheers, {{author.name}}!
    </p>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'seed-element',

    properties: {
      fancy: Boolean,

      author: {
        type: Object,
        value: function() {
          return {
            name:  'Dimitri Glazkov',
            image: 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg',
          };
        }
      },

    },

    // Element Lifecycle

    ready: function() {
      // `ready` is called after all elements have been configured, but
      // propagates bottom-up. This element's children are ready, but parents
      // are not.
    },

    attached: function() {
      // `attached` fires once the element and its parents have been inserted
      // into a document.
    },

    detached: function() {
      // The analog to `attached`, `detached` fires when the element has been
      // removed from a document.
    },

    // Element Behavior

    sayHello: function(greeting) {
      var response = greeting || 'Hello World!';
      return 'seed-element says, ' + response;
    }

  });

</script>