Magento 2 Custom Admin Grids

📊 Magento 2 Custom Admin Grids – Display Data in Backend

Want to show a list of your custom entity records in the Magento admin panel? You need a custom admin grid. Magento 2 provides a powerful UI component system that helps you display data with filters, sorting, actions, and even inline editing.

🎯 What We’ll Build

We’ll create a grid to list all “Notices” added via our custom module, with columns like ID, Title, Status, and Actions (Edit/Delete).

🗂 Folder Structure Overview

app/code/Vendor/AdminGrid/
├── view/adminhtml/ui_component/notice_listing.xml
├── Controller/Adminhtml/Notice/Index.php
├── view/adminhtml/layout/notice_index.xml
├── Model/ResourceModel/Notice/Collection.php
├── registration.php, module.xml

🔧 Example: UI Component Grid XML

This file defines the structure and behavior of the grid.


<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">notice_listing.notice_listing_data_source</item>
            <item name="deps" xsi:type="string">notice_listing.notice_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">notice_columns</item>
    </argument>

    <dataSource name="notice_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\AdminGrid\Model\Notice\DataProvider</argument>
            <argument name="name" xsi:type="string">notice_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
        </argument>
    </dataSource>

    <columns name="notice_columns">
        <column name="id">
            <settings>
                <label translate="true">ID</label>
                <sortable>true</sortable>
            </settings>
        </column>
        <column name="title">
            <settings>
                <label translate="true">Title</label>
                <sortable>true</sortable>
            </settings>
        </column>
        <column name="status">
            <settings>
                <label translate="true">Status</label>
                <options>
                    <option name="1" xsi:type="array">
                        <item name="value" xsi:type="number">1</item>
                        <item name="label" xsi:type="string">Enabled</item>
                    </option>
                    <option name="0" xsi:type="array">
                        <item name="value" xsi:type="number">0</item>
                        <item name="label" xsi:type="string">Disabled</item>
                    </option>
                </options>
            </settings>
        </column>
    </columns>

</listing>

Try It Now

🧠 Controller for Grid Page

/* File: Controller/Adminhtml/Notice/Index.php */
namespace Vendor\AdminGrid\Controller\Adminhtml\Notice;

use Magento\Backend\App\Action;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action
{
    protected $resultPageFactory;

    public function __construct(Action\Context $context, PageFactory $resultPageFactory)
    {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->setActiveMenu('Vendor_AdminGrid::notice');
        $resultPage->getConfig()->getTitle()->prepend(__('Notices'));
        return $resultPage;
    }
}

Try It Now

📦 Layout File


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>
        <referenceContainer name="content">
            <uiComponent name="notice_listing"/>
        </referenceContainer>
    </body>

</page>

Try It Now

📋 Data Provider for Grid

/* File: Model/Notice/DataProvider.php */
namespace Vendor\AdminGrid\Model\Notice;

use Magento\Ui\DataProvider\AbstractDataProvider;

class DataProvider extends AbstractDataProvider
{
    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        \Vendor\AdminGrid\Model\ResourceModel\Notice\CollectionFactory $collectionFactory,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $collectionFactory->create();
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }

    public function getData()
    {
        return ['items' => $this->collection->getItems(), 'totalRecords' => $this->collection->getSize()];
    }
}

Try It Now

✅ Summary

  • Magento 2 Admin Grids are based on UI Components
  • They require XML for layout and UI definition
  • Controllers, layout XML, and data providers link everything

Admin grids are perfect for managing and listing data quickly in Magento’s backend. You can add mass actions, export options, and filters too!