Simple Data Table Example

data-table.xhtml

<fr:datatable width="100%" height="300px">
    <xhtml:thead>
        <xhtml:tr>
            <xhtml:th fr:sortable="true" fr:sortKey="text">Note</xhtml:th>
            <xhtml:th fr:sortable="true" fr:sortKey="text">Creation Time</xhtml:th>
            <xhtml:th fr:sortable="true" fr:sortKey="participant">Participant</xhtml:th>
            <xhtml:th fr:sortable="true" fr:sortKey="activityName">Activity</xhtml:th>
        </xhtml:tr>
    </xhtml:thead>
    <xhtml:tbody>
        <xforms:repeat nodeset="instance('notes')/noteBasicInfo">
            <xhtml:tr>
                <xhtml:td>
                    <xforms:output ref="text"/>
                </xhtml:td>
                <xhtml:td>
                    <xforms:output ref="creationDate" xxforms:format="format-dateTime(., '[M01]/[D01]/[Y] - [h01]:[m01]:[s01]')"/>
                </xhtml:td>
                <xhtml:td>
                    <xforms:output ref="participant"/>
                </xhtml:td>
                <xhtml:td>
                    <xforms:output ref="activityName"/>
                </xhtml:td>
            </xhtml:tr>
        </xforms:repeat>
    </xhtml:tbody>
</fr:datatable>