Magento2 How To Create Custom Admin Grid

Admin grids are used to represent, filter and sort various data in the Magento backend. Magento 2 Grid is a kind of table which provides listing of data items present in your database table and provides you some features like: sort, filter, delete, update item, etc.

Magento 2 provide two ways to create Admin Grid: using layout and using component. We will find out the detail for both of them. I will use the sample module Magemeta_Grid with some demo data:

To Create Admin Grid:

Step 1: Create database schema

Database: We will use a simple database

app/code/Magemeta/Grid/Setup/InstallSchema.php

Let put this content for this file to create above table:

<?php

namespace Magemeta/Grid/Setup;

class InstallSchema implements /Magento/Framework/Setup/InstallSchemaInterface
{

	public function install(/Magento/Framework/Setup/SchemaSetupInterface $setup, /Magento/Framework/Setup/ModuleContextInterface $context)
	{
		$installer = $setup;
		$installer->startSetup();
		if (!$installer->tableExists('magemeta_grid_post')) {
			$table = $installer->getConnection()->newTable(
				$installer->getTable('magemeta_grid_post')
			)
				->addColumn(
					'post_id',
					/Magento/Framework/DB/Ddl/Table::TYPE_INTEGER,
					null,
					[
						'identity' => true,
						'nullable' => false,
						'primary'  => true,
						'unsigned' => true,
					],
					'Post ID'
				)
				->addColumn(
					'name',
					/Magento/Framework/DB/Ddl\Table::TYPE_TEXT,
					255,
					['nullable => false'],
					'Post Name'
				)
				->addColumn(
					'url_key',
					/Magento/Framework/DB/Ddl/Table::TYPE_TEXT,
					255,
					[],
					'Post URL Key'
				)
				->addColumn(
					'post_content',
					/Magento/Framework/DB/Ddl/Table::TYPE_TEXT,
					'64k',
					[],
					'Post Post Content'
				)
				->addColumn(
					'tags',
					/Magento/Framework/DB/Ddl/Table::TYPE_TEXT,
					255,
					[],
					'Post Tags'
				)
				->addColumn(
					'status',
					/Magento/Framework/DB/Ddl/Table::TYPE_INTEGER,
					1,
					[],
					'Post Status'
				)
				->addColumn(
					'featured_image',
					/Magento/Framework/DB/Ddl/Table::TYPE_TEXT,
					255,
					[],
					'Post Featured Image'
				)
				->addColumn(
					'created_at',
					/Magento/Framework/DB\Ddl/Table::TYPE_TIMESTAMP,
					null,
					['nullable' => false, 'default' => /Magento/Framework/DB/Ddl/Table::TIMESTAMP_INIT],
					'Created At'
				)->addColumn(
					'updated_at',
					/Magento/Framework/DB/Ddl/Table::TYPE_TIMESTAMP,
					null,
					['nullable' => false, 'default' => /Magento/Framework/DB/Ddl/Table::TIMESTAMP_INIT_UPDATE],
					'Updated At')
				->setComment('Post Table');
			$installer->getConnection()->createTable($table);

			$installer->getConnection()->addIndex(
				$installer->getTable('mageplaza_helloworld_post'),
				$setup->getIdxName(
					$installer->getTable('mage_helloworld_post'),
					['name', 'url_key', 'post_content', 'tags', 'featured_image'],
					/Magento/Framework/DB/Adapter/AdapterInterface::INDEX_TYPE_FULLTEXT
				),
				['name', 'url_key', 'post_content', 'tags', 'featured_image'],
				/Magento/Framework/DB/Adapter/AdapterInterface::INDEX_TYPE_FULLTEXT
			);
		}
		$installer->endSetup();
	}
}

Step 2: Create routes admin:

File: app/code/Magemeta/Grid/etc/adminhtml/routes.xml

<?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="magemeta_grid" frontName="magemeta_grid">
            <module name="Magemeta_Grid"/>
        </route>
    </router>
</config>

Admin menu/Route: we will use the route mage_helloworld for our admin page and the menu link to:

magemeta_grid/post/index

Step 4: Create Controller

Create controller file called index.php

app/code/Magemeta/Grid/Controller/Adminhtml/Post/Index.php

<?php

namespace Magemeta/Grid/Controller/Adminhtml/Post;

class Index extends /Magento/Backend/App/Action
{
	protected $resultPageFactory = false;

	public function __construct(
		/Magento/Backend/App/Action/Context $context,
		/Magento/Framework/View/Result/PageFactory $resultPageFactory
	)
	{
		parent::__construct($context);
		$this->resultPageFactory = $resultPageFactory;
	}

	public function execute()
	{
		$resultPage = $this->resultPageFactory->create();
		$resultPage->getConfig()->getTitle()->prepend((__('Posts')));

		return $resultPage;
	}


}

Step 5:

Method #1 – Create Admin Grid using Component

Step 5.1: Declare resource

Now we will create di.xml file which will connect to the Model to get the data for our grid.

File: app/code/Magemeta/Grid/etc/di.xml

<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="magemeta_grid_post_listing_data_source" xsi:type="string">Magemeta/Grid/Model/ResourceModel/Post/Grid/Collection</item>
            </argument>
        </arguments>
    </type>
    <virtualType name="Magemeta/Grid/Model/ResourceModel/Post/Grid/Collection" type="Magento/Framework/View/Element/UiComponent/DataProvider/SearchResult">
        <arguments>
            <argument name="mainTable" xsi:type="string">magemeta_grid_post</argument>
            <argument name="resourceModel" xsi:type="string">Magemeta/Grid/Model/ResourceModel/Post</argument>
        </arguments>
    </virtualType>
</config>

The above code will declare the post collection class, table and resourceModel for the table. This source will be called in the layout file to get data for grid.

Step 5.2: Create layout file

For the action magemeta_grid/post/index, It will create layout file name magemeta_grid_post_index.xml

File: app/code/Magemeta/Grid/view/adminhtml/layout/magemeta_grid_post_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="magemeta_grid_post_listing"/>
        </referenceContainer>
    </body>
</page>

In above layout file, we declare an uiComponent for the content of this page.