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:

1
2
3
4
5
6
7
8
9
10
<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>
        </item>
    </argument>
</column>

Dependencies

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.