ExpandableColumn component

The ExpandableColumn 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.

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`
`component`	The path to the component’s `.js` file in terms of RequireJS.	String	`Magento_Ui/js/grid/columns/expandable`
`tooltipTitle`	A title for the tooltip.	String	`''`
`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`

Examples

Integration

The following example shows how the Expandable component integrates with the Listing component:

The component's options are set in the configuration .xml file as follows:

<listing>
    ...
    <columns>
        ...
        <column name="labels" class="Magento\Ui\Component\MassAction\Columns\Column">
            <argument name="data" xsi:type="array">
                <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">2</item>
                    <item name="options" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="value" xsi:type="number">1</item>
                            <item name="label" xsi:type="string" translate="true">Option #1</item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="value" xsi:type="number">2</item>
                            <item name="label" xsi:type="string" translate="true">Option #2</item>
                        </item>
                        <item name="2" xsi:type="array">
                            <item name="value" xsi:type="number">3</item>
                            <item name="label" xsi:type="string" translate="true">Option #3</item>
                        </item>
                    </item>
                </item>
            </argument>
            <settings>
                <label translate="true">Expandable Column Component Example</label>
            </settings>
        </column>
    </columns>
</listing>
Copied to your clipboard
<listing>
    ...
    <columns>
        ...
        <column name="labels" class="Magento\Ui\Component\MassAction\Columns\Column">
            <argument name="data" xsi:type="array">
                <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">2</item>
                    <item name="options" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="value" xsi:type="number">1</item>
                            <item name="label" xsi:type="string" translate="true">Option #1</item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="value" xsi:type="number">2</item>
                            <item name="label" xsi:type="string" translate="true">Option #2</item>
                        </item>
                        <item name="2" xsi:type="array">
                            <item name="value" xsi:type="number">3</item>
                            <item name="label" xsi:type="string" translate="true">Option #3</item>
                        </item>
                    </item>
                </item>
            </argument>
            <settings>
                <label translate="true">Expandable Column Component Example</label>
            </settings>
        </column>
    </columns>
</listing>

Result

Expandable Component example Expandable Component expanded example

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.