Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Add Column in existing grid in magento2

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

    Firstly, create ui_component xml file with the same name which is used in existing grid.


    <listing xmlns:xsi="" 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>

    Field “name” of <columns> tag should be same which used be existing grid.
    Field “class” of <column> tag contains 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 field.

    Now, create app/code/Webkul/Test/Ui/Component/Listing/Column/ShowAttrAction.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 which you passed in name field of <column> tag.

    After this, your column is visible in grid.

    Thank you.

    . . .


    Add Your Comment

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again