Expandable Column component

The Expandable Column UI component is an extension for Column. It alphabetically sorts the options associated with a record/row and renders several options (the number is defined in configuration) into a cell. The full list of options is displayed in a tooltip implemented by the Tooltip UI component <Magento_Ui_module_dir>/view/base/web/js/lib/knockout/bindings/tooltip.js.

The Expandable Column component can be used in Admin and the storefront .

Configuration options

Option Description Type Default
bodyTmpl Path to the template used for rendering the column's fields in the table's body. String ui/grid/cells/expandable
tooltipTmpl Path to the template used for rendering the component's tooltip content template. String ui/grid/cells/expandable/content
visibeItemsLimit A number of options to display in a cell. String '5'
tooltipTitle A title for the tooltip. String

Component’s options are set in the configuration .xml file as follows:

<column name="ids" class="Magento\Ui\Component\MassAction\Columns\Column">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Catalog\Model\Product\Attribute\Source\Status</item>
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/expandable</item>
            <item name="tooltipTitle" xsi:type="string">Tooltip Title</item>
            <item name="visibeItemsLimit" xsi:type="number">5</item>


This component has a dependency on the Column component, <Magento_Ui_module_dir>/view/base/web/js/grid/columns/column.js.

Source files

Methods and events

The following API methods are available:

  • getFullLabel() - gets a label from a full list of options.
  • getShortLabel() - gets a label from a list of options limited by visibeItemsLimit value.
  • getLabelsArray() - extracts an array of labels associated with provided values and sorts these labels alphabetically.
  • isExpandable() - checks if the amount of options associated with a record is greater than a visibeItemsLimit value.
  • flatOptions() - transforms the tree options structure to a linear array.