A Miller columns 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. true

true to enable the selection of item; false otherwise.

  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 column view. It is used when the client needs to load data dynamically, such as for pagination.

Note that only the items of the current column are rendered using the provided item datasource. The items of the ancestors columns are loaded lazily in different requests.

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 path of the target column.

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

e.g. ${requestPathInfo.suffix}


true to also load the ancestors of the current columns up to the rootPath; false otherwise.


true to also render a special column for the root resource when path == rootPath; false otherwise. This special column is used to allow the user to select the root path.

Say you set path = /, this component by default will render a column containing the items of that path (e.g. /apps, /etc). When this property is true, when path == rootPath, this component will also render a column containing a single item representing the root. In other words it will render two columns; first, the special root column; second, the normal column.

It can be illustrated with the following visualization:

When showRoot = false, path = /, rootPath = /:

| apps |
| etc  |
| home |
| libs |

When showRoot = true, path = /, rootPath = /:

|  /  | apps |
|     | etc  |
|     | home |
|     | libs |

When rendering the root resource for the item in the special column, this component will also honor the itemResourceType property.

  1. /

The path of the root column.


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

The URI Template that is returning the HTML response for the preview of an item.

It supports the following variables:

The id/path of the item.

true to render the preview column maximized to the available space; false otherwise.

Note that if you enable this, it generally works well visually only when you have one and only one column (beside the preview column) in the column view.


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

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


The value of [data-foundation-mode-group].


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.


+ mycolumnview
  - sling:resourceType = "granite/ui/components/coral/foundation/columnview"
  - src = "/a/b/c{.offset,limit}.html{+id}"
  - previewSrc = "/a/b/c.preview.html{+id}"
  - path = "${requestPathInfo.suffix}"
  - loadAncestors = true
  - rootPath = "/content"
  + datasource
    - sling:resourceType = "my/datasource"