<netui-data:cellRepeater> Tag

Renders individual cells of an HTML table.

Syntax

<netui-data:cellRepeater
    [alternatingCellClass="alternatingCellClass"]
    [cellClass="cellClass"]
    [columns="columns"]
    dataSource="dataSource"
    [rowClass="rowClass"]
    [rows="rows"]
    [tableClass="tableClass"]
    [verticalRepeat="verticalRepeat"] />

Description

Renders individual cells of an HTML table. The tag is data bound to a data set specified in the dataSource attribute. Other <netui...> tags in the body of <netui-data:cellRepeater> can use the expression {container.item} to access the current data item in the data set.

The tag will automatically generate the open and close table, row, and cell tags. Style attributes may be set using attributes on this tag in order to customize the rendered table's final appearance. The dimensions of the table are specified with the attributes columns and rows. If only one dimension is specified, the other will be inferred by using the size of the given data set. As a result, the entire dataset will be rendered. For example, if the columns attribute is set to 4 and the data set has 20 items, the resulting table will have 5 rows. If the data set has fewer items than the number of cells that should be rendered, the cells are padded with HTML table cells:

     <td>&nbsp;</td>

This will prevent rendering a malformed HTML table. If the number of cells to render is smaller than the fully specified dimensions of the table, only this number of cells will be rendered. For example, if the data set 50 items but the rows and the columns attributes are both 7, only the first 49 items in the dataset will be rendered and the 50th will not be shown. The values of the rows and the columns can take a data binding expression; in this case, each value will be converted into an integer. An error will be reported on the page if this conversion fails.

Note: the metadata property of the {container...} binding context is not supported in the <netui-data:cellRepeater> tag.

Attributes
alternatingCellClass
Required: No  |   Supports runtime evaluation: No  |   Data bindable: No

The HTML style class that is rendered on alternating table cells. The starting cell is alternated for each row, which results in a checkerboard colored table being displayed. For example, if the alteranting cell class is "alternatingCellClass", every other table cell tag is:
     <td cell="alternatingCellClass">
cellClass
Required: No  |   Supports runtime evaluation: No  |   Data bindable: No

The HTML style class that is rendered on each table cell. For example, if the cell class is "cellClass", each opening table cell tag is:
     <td class="cellClass">
columns
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: Yes

Integer. The number of columns that should be rendered in the HTML table. If the columns attribute is specified but the rows attribute is not, the rows attribute will be inferred using the size of the data set.
dataSource
Required: Yes  |   Supports runtime evaluation: No  |   Data bindable:

rowClass
Required: No  |   Supports runtime evaluation: No  |   Data bindable: No

The HTML style class that is rendered on each HTML table row. For example, if the row class is "rowClass", each opening table row tag is:
     <tr class="rowClass">
rows
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: Yes

Integer. The number of rows that should be rendered in the HTML table. If the rows attribute is specified but the columns attribute is not, the columns attribute will be inferred using the size of the data set.
tableClass
Required: No  |   Supports runtime evaluation: No  |   Data bindable: No

The HTML style class that is rendered on the HTML table. For example, if the row class is "tableClass", each opening table tag is:
     <table class="tableClass">
verticalRepeat
Required: No  |   Supports runtime evaluation: No  |   Data bindable: No

Boolean. If true the data set is rendered vertically, otherwise it is rendered horizontally. If the rows are rendered horizontally, the items in the data set are rendered across each row from top to bottom. Otherwise, they are rendered down each column from left to right. The default is to render the items horizontally.

 
Example

In the following sample, the <netui-data:cellRepeater> tag creates a table with a certain number of columns, as given in {pageFlow.numColumns} and as many rows as necessary to display all the items in the data set.

    <netui-data:cellRepeater dataSource="{pageFlow.itemArray}" columns="{pageFlow.numColumns}" >
        Item: <netui:label value="{container.item}"/>
    </netui-data:cellRepeater>