7

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

1

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

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.