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

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

• <Magento_Ui_module_dir>/view/base/web/js/grid/columns/expandable.js
• <Magento_Ui_module_dir>/view/base/web/templates/grid/cells/expandable.html
• <Magento_Ui_module_dir>/view/base/web/templates/grid/cells/expandable/content.html

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.