Magento 2 : Change Admin grid column width

Question

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

• Sukeshini: Did you check here magento.stackexchange.com/questions/76426/…

Answer 1

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.

• Tailtiu: Thank you so fucking much!

Answer 2

it may help just giving you example to use just like in new version of magento used.

<block class="Magento\Backend\Block\Widget\Grid\Column" as="package">
 <arguments>
 <argument name="header" xsi:type="string" translate="true">Design</argument>
 <argument name="type" xsi:type="string">options</argument>
 <argument name="options" xsi:type="options" model="Magento\Framework\View\Design\Theme\Label\Options"/>
 <argument name="width" xsi:type="string">150px</argument>
 <argument name="index" xsi:type="string">design</argument>
 </arguments>
 </block>

you can look width as argument in xml

<argument name="width" xsi:type="string">150px</argument>

Also if you have to follow strict ui components you can use Resize component.

example from source link

<column name="creation_time">
 <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">60</item>
 </item>
 </argument>
</column>

hope it will work for you

• Khoa Truong: This is used for Grid UI component?
• liyakat: ah, can also used devdocs.magento.com/guides/v2.0/ui-components/… resize components
• E.B: Still no change in my column width. :-(
• Vindhuja: I m also facing same issue.Please help.
• liyakat: devdocs.magento.com/guides/v2.0/ui-components/… follow this step by step i am sure you will get it done

Answer 3

You can use resizeDefaultWidth to change column with, required resizeEnabled = false,

Example code here.

<actionsColumn name="actions" class="Magento\Search\Ui\Component\Listing\Column\SynonymActions">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="resizeEnabled" xsi:type="boolean">false</item>
 <item name="resizeDefaultWidth" xsi:type="string">107</item>
 </item>
 </argument>
 </actionsColumn>

Answer 4

I tried all the given answers and no luck.

Then I resolved by adding some css to my output of column data.

<column name="detail_info" class="Vendor\Module\Ui\Component\Listing\Column\DetailInfo">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="label" xsi:type="string" translate="true">Detail Information</item>
 <item name="sortOrder" xsi:type="number">10</item>
 <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
 </item>
 </argument>
 </column>

DetailInfo.php file I wrapped my output to div with some width.

$items['detail_info'] = '<div style="300px">'.$items['detail_info'].'</div>';