How to Create Admin Grid in Magento 2

Dhiren Vasoya

7 years ago

Magento grid is a table which is responsible for listing database items to display in a managed way. This grid avails the feature to sorting, filtering and updating data items as per the requirements of admin users. There are many default grids available in Magento 2 like product grid, order grid, review grid etc. But sometimes you require to create a custom grid to manage and show database items of your custom module. This requires to custom code to create an admin grid in Magento 2.

There are 2 ways to create admin grid in Magento 2: using layout and using component. Here I will show you both the methods to create grid and use it in your module.

Create Admin Grid using Component

First of all, you have to create xml file according to your action given in Admin Menu. For example, here I have set action like extension/demo/grid.Create file here: app/code/Vendor/Extension/view/adminhtml/layout/extension_demo_grid.xml
```
    
    
        
            
        
    
```
In layout file, declare an uiComponent for content of the page.

Now you need to create component file declared in above step.
Put the code from extension_demo_grid_listing.xml file in app/code/Vendor/Extension/view/adminhtml/ui_component/extension_demo_grid_listing.xmlNow we have to create di.xml for dataprovider to ui component: app/code/Vendor/Extension/etc/di.xml


    
        
            mc_grid_data
            Vendor\Extension \Model\ResourceModel\Extension
        
    

    
        
            
                 Vendor\Extension\Model\ResourceModel\Extension\Grid\Collection

Create Admin Grid using Layout

First step is to create Controller Action File: app/code/Vendor/Extension/Controller/Adminhtml/Demo/Grid.php

You will need a layout file to connect with Grid Block and render the grid.
Create extension_demo_grid.xml file at app/code/Vendor/Extension/view/adminhtml/layout/extension_demo_grid.xml

Note: You need to create model and ResourceModel for your extension prior to implementing this. Also
you need to add code in xml to add other fields.

Creating admin grid in Magento 2 is not rocket science but it needs proper and streamlined coding. After implementing above code, your admin grid will get ready. Let me know if you have any query, I’ll be glad to help you. Your feedback and suggestions are awaited through commenting. Till then, Happy Coding.