How to Add Action Column in Admin Grid in Magento 2 – The Complete Method

Magento 2 store owners can easily manage the products, customers, orders, and other information through grids. The action column enables you to perform record-specific actions such as deleting or editing.

If you’re looking for a method on how to add action column in admin grid in Magento 2, then you need to fix Magento 2 reset button in grid column and go futher in this blog post written for you!

Magento developers, working on modules, often create custom admin UI grids. These grids can be customized by editing the specific .xml files. Adding the action columns to the admin UI grid in Magento 2 can help the merchant easily manage the records.

In this solution post, find the complete method to add action column to admin UI grid in Magento 2.

Method to Add Action Column in Admin Grid in Magento 2

To add action column to admin UI grid in Magento 2, you can use the ActionColumn component in the .xml file of the respective grid.

Here’s how to do that:

• Open the UI Component file of the grid, which is present at app/code/Vendor/Extension/view/adminhtml/ui_component/{your_grid_file}.xml
• Add the following code inside the <column> tags:
  
  <actionsColumn name="actions" class="Vendor\Extension\Ui\Component\Listing\Column\Actions"> <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 name="indexField" xsi:type="string">id</item> </item> </argument> </actionsColumn>

  1 2 3 4 5 6 7 8 9

  <actionsColumn name="actions" class="Vendor\Extension\Ui\Component\Listing\Column\Actions">     <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 name="indexField" xsi:type="string">id</item>         </item>     </argument> </actionsColumn>

• Now, create Action.php file at app\code\Vendor\Extension\Ui\Component\Listing\Column with the following code:
  
  <?php namespace Vendor\Extension\Ui\Component\Listing\Column; use Magento\Framework\View\Element\UiComponent\ContextInterface; use Magento\Framework\View\Element\UiComponentFactory; use Magento\Ui\Component\Listing\Columns\Column; use Magento\Framework\UrlInterface; class Actions extends Column { const EDIT_PATH = 'extension/folder/controller'; protected $urlBuilder; public function __construct( ContextInterface $context, UiComponentFactory $uiComponentFactory, UrlInterface $urlBuilder, array $components = [], array $data = [] ) { $this->urlBuilder = $urlBuilder; parent::__construct($context, $uiComponentFactory, $components, $data); } public function prepareDataSource(array $dataSource) { if (isset($dataSource['data']['items'])) { foreach ($dataSource['data']['items'] as & $item) { $name = $this->getData('name'); if (isset($item['id'])) { $item[$name]['edit'] = [ 'href' => $this->urlBuilder->getUrl(self::EDIT_PATH, ['id' => $item['id']]), 'label' => __('Edit') ]; } } } return $dataSource; } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

  <?php   namespace Vendor\Extension\Ui\Component\Listing\Column;   use Magento\Framework\View\Element\UiComponent\ContextInterface; use Magento\Framework\View\Element\UiComponentFactory; use Magento\Ui\Component\Listing\Columns\Column; use Magento\Framework\UrlInterface;   class Actions extends Column {     const EDIT_PATH = 'extension/folder/controller';       protected $urlBuilder;       public function __construct(         ContextInterface $context,         UiComponentFactory $uiComponentFactory,         UrlInterface $urlBuilder,         array $components = [],         array $data = []     ) {         $this->urlBuilder = $urlBuilder;         parent::__construct($context, $uiComponentFactory, $components, $data);     }       public function prepareDataSource(array $dataSource)     {         if (isset($dataSource['data']['items'])) {             foreach ($dataSource['data']['items'] as & $item) {                 $name = $this->getData('name');                 if (isset($item['id'])) {                     $item[$name]['edit'] = [                         'href' => $this->urlBuilder->getUrl(self::EDIT_PATH, ['id' => $item['id']]),                         'label' => __('Edit')                     ];                 }             }         }           return $dataSource;     } }

In the above codes, remember to replace Vendor and Extension accordingly.

The first section of the code defines and configures the Action column in the respective UI grid.  The second .php file defines the behavior of the column. In the above example, the prepareDataSource function generates individual links to edit each of the records.

That’s it! I hope the above steps will help you learn how to add action column in admin grid in Magento 2. Likewise you can also add image thumbnail column in Magento 2 admin UI grid.

In case you still have any doubts or queries, feel free to comment. I’d be happy to help you!

Did this solution help you? Share it with your developer friends via social media and spread the knowledge.

Thank You! 🍀