Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Offcanvas Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sorting Paginator ColumnSelector Events Selection change event Action Markup Style Empty sheet Column Bar Filtering Static header Multi header Sheet Tree ColumnPanel Editable Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Style

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

Responsive Column Display

For responsive display or hiding columns, see the Bootstrap styling example.
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.