Markup

This example, demonstrate the different markups defined for sheet. These markups reflecting the styles from bootstrap.

Markup

<tc:sheet markup="inverse hover" ...>
Name    Orbit    Period (Days)    Discoverer    Year   
Sun - 0.0 -
Mercury Sun 87.97 -
Venus Sun 224.7 -
Earth Sun 365.26 -
  • Rows 1 to 4 of 88
  • Page 1 of 22
<?xml version="1.0" encoding="UTF-8"?> <!-- * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this work for additional information regarding copyright ownership. * The ASF licenses this file to You under the Apache License, Version 2.0 * (the "License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. --> <ui:composition template="/main.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:tc="http://myfaces.apache.org/tobago/component" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:param name="title" value="#{demoBundle.sheet_markup}"/> <p>This example, demonstrate the different markups defined for sheet. These markups reflecting the styles from bootstrap. <tc:selectOneRadio value="#{sheetController.automaticLayout}"> <tc:event/> <tc:selectItem itemLabel="Automatic table layout" itemValue="true"/> <tc:selectItem itemLabel="Managed table layout" itemValue="false"/> </tc:selectOneRadio> <tc:selectManyShuttle value="#{sheetController.markup}"> <tc:event/> <tc:selectItem itemLabel="Dark" itemValue="dark"/> <tc:selectItem itemLabel="Striped" itemValue="striped"/> <tc:selectItem itemLabel="Bordered" itemValue="bordered"/> <tc:selectItem itemLabel="Hover" itemValue="hover"/> <tc:selectItem itemLabel="Small" itemValue="small"/> </tc:selectManyShuttle> </p> <tc:section label="Markup"> <pre><code class="language-markup">&lt;tc:sheet markup="inverse hover" ...></code></pre> <tc:sheet markup="#{sheetController.markup}" value="#{sheetController.solarList}" var="object" rows="4" columns="#{sheetController.automaticLayout ? null : '1fr 1fr 1fr 1fr 1fr'}"> <tc:column label="Name"> <tc:out value="#{object.name}" labelLayout="skip"/> </tc:column> <tc:column label="Orbit"> <tc:out value="#{object.orbit}" labelLayout="skip"/> </tc:column> <tc:column label="Period (Days)"> <tc:out value="#{object.period}" labelLayout="skip"/> </tc:column> <tc:column label="Discoverer"> <tc:out value="#{object.discoverer}" labelLayout="skip"/> </tc:column> <tc:column label="Year"> <tc:out value="#{object.discoverYear}" labelLayout="skip"/> </tc:column> </tc:sheet> </tc:section> </ui:composition>