Thanks to Atwix for contributing this topic!

ColumnsResize component

The ColumnsResize UI component is an extension for the Columns component. It provides columns resizing functionality.

Options

Option	Description	Type	Default Value
`component`	The path to the component's `.js` file, relative to RequireJS.	String	`Magento_Ui/js/grid/resize`
`rootSelector`	The CSS selector of a table parent element.	String	`${ $.columnsProvider }:.admin__data-grid-wrap`
`tableSelector`	The CSS selector of a table element. The `columnSelector` and `fieldSelector` are children of the table element.	String	`${ $.rootSelector } -> table.data-grid`
`mainTableSelector`	The CSS selector of a main table element. The function of automatically resizing columns after changing the screen size is enabled if the `tableSelector` element is matched to the main table element.	String	`[data-role="grid"]`
`columnSelector`	The CSS selector of a table column element.	String	`${ $.tableSelector } thead tr th`
`fieldSelector`	The CSS selector of a table field element.	String	`${ $.tableSelector } tbody tr td`

Sources files

Extends UiElement:

app/code/Magento/Ui/view/base/web/js/grid/resize.js

Examples

Integration

This is an example of how the ColumnsResize component integrates with the Columns component:

<listing>
    ...
    <columns name="columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="resizeConfig" xsi:type="array">
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/resize</item>
                    <item name="rootSelector" xsi:type="string">${ $.columnsProvider }:.admin__data-grid-wrap</item>
                    <item name="columnsProvider" xsi:type="string">${ $.name }</item>
                </item>
            </item>
        </argument>
        ...
        <column name="entity_id">
            <settings>
                <label translate="true">ID</label>
            </settings>
        </column>
        <column name="title">
            <settings>
                <label translate="true">Title</label>
            </settings>
        </column>
    </columns>
</listing>
Copied to your clipboard
<listing>
    ...
    <columns name="columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="resizeConfig" xsi:type="array">
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/resize</item>
                    <item name="rootSelector" xsi:type="string">${ $.columnsProvider }:.admin__data-grid-wrap</item>
                    <item name="columnsProvider" xsi:type="string">${ $.name }</item>
                </item>
            </item>
        </argument>
        ...
        <column name="entity_id">
            <settings>
                <label translate="true">ID</label>
            </settings>
        </column>
        <column name="title">
            <settings>
                <label translate="true">Title</label>
            </settings>
        </column>
    </columns>
</listing>