Styling inside a sheet

Inside of <tc:row> and <tc:column> tags a <tc:style> can be used to set a CSS class or style to a specific row. In this example the rows are green (via customClass planet) when the object orbit is 'Sun'. The cell in the year column is blue, when the objects discovering year is older than 1900 (custom class is old-planet).

Name    Orbit    Period (Days)    Discoverer    Year   
Sun - 0.0 -
Mercury Sun 87.97 -
Venus Sun 224.7 -
Earth Sun 365.26 -
Mars Sun 686.98 -
Jupiter Sun 4332.71 -
Saturn Sun 10759.5 -
Uranus Sun 30685.0 Herschel 1781
Neptune Sun 60190.0 Adams 1846
Pluto Sun 90800.0 Tombaugh 1930
Moon Earth 27.32 -
Phobos Mars 0.32 Hall 1877
Deimos Mars 1.26 Hall 1877
Metis Jupiter 0.29 Synnott 1979
Adrastea Jupiter 0.3 Jewitt 1979
Amalthea Jupiter 0.5 Barnard 1892
Thebe Jupiter 0.67 Synnott 1979
Io Jupiter 1.77 Galileo 1610
Europa Jupiter 3.55 Galileo 1610
Ganymede Jupiter 7.15 Galileo 1610
  • Rows 1 to 20 of 88
  • Page 1 of 5
<?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="Styling inside a sheet"/> <p> Inside of <code>&lt;tc:row></code> and <code>&lt;tc:column></code> tags a <code>&lt;tc:style></code> can be used to set a CSS class or style to a specific row. In this example the rows are green (via customClass <code>planet</code>) when the object orbit is 'Sun'. The cell in the year column is blue, when the objects discovering year is older than 1900 (custom class is <code>old-planet</code>). </p> <tc:sheet value="#{sheetController.solarList}" var="object" rows="20" markup="small" columns="#{sheetController.automaticLayout ? null : '1fr 1fr 1fr 1fr 1fr'}"> <tc:row> <tc:style customClass="#{object.orbit eq 'Sun' ? 'planet' : ''}"/> </tc:row> <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:style customClass="#{object.discoverYear le 1900 ? 'old-planet' : ''}"/> <tc:out value="#{object.discoverYear}" labelLayout="skip"/> </tc:column> </tc:sheet> </ui:composition>