Table

/libs/granite/ui/components/coral/foundation/table

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:

granite:Table

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

selectionModestring

1. none

1. none
2. row

The mode of item to be selected:

none

The selection is disabled

row

Each row is selectable and represents one selection

selectionCountstringel

1. multiple

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

single

Only maximum single selection allowed

multiple

Zero or more selection allowed

srcstringel

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:

offset

The item offset of the current request.

limit

The item limit of the pagination.

id

The id of the collection ([data-foundation-collection-id]).

sortName

The name of sorted column. This is optional variable that may not be passed when resolving the URI Template.

sortDir

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}

pathstringel

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

e.g. ${requestPathInfo.suffix}

itemResourceTypestring

The resource type for each item of the column.

limitlong

1. 40

The item limit of the pagination.

sizeintegerel

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.

Warning

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

sortModestring

1. local

1. local
2. remote

The sorting mode of the column.

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

local

The sorting is done locally.

remote

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

orderablebooleanel

Indicates if the table row is orderable.

rowReorderActionstringel

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:

item

The id of the reordered item. ([data-foundation-collection-item-id])

before

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

beforeName

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.

rowReorderAction.absstringel

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.

metaPathstringel

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.

metaResourceTypestring

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.

modeGroupstring

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.

skipEmptyRowboolean

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.

columns

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].

columnsdatasource

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].

emptyrow

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

granite:TableColumn

namestring

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.

selectboolean

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

orderboolean

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

jcr:titlestring

i18n

The text of the column.

alignmentstring

1. left

1. left
2. right
3. center

The alignment of the column.

fixedWidthboolean

Indicates if the column has fixed width.

draggableboolean

Allow the column to be reordered visually by the user.

hiddenboolean

Indicates if the column is hidden.

sortableboolean

Indicates if the column is sortable.

sortTypestring

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.

alphanumeric

The value is treated as string.

number

The value is treated as number.

date

The value is treated as date. The value attribute needs to store the date integer since epoch.

custom

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>
</tr>

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.

Example

+ 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"