Magento – Magento 2 : Change Admin grid column width

columngridmagento2

I have added an admin grid using UI component in my custom module. Now I want to change the column width of admin grid.

This is the code that I am using for adding column in admin grid :

 <column name="product_title">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="editor" xsi:type="array">
                <item name="editorType" xsi:type="string">text</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
            <item name="filter" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Title</item>
            <item name="sortOrder" xsi:type="number">20</item>
        </item>
    </argument>
</column>

Please Help me

Best Answer

At the moment on Magento 2.3.2 the only working solution requires adding configuration in 2 peaces in List (Grid) UI component:

  1. Setup resizeConfig for columns config.
  2. Setup resizeDefaultWidth for specific column.
  3. Setup resizeEnabled for specific column (optional).

Here is an example:

<?xml version="1.0" encoding="UTF-8"?>    
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
    <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><!-- This is required configuration -->
                </item>
            </item>
        </argument>
        <column name="column_name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="resizeEnabled" xsi:type="boolean">false</item><!-- "true" allows admin user to change column width (default value); "false" - disallows admin user to change column width -->
                    <item name="resizeDefaultWidth" xsi:type="number">100</item><!-- needed column width in pixels -->
                </item>
            </argument>
        </column>
    </columns>
</listing>

The answer why this works only in the way I've described is in JS function initResize.