A table component.

It implements foundation-selections and foundation-mode vocabulary.

Note that this component’s size is maximized to its parent OOTB. Hence it doesn’t make sense if this component has a sibling component, as it will take the whole parent’s space.

It has the following content structure:

  1. granite:commonAttrs
  2. granite:renderCondition
  3. granite:container
  1. none
  1. none
  2. row

The mode of item to be selected:

The selection is disabled
Each row is selectable and represents one selection
  1. multiple

The count of item to be selected (when the selectionMode is enabled):

Only maximum single selection allowed
Zero or more selection allowed

The URI Template that is returning the HTML response of the table. It is used when the client needs to load data dynamically, such as for sorting, pagination.

If it is not specified, the feature is disabled.

It supports the following variables:

The item offset of the current request.
The item limit of the pagination.
The id of the collection ([data-foundation-collection-id]).
The name of sorted column. This is optional variable that may not be passed when resolving the URI Template.
The direction of the sorting: asc or desc. This is optional variable that may not be passed when resolving the URI Template.

e.g. /a/b/c{.offset,limit}.html{+id}{?sortName,sortDir}


The path of the current collection. It will act as the value of [data-foundation-collection-id].

e.g. ${requestPathInfo.suffix}


The resource type for each item of the column.

  1. 40

The item limit of the pagination.


Indicates the size of the items from datasource to be included. If this property is not specified, then all items from datasource will be included, and the next page will be fetched accordingly.

This is meant to be a performance optimization to avoid fetching the next page unnecessarily. For example given the fact that the size is set to 20, and the datasource is configured to fetch size + 1, which is 21, the implementation can check if the datasource actually has more item or not just by checking its size.


When size is set, you have to make sure your datasource is configured to fetch more than the value of size!

size Actual DS Size Has More?
20 < 20 false
20 = 20 false
20 > 20 true
(not set) n/a true
  1. local
  1. local
  2. remote

The sorting mode of the column.

To enable sorting, the column needs to be configured accordingly.

The sorting is done locally.
The sorting is done remotely. The new data are fetched remotely as defined by src property.

Indicates if the table row is orderable.


The URI Template handling the POST request to reorder the item.

When it is set, “orderable” is defaulted to true. Note that it means that if “orderable” is explicitly as “false”, then even though “rowReorderAction” is set, the ordering feature is still disabled.

It supports the following variables:

The id of the reordered item. ([data-foundation-collection-item-id])
The id of the reference item. The item is ordered before this reference item. ([data-foundation-collection-item-id])

The name of the before item: var beforeName = before.substring(before.lastIndexOf(“/”) + 1);.

This is meant for convenience for Sling POST Servlet’s :order parameter, which requires the node name (instead of path).

The final URL (after URI Template expansion) is converted to application/x-www-form-urlencoded content type. For example if we have URI Template of /reorder{?item,before} which is expanded into /reorder?item=%2Fcontent%2Fde&before=%2Fcontent%2Fen, the POST would be against /reorder with item=%2Fcontent%2Fde&before=%2Fcontent%2Fen as the request body.


This property is the equivalence of rowReorderAction for absolute path.

For example if your template is {+item}?order{&before}, since it is not starting with “/”, the server is unable to know if it is an absolute path. So use this property if you want to add the context path regardless.


The path to the resource to render .foundation-collection-meta. If not specified, the resource specified at path will be used instead.

The resource will be included using resource type specified at metaResourceType, where it can be processed accordingly.


The resource type to render .foundation-collection-meta.

The resource specified at metaPath or path will be included using this resource type, where it can be processed accordingly.

This property is mandatory to specified if .foundation-collection-meta needs to be generated.


The value of [data-foundation-mode-group] this component participates.

The component supports the default or selection mode.

When there is a selection, it will trigger the foundation-mode-change event with mode = selection, while triggering the event with mode = default when there is no selection.

When other component triggers the event with mode = default, it will react by clearing the selection.


false to show the empty message (or render the empty row using emptyrow subresource) when there is no item; true to skip showing that message.


The columns configuration. Use this instead of columnsdatasource to configure the columns literally in the content.

Each subresource of columns needs to satisfy [granite:TableColumn].


The datasource for the columns configuration. Use this instead of columns to programmatically generate the columns.

It needs to return the resources satisfying [granite:TableColumn].


The component to render the row when there is no item.


The name of the column. This name is used as an ID to indicate the column. For example it will be used during server-side sorting.

If the property is not specified, the resource name is used instead.


Indicates if the column is a column to select the item.


Indicates if the column is a column to order the item.


The text of the column.

  1. left
  1. left
  2. right
  3. center

The alignment of the column.


Indicates if the column has fixed width.


Allow the column to be reordered visually by the user.


Indicates if the column is hidden.


Indicates if the column is sortable.

  1. alphanumeric
  1. alphanumeric
  2. number
  3. date
  4. custom

The type of the cell value of the column for the purpose of sorting.

The cell value is taken from value attribute of the cell, with the cell content as fallback.

The value is treated as string.
The value is treated as number.
The value is treated as date. The value attribute needs to store the date integer since epoch.
No actual sorting is performed. Rather custom code needs to sort it.

Item Markup

Each item (the row) needs to render the markup of Coral.Table.Row:

<tr is="coral-table-row">
  <td is="coral-table-cell" coral-table-rowselect></td>
  <td is="coral-table-cell">Text</td>
  <td is="coral-table-cell">Text 2</td>
  <td is="coral-table-cell" coral-table-roworder></td>

Each cell in the row can be any arbitrary content.

To indicate a cell for selection (to select the row), coral-table-rowselect attribute needs to be specified at that cell element. You can also put arbitrary content in that cell (e.g. a thumbnail). If no content at all, then a checkbox is automatically rendered.

For the thumbnail (as the content of the selection cell), it is recommended to use 48x48px dimensions. e.g. “/content/geometrixx_mobile.thumb.48.48.png?ck=1447060146”

To indicate a cell for row ordering, coral-table-roworder attribute needs to be specified at that cell element.

For navigation when clicking the row, .foundation-collection-navigator can be specified at <tr>. It supports navigating to arbitrary location (just like <a>), or navigating to the collection item.


+ mytable
  - sling:resourceType = "granite/ui/components/coral/foundation/table"
  - src = "/a/b/c{.offset,limit}.html{+id}{?sortName,sortDir}"
  - rowReorderAction = "/reorder{?item,before}"
  + columns
    + select
      - select = true
    + col1
      - jcr:title = "Column 1"
    + col2
      - jcr:title = "Column 2"
    + order
      - order = true
  + datasource
    - sling:resourceType = "my/datasource"