Id	First Name	Last Name	Region	Start Date
1	Humpty1	Dumptyefdf	West Coast	May 26, 2013
4	test	Bandaa	East Coast	Feb 29, 2008
2	Test	kumar	West Coast	Feb 21, 2013
3	toto	Momma	East Coast	Feb 11, 2007

PreviewableGrid.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/previewablegrid.css}"/>
    <t:remove>
        <!-- A stylesheet link that enables preview but cannot be guaranteed to work at runtime. -->
        <link rel="stylesheet" type="text/css" href="../../../css/examples/tables/previewablegrid.css"/>
    </t:remove>
</head>
<body>
    <h1>Previewable Grid</h1>
    
    Here we have made a Grid fairly previewable in a web browser or WYSIWYG editor.<br/><br/>
    
    What we have done: 
    <ul>
        <li>after the Grid we have added an example of the elements that Grid would add (eg. tr, th, td)</li>
        <li>surrounded the example with JumpStart's Remove component so they will not be rendered at runtime</li>
        <li>copied all the grid-related css from Tapestry's default.css to our stylesheet</li>
    </ul>

    Try opening the template file PreviewableGrid.tml with Firefox to see the effect.
    
    <div class="eg">
        <table t:type="grid" t:source="persons" t:exclude="version" t:rowsPerPage="4" t:pagerPosition="top">
        </table>
        <t:remove>
            <div class="t-data-grid">
                <div class="t-data-grid-pager"><span class="current">1</span></div>
                <table class="t-data-grid">
                    <thead>
                        <tr><th>Id</th><th>First Name</th><th>Last Name</th><th>Start Date</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>123</td><td>abc</td><td>abc</td><td>Jan 1, 2008</td></tr>
                    </tbody>
                </table>
            </div>
        </t:remove>
    </div>
    
    References: 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/corelib/components/Grid.html">Grid</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/PreviewableGrid.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/PreviewableGrid.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/tables/previewablegrid.css"/>
</body>
</html>

PreviewableGrid.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 PreviewableGrid {
    static private final int MAX_RESULTS = 30;

    // Screen fields

    @Property
    private List<Person> persons;

    // 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);
    }
}

previewablegrid.css


body            { 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; }

/*
    The following entries are to make a Grid previewable. They have been copied from Tapestry's default.css.
*/

TABLE.t-data-grid THEAD TR {
    color: white;
    background-color: #809FFF;
}

TABLE.t-data-grid THEAD TR TH {
    text-align: left;
    padding: 3px;
    white-space: nowrap;
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
}

TABLE.t-data-grid {
    border-collapse: collapse;
    border-left: 1px solid silver;
}

TABLE.t-data-grid TBODY TR TD {
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
    padding: 2px;
}

DIV.t-data-grid {
    font-family: "Trebuchet MS", Arial, sans-serif;
}

DIV.t-data-grid-pager {
    margin: 8px 0px;
}

DIV.t-data-grid-pager A, DIV.t-data-grid-pager SPAN.current {
    text-decoration: none;
    color: black;
    padding: 2px 5px;
    font-size: medium;
    border: 1px solid silver;
    margin-right: 5px;
}

DIV.t-data-grid-pager A:hover {
    border: 1px solid black;
}

DIV.t-data-grid-pager SPAN.current {
    color: white;
    background-color: #809FFF;
}

TABLE.t-data-grid TR TH A {
    color: white;
}