ColumnsResize component | Magento 2 Developer Documentation

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

Configuration 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

Integrate the ColumnsResize component with the Columns component

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>

Result

ColumnsResize Component example