Magento 2 Ui Component resizeDefaultWidth not working

Question

I'm building out an admin ui with the built in components, and i have an actionsColumn that i'm using. The label of the said actionsColumn is long, and i want the layout to not wrap the words, so i'm using the config that i see all over the core core (i.e. - vendor/magento/module-search/view/adminhtml/ui_component/search_synonyms_grid.xml) to do this:

<actionsColumn name="actions" class="Vendor\Namespace\Ui\Component\Grid\Amazon\Account\Menu\Delete">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="resizeEnabled" xsi:type="boolean">true</item>
            <item name="resizeDefaultWidth" xsi:type="string">107</item>
            <item name="indexField" xsi:type="string">account_id</item>
            <item name="sortOrder" xsi:type="number">50</item>
            <item name="label" xsi:type="string" translate="true">Delete Action</item>
        </item>
    </argument>
</actionsColumn> 

But no matter what value i place in the resizeDefaultWidth node i get the same size in the final layout (i have 107 in there now, as i see this all over core code but any value in there give the same result).

One thing i have noticed, it that on page load, before the content is loaded, the label area is bigger then after the page content is loaded. I know a lot of voodoo is going on there, which is why i think resizeEnabled need to be false.

Also the sortOrder seems to not be working either. Which might be a default of actionsColumn as they are suppose to be at the end of the grid (i'm making the assumption that if i had 3 action column, that the sort order with sort those three).

An ideas out there? Is this a bug in M2? or is there a config that i'm missing here?

Answer 1

I can explain the sort order problem.
Took me 2 hours to find it some time ago.
The grids built with ui-components have their settings stored in the table ui_bookmark.
Even if you don't change anything in the grid, just by viewing it, you get a record in the table ui_bookamrk.
THe grid is rendered based on what the row in this table looks like, merged with the ui component xml.
That's why when you add a new column, you will see it last. Because it first renders what's saved in ui_bookmark.
Clear the contents of that table where user_id = {your admin id}.
If you are on a dev env, just delete everything from that table.

Honestly, I wouldn't be surprised if this fixes your column width problem also.

Answer 2

even though it's a bit late, here is the way how to use resizeDefaultWidth.

Make sure you added the component ColumnsResize : https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/ui-columns-resize.html

On the documentation above, you can see this config :

<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>

Please note that on the rootSelector config, ${ $.columnsProvider } returns undefined for me , and then I had to replace it by ${ $.name } in order to make it works.

Hope it helps.