JSF dataTable as CSS table with clickable rows?

Question

Related questions have been asked but as there is not as yet any solid/acceptable answer, I thought I would re-phrase and clarify:

Is there a way within JSF to populate a dataTable or related query-result component without re-writing renderers as a W3C CSS table? This must enable clickable rows and row (versus column) styling a:hover, etc.

Example of desired rendered JSF component HTML from a query:

<div class="table">
    <a href="#" class="row">
        <span class="cell">Column-1-Value</span>
        <span class="cell">Column-2-Value</span>
    </a>
    ...
</div>

You can do it manually using <ui:repeat> to render each row. — Luiggi Mendoza
– Luiggi Mendoza, Commented Feb 12, 2013 at 16:43
Thanks - could you clarify? Using datatable or using <c:forEach>? — Darrell Teague
– Darrell Teague, Commented Feb 12, 2013 at 16:53
You know that <h:dataTable> will generate a <table> HTML component. So, if you want to avoid this and display your data using <div>, you can use <ui:repeat> to iterate through your List<Data> elements and build your table using plain HTML elements. As a sample: <div class="table>"<ui:repeat value="#{bean.lstData}" value="data"><a href="#" class="row"><span class="cell">#{data.Value1}</span><span class="cell">#{data.Value2}</span></a></ui:repeat></div> — Luiggi Mendoza
– Luiggi Mendoza, Commented Feb 12, 2013 at 17:02
Perfect ... you guys were too fast - I was about to answer my own question as I just this working. The delay was that (one of the things I love about JSF) is that JSF was not rendering with zero error-messages. Reason? I was using the "items" attribute (from dataTable) versus "value". JSF simply ignores it completely even though it should have complained that the "value" was missing and that the "items" attribute is not part of the <ui:repeat> schema. — Darrell Teague
– Darrell Teague, Commented Feb 12, 2013 at 17:35
The <h:dataTable> doesn't have an items attribute at all. The <c:forEach> has. — BalusC
– BalusC, Commented Feb 12, 2013 at 17:38

Arjan Tijms · Accepted Answer · 2013-02-21 20:44:23Z

1

Thanks to the input provided, this is the complete answer (versus just in comments) tested in a Java EE/JSF container:

<div class="table">
  <ui:repeat value="#{BackingBean.list}" var="item">
    <h:outputLink value="url">
      <f:param name="ID" value="#{item.ID}"/>
      <span class="cell">#{item.ID}</span>
      <span class="cell">#{item.Name}</span>
    </h:outputLink>
  </ui:repeat>
</div>

The above can then be styled using CSS/3 display:table, display:table-row and display:table-cell; respectively. Row is clickable and can be styled as desired.

edited Feb 21, 2013 at 20:44

Arjan Tijms

38.2k12 gold badges112 silver badges144 bronze badges

answered Feb 12, 2013 at 17:43

Darrell Teague

4,3021 gold badge29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSF dataTable as CSS table with clickable rows?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related