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
<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 byvisibeItemsLimitvalue.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 avisibeItemsLimitvalue.flatOptions()- transforms the tree options structure to a linear array.
