<netui-data:cellRepeater> Tag
Renders
individual cells of an HTML table.
<netui-data:cellRepeater
[alternatingCellClass="alternatingCellClass"]
[cellClass="cellClass"]
[columns="columns"]
dataSource="dataSource"
[rowClass="rowClass"]
[rows="rows"]
[tableClass="tableClass"]
[verticalRepeat="verticalRepeat"] />
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> </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. |
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>