Add Column in Existing Grid in Magento 2

To add a column in an existing grid in magento2, you can follow the following process:

Firstly, create a ui_component XML file with the same name that is used in the existing grid.

/app/code/Webkul/Test/view/adminhtml/ui_component/add_column_example.xml

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="test_attribute_columns">
        <column name="attributename" class="Webkul\Test\Ui\Component\Listing\Column\ShowAttrAction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortable" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string" translate="true">AttributeName</item>
                    <item name="sortOrder" xsi:type="number">1</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Here,
The field “name” of <columns> tag should be the same as used in the existing grid.
The field “class” of <column> tag contains the class name in which we define the values for that column.
Field “label” of <item> tag used for column name which you want to display on heading.
Field “sortOrder” of <item> tag used for sort number for the field.

Now, create app/code/Webkul/Test/Ui/Component/Listing/Column/ShowAttrAction.php

<?php
namespace Webkul\Test\Ui\Component\Listing\Column;
 
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
 
class ShowAttrAction extends Column
{
    /**
     * 
     * @param ContextInterface   $context           
     * @param UiComponentFactory $uiComponentFactory   
     * @param array              $components        
     * @param array              $data              
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }
 
    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $item[$this->getData('name')] = 1;//Value which you want to display
            }
        }
        return $dataSource;
    }
}

Here, $dataSource returns the array which includes values for your field.
$this->getData(‘name’) is the value that you passed in the name field of <column> tag.

After this, your column is visible in the grid.

I hope this blog will help you with Add Columns to the existing grid in Magento 2. You may also check our wide range of best Magento 2 Extensions.

Please reach out to our team via a support ticket if you have any queries.

Try this and if you have any queries then just comment below 🙂