How to Create Admin Grid in Magento 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.

Magento 2 Speed & Performance Optimization Services

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

Step 1: First, we need to create “routes.xml” file inside extension the below directory.

app\code\Vendor\Extension\etc\adminhtml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="extension" frontName="extension">
            <module name="Vendor_Extension" />
        </route>
    </router>
</config>

Step 2: After that, we need to create a “menu.xml” file inside the extension in the below directory.

app\code\Vendor\Extension\etc\adminhtml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Vendor_Extension::grid" title="Extension Grid" module="Vendor_Extension" sortOrder="10" parent="Magento_Backend::content" action="extension/grid/index" resource="Vendor_Extension::grid"/>
    </menu>
</config>

Step 3: After that, we need to create the “acl.xml” file inside the extension in the below directory.

app\code\Vendor\Extension\etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Vendor_Extension::grid" title="Extension Grid" sortOrder="10" />
            </resource>
        </resources>
    </acl>
</config>

Step 4: After that, we need to create a “di.xml” file inside the extension in the below directory.

app\code\Vendor\Extension\etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="extension_grid_listing_data_source" xsi:type="string">Vendor\Extension\Model\ResourceModel\Item\Grid\Collection</item>
                <!-- You need to change your Resource Model Name here-->
            </argument>
        </arguments>
    </type>
    <virtualType name="Vendor\Extension\Model\ResourceModel\Item\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
        <arguments>
            <!-- Change Your Table Name Here-->
            <argument name="mainTable" xsi:type="string">extensiondemo_item</argument>
            <argument name="resourceModel" xsi:type="string">Vendor\Extension\Model\ResourceModel\Item</argument>
        </arguments>
    </virtualType>
</config>

hyva theme development

Step 5: After that, we need to create the “extension_grid_index.xml” file inside the extension in the below directory.

app\code\Vendor\Extension\view\adminhtml\layout

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="extension_grid_listing"/>
        </referenceContainer>
    </body>
</page>

Step 6: Lastly, you need to create the “extension_grid_listing.xml” file inside the extension in the below directory.

app\code\Vendor\Extension\view\adminhtml\ui_component

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">extension_grid_listing.extension_grid_listing_data_source</item>
            <item name="deps" xsi:type="string">extension_grid_listing.extension_grid_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">extension_grid_columns</item>
    </argument>

    <dataSource name="extension_grid_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
            <argument name="name" xsi:type="string">extension_grid_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">entity_id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                    <item name="update_url" xsi:type="url" path="mui/index/render"/>
                    <item name="storageConfig" xsi:type="array">
                        <item name="indexField" xsi:type="string">entity_id</item>
                    </item>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
            </item>
        </argument>
    </dataSource>
    <listingToolbar name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sticky" xsi:type="boolean">true</item>
            </item>
        </argument>
        <bookmark name="bookmarks"/>
        <columnsControls name="columns_controls"/>
        <filters name="listing_filters"/>
        <paging name="listing_paging"/>
    </listingToolbar>

    <columns name="extension_grid_columns">
        <column name="entity_id">
            <settings>
                <filter>textRange</filter>
                <label translate="true">ID</label>
                <sorting>asc</sorting>
            </settings>
        </column>

         <column name="name">
            <settings>
                <filter>text</filter>
                <label translate="true">Name</label>
            </settings>
        </column>
    </columns>
</listing>

Hire Magento Programmer

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.

CTA_magento-custom-development

Previous Article

How to Install Magento SUPEE 9767 Version 2 With or Without SSH

Next Article

How to Install Magento SUPEE 8167 With or Without SSH

Write a Comment
  1. Hi,

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

    1. Please check, the code here is updated. This code is used to assign role of the grid.

  2. Hi,

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

  3. Where VendorExtensionGridDataProvider goes from? I didn’t find the declaration.

    1. “item name=”vendor_extension_grid_listing_data_source” xsi:type=”string”
      VendorExtensionModelResourceModelExtensionGridCollection ”
      this line in di.xml means declaration of datasource

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

  4. 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?

  5. 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?

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨