Id	First Name	Last Name
2	23iij	kumar
1	sdf	sdfsdff
4	test	Bandaa
3	toto	Momma
5	xwang	Spoon12

LinkingLoop1.tml


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
     
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
<head>
    <link rel="stylesheet" type="text/css" href="${context:css/examples/tables/linkingloop.css}"/>
</head>
<body>
    <h1>Linking Loop (1)</h1>
    
    A table built with the Loop component, with links.

    <div class="eg">
        <table class="grid">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
                <tr t:type="Loop" t:source="persons" t:value="person">
                    <td>${person.id}</td>
                    <td><a t:type="pagelink" t:page="examples/tables/LinkingLoop2" t:context="person.firstName" href="#">${person.firstName}</a></td>
                    <td>${person.lastName}</td>
                </tr>
            </tbody>
        </table>
     </div>

    References: 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/corelib/components/Loop.html">Loop</a>.<br/><br/>

    <a t:type="pagelink" t:page="Index" href="#">Home</a><br/><br/>
    
    The source for Person, PersonFinderService, @EJB handling, etc. is shown in the @EJB example.<br/><br/>

    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/LinkingLoop1.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/LinkingLoop1.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/tables/linkingloop.css"/>
</body>
</html>

LinkingLoop1.java


package jumpstart.web.pages.examples.tables;

import java.util.List;

import javax.ejb.EJB;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;

import org.apache.tapestry5.annotations.Property;

public class LinkingLoop1 {
    static private final int MAX_RESULTS = 30;

    // Screen fields

    @Property
    private List<Person> persons;

    @Property
    private Person person;

    // Generally useful bits and pieces

    @EJB
    private IPersonFinderServiceLocal personFinderService;

    // The code
    
    void setupRender() {
        // Get all persons - ask business service to find them (from the database)
        persons = personFinderService.findPersons(MAX_RESULTS);
    }
}

linkingloop.css


body, td        { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #333;
                    line-height: 17px; }
h1              { font-size: 26px; line-height: 20px; } /* For IE 7 */

.eg             { margin: 20px 0; padding: 20px; 
                    border: 1px solid #ddd; border-radius: 4px; -webkit-border-radius: 4px; -mox-border-radius: 4px; }

a               { text-decoration: none; color: #3D69B6; }
a:hover         { text-decoration: underline; }

.grid           { border-collapse: collapse; border-spacing: 0; border: 1px solid #ddd; font-size: 13px; }
.grid tr        { border-top: 1px solid #f8f8f8; }
.grid tr:hover  { background-color: #eee; }
.grid th        { padding: 3px 5px; text-align: left; width: 130px; border: 1px solid #ddd; 
                    font-weight: normal; background-color: #eee; 
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e4e4e4'); /* for IE */
                    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#e4e4e4)); /* for webkit browsers */
                    background: -moz-linear-gradient(top, #fbfbfb, #e4e4e4); /* for firefox 3.6+ */ }
.grid th        { color: #444; text-shadow: 0px -1px 0px #e4e4e4; }
.grid td        { padding: 3px 5px; text-align:left; }