Categories: How ToMagento 2

How to Create Admin Grid in Magento 2

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

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

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

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

Click to rate this post!
[Total: 12 Average: 3.5]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate ?️ Certified Magento Developer?‍?. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.?

View Comments

  • Hi,
    How to join two table in grid ,I was search and tried to implement but getting no data in grid and also I think main_table alise not getting can you explain it step by step, also try with mass deletion

  • Hi,
    This involves creating a table. If I don't need to use a table, how can I declare source to use to populate the table? I mean: part of my module consists of adding a custom attribute to a category. and I want to build an admin grid that lists only the categories which don't have the custom attribute filled in. In this case, the module doesn't need a custom table, it simply fetches the category collection and filter the collection to get only the categories with the custom attribute empty. I have already created a Controller and a Block to fetch the data but how can I pass those data to the grid?

  • Hi,
    This involves creating a table. If I don't need to use a table, how can I declare source to use to populate the table? I mean: part of my module consists of adding a custom attribute to a category. and I want to build an admin grid that lists only the categories which don't have the custom attribute filled in. In this case, the module doesn't need a custom table, it simply fetches the category collection and filter the collection to get only the categories with the custom attribute empty. I have already created a Controller and a Block to fetch the data but how can I pass those data to the grid?

    • "item name="vendor_extension_grid_listing_data_source" xsi:type="string"
      Vendor\Extension\Model\ResourceModel\Extension\Grid\Collection "
      this line in di.xml means declaration of datasource

    • "item name="vendor_extension_grid_listing_data_source" xsi:type="string"
      VendorExtensionModelResourceModelExtensionGridCollection "
      this line in di.xml means declaration of datasource

  • Hi,

    what does the Line:
    return $this->_authorization->isAllowed('Vendor_Extension::grid');
    exactly. What does the Argument Vendor_Extension::grid??

  • Hi,

    what does the Line:
    return $this->_authorization->isAllowed('Vendor_Extension::grid');
    exactly. What does the Argument Vendor_Extension::grid??

Recent Posts

Magento 2: How to Save Custom Field Value to quote_address for Multi-Shipping Orders

Hello Magento Friends, In Magento 2, the checkout process allows customers to choose multiple shipping…

3 hours ago

Best Beginners Guide to Shopify Balance Account

If you are a Shopify admin, using a Shopify Balance Account for your business revenue…

3 hours ago

8 Best Social Login Apps for Shopify Store in 2024

Running an eCommerce business can be incredibly demanding, leaving entrepreneurs little time to focus on…

3 hours ago

Generating Thumbnails with Spatie Media Library in Laravel 11: A Step-by-Step Guide

Generating image thumbnails is a common requirement in web applications, especially when handling media-heavy content.…

1 day ago

Enhancing Web Application Security with Laravel’s Built-In Features

In today’s digital landscape, web application security is paramount. As a powerful PHP framework, Laravel…

2 days ago

Magento 2 Extensions Digest October 2024 (New Release & Updates)

October was an exciting month for MageComp! From significant updates across our Magento 2 extension…

2 days ago