Adobe Commerce 2.3 reached end of support in September 2022.

ColumnsResize component

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:

Examples

Integrate the ColumnsResize component with the Columns component

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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