Different data_table header styles
843842Apr 20 2004 — edited Feb 12 2007I am trying to use different styles for the column headings in a data_table. Specifically, I want some of the headings to be leftt aligned, some right aligned and some to be centred.
I can do this for the data in the columns by using a list of styles in the "columnClasses" attribute, but the "headerClass" attribute applies to all headers.
The header facets for the column contain a <h:panel_group> as the header is composed of some static text and a couple of buttons.
I have tried using a "styleClass" attribute on the panel_group. This results in a <span> HTML element being generated with the required style class but it does not seem to effect the text alignment.
Any suggestions would be appreciated.
Code is included below.
--------------------------------------------------------------------------------
<%-- GroupList.jsp --%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<f:view>
<html>
<head>
<title>Archive</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<h:form id="groupList">
<h:commandButton id="first"
action="#{GroupListBean.first}"
immediate="false"
value="<<"
type="SUBMIT"/>
<h:commandButton id="previous"
action="#{GroupListBean.previous}"
immediate="false"
value=" < "
type="SUBMIT"/>
<h:commandButton id="next"
action="#{GroupListBean.next}"
immediate="false"
value=" > "
type="SUBMIT"/>
<h:commandButton id="last"
action="#{GroupListBean.last}"
immediate="false"
value=">>"
type="SUBMIT"/>
<h:dataTable id="table"
binding="#{GroupListBean.data}"
rows="10"
value="#{GroupListBean.fullList}"
var="group"
columnClasses="group-list-column-1, group-list-column-2,
group-list-column-3, group-list-column-4"
footerClass="group-list-footer"
headerClass="group-list-header"
rowClasses="group-list-row-even, group-list-row-odd"
styleClass="group-list-background">
<f:facet name="header">
<h:outputText value="Backup Groups"/>
</f:facet>
<h:column>
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Group Id"/>
<h:commandButton id="sortGroupIdA"
action="#{GroupListBean.sortGroupIdA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortGroupIdD"
action="#{GroupListBean.sortGroupIdD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.groupId}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup styleClass="group-list-header-2">
<h:outputText value="Group Name"/>
<h:commandButton id="sortNameA"
action="#{GroupListBean.sortNameA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortNameD"
action="#{GroupListBean.sortNameD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.name}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup styleClass="group-list-header-3">
<h:outputText value="Creation Date"/>
<h:commandButton id="sortTimestampA"
action="#{GroupListBean.sortTimestampA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortTimestampD"
action="#{GroupListBean.sortTimestampD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.timestamp}">
<f:convertDateTime dateStyle="long"/>
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Restore"/>
<h:commandButton id="sortSelectedA"
action="#{GroupListBean.sortSelectedA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortSelectedD"
action="#{GroupListBean.sortSelectedD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:selectBooleanCheckbox value="#{group.selected}"/>
</h:column>
<%--
--%>
</h:dataTable>
</h:form>
</body>
</html>
</f:view>
------------------------------------------------------------------------------------------------------
.group-list-background {
background-color: #ffffff;
border-collapse: collapse;
font-family: sans-serif;
font-size: 12pt;
padding: 10px;
width: 90%;
}
.group-list-column-1
{
text-align: center;
width: 15%;
}
.group-list-column-2
{
text-align: left;
width: 50%;
}
.group-list-column-3
{
text-align: right;
width: 20%;
}
.group-list-column-4
{
text-align: center;
width: 15%;
}
.group-list-footer {
background-color: #A5A5A5;
color: #000000;
font-weight: bold;
text-align: center;
}
.group-list-header {
background-color: #ffffff;
color: #000000;
text-align: centre;
}
.group-list-header-2
{
text-align: left;
}
.group-list-header-3
{
text-align: right;
}
.group-list-row-even {
}
.group-list-row-odd {
background-color: #dddddd;
}