The Ultimate Guide to Creating the Best Grid in Magento of 2023

The Ultimate Guide to Creating the Best Grid in Magento of 2022

Introduction

Welcome to the ultimate guide on creating the best grid in Magento, tailored for 2023. This comprehensive guide will walk you through creating an exceptional grid layout for your Magento website. A well-designed grid is crucial for effectively organizing and displaying your products or content, leading to a seamless user experience.

Throughout this guide, we will provide you with valuable insights, tips, and techniques to optimize your grid layout. You will learn how to customize the grid to align with your brand's aesthetics and improve user engagement. We will cover various aspects, including grid configuration, column management, sorting options, filtering capabilities, and responsive design.

This guide will give you the knowledge and skills necessary to create a visually appealing and highly functional grid in Magento. Whether you're an experienced Magento user or a beginner, this guide will empower you to elevate your website's grid to the next level and provide an exceptional browsing experience for your customers in 2023. Let's dive in and create the best grid for your Magento website!

Create Vendor & Module directory for create module

(1) Create Vendor & Module directory as follow :

-> app/code/Elightwalk/CustomGrid

(2) Create a registration.php file at the following location:

-> app/code/Elightwalk/CustomGrid/registration.php

php

\Magento\Framework\Component\ComponentRegistrar::register(
  \Magento\Framework\Component\ComponentRegistrar::MODULE,
  'Elightwalk_CustomGrid',
  __DIR__
);

(3) Create a module.xml file at the following location:

-> app/code/Elightwalk/CustomGrid/etc/module.xml

xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="Elightwalk_CustomGrid" setup_version="1.0.0">
         
  </module>
</config>

Add the Magento core modules you want to load in the <sequence> element before the current module.

(4) Create a routes.xml file at the following location:

-> app/code/Elightwalk/CustomGrid/etc/adminhtml

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="elightwalk_customgrid" frontName="elightwalk_customgrid">
           <module name="Elightwalk_CustomGrid"/>
       </route>
   </router>
</config>

Run the following command using the command line interface from the Magento root directory to enable the module:

php bin/magento setup:upgrade

Run the following command to check your module enable or disable

php bin/magento module:status

If your module is disable try below cmd

php bin/magento module:enable Elightwalk_CustomGrid

then

php bin/magento setup:upgrade
php bin/magento setup:di:compile

Create database schema

(5) Create InstallData.php file at the following location:

-> app/code/Elightwalk/CustomGrid/Setup/InstallData.php

php

<?php
namespace Elightwalk\CustomGrid\Setup;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
class InstallData implements \Magento\Framework\Setup\InstallDataInterface
{
      public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{
      $installer = $setup;
      $installer->startSetup();
      if (!$installer->tableExists('elightwalk_custom_grid')) {
             $table = $installer->getConnection()->newTable(
                    $installer->getTable('elightwalk_custom_grid')
             )
                    ->addColumn(
                           'id',
                           \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
                           null,
                           [
                                  'identity' => true,
                                  'nullable' => false,
                                  'primary'  => true,
                                  'unsigned' => true,
                              ],
                              'ID'
                          )
                          ->addColumn(
                                 'contact_number',
                                 \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
                                 255,
                                 ['nullable => false'],
                                 'Contact_Number'
                        )
                                    ->addColumn(
                                    'email',
                                       \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
                                       255,
                                       ['nullable => false'],
                                       'Email'
                          )
                                ->setComment('CustomerInfo Table');
                   $installer->getConnection()->createTable($table);
            }
            $installer->endSetup();
      }
}

Create UpgradeSchema.php file for upgrade data

(6) Create an UpgradeSchema.php file at the following location:

-> app/code/Elightwalk/CustomGrid/Setup/UpgradeSchema.php

UpgradeSchema - this class will run when the module is upgraded to set up the database structure

when you create an upgrade schema, remember that change version in module.xml every time and then give setup: upgrade cmd in module.xml file change version like 1.1,1.2

<?xml version="1.0"?>

and give below cmd

php bin/magento setup:upgrade

php bin/magento setup:di:compile

Remember that give cmd after finishing all steps

php

<?php
namespace Elightwalk\CustomGrid\Setup;
use Magento\Framework\Setup\UpgradeSchemaInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\Setup\ModuleContextInterface;
class UpgradeSchema implements UpgradeSchemaInterface
{
            public function upgrade(SchemaSetupInterface $setup, ModuleContextInterface $context)
            {
                         $installer->startSetup();
                        if (version_compare($context->getVersion(), '1.3.1', '<')) {
                                    $installer->getConnection()->addColumn(
                                                $installer->getTable('elightwalk_custom_grid'),
                                                'productid',
                                                [
                                                            'nullable' => true,
                                                            'comment' => 'test',
                                                            'after' => 'id'
                                                ]
                                    );
                        }
                        $installer->endSetup();
            }
}

(7) Create an Index.php file at the following location:

-> app/code/Elightwalk/CustomGrid/Controller/Adminhtml/CustomerInfo/Index.php

php

<?php
namespace Elightwalk\CustomGrid\Controller\Adminhtml\CustomerInfo;
use Elightwalk\CustomGrid\Model\DataExampleFactory;
use Magento\Framework\Controller\ResultFactory;
use Magento\Framework\App\Action\Context;
class Index extends \Magento\Backend\App\Action
{
             protected $_dataExample;
             protected $resultRedirect;
             protected $resultPageFactory = false;
             public function __construct(\Magento\Backend\App\Action\Context $context,
             \Elightwalk\CustomGrid\Model\CustomerInfoFactory $dataExample,
             \Magento\Framework\Controller\ResultFactory $result,
             \Magento\Framework\View\Result\PageFactory $resultPageFactory)
             {
                          parent::__construct($context);
                          $this->_dataExample = $dataExample;
                          $this->resultRedirect = $result;
                          $this->resultPageFactory = $resultPageFactory;
             }
             public function execute(){
                          $resultRedirect = $this->resultRedirect->create(ResultFactory::TYPE_REDIRECT);
                          $resultRedirect->setUrl($this->_redirect->getRefererUrl());
                          $model = $this->_dataExample->create();
                          $model->addData([
                                       "id" => 3,
                                        "productid" => 4,
                                       "contact_number" => '890765',
                                       "email" => 'as@hm.com'
                          ]);
                          $saveData = $model->save();
                          if($saveData){
                                       $this->messageManager->addSuccess( __('Insert Record Successfully !') );
                          }
                          $resultPage = $this->resultPageFactory->create();
                          $resultPage->getConfig()->getTitle()->prepend((__('CustomerInfo')));
                          return $resultPage;
                          }
             } 
?>

(8) Create a di.xml file at the following location:

-> app/code/Elightwalk/CustomGrid/etc/di.xml

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="elightwalk_custom_grid_listing_data_source" xsi:type="string">Elightwalk\CustomGrid\Model\ResourceModel\CustomerInfo\Grid\Collection</item>
           </argument>
       </arguments>
   </type>
   <virtualType name="Elightwalk\CustomGrid\Model\ResourceModel\CustomerInfo\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
       <arguments>
           <argument name="mainTable" xsi:type="string">mageplaza_helloworld_post</argument>
           <argument name="resourceModel" xsi:type="string">Mageplaza\HelloWorld\Model\ResourceModel\Post</argument>
       </arguments>
   </virtualType>
</config>

(9) Create a menu.xml file for given path at the following location:

-> app/code/Elightwalk/CustomGrid/etc/menu.xml

xml

<?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="Elightwalk_CustomGrid::customerinfo" title="CustomerInfo" module="Elightwalk_CustomGrid" sortOrder="10" action="elightwalk_customgrid/customerinfo" resource="Elightwalk_CustomGrid::customerinfo" parent="Elightwalk_Core::Elightwalk"/>
   </menu>
</config>

(10) For the action elightwalk_customgrid/post/index, we will create a file name elightwalk_customgrid_customerinfo_index.xml

-> app/code/Elightwalk/CustomGrid/view/adminhtml/layout/elightwalk_customgrid_customerinfo_index.xml

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="elightwalk_custom_grid_listing"/>
       </referenceContainer>
   </body>
</page>

(11) declaration in the layout file, we will create a component file elightwalk_custom_grid_listing.xml

-> app/code/Elightwalk/CustomGrid/view/adminhtml/ui_component/elightwalk_custom_grid_listing.xml

xml

<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">elightwalk_custom_grid_listing.elightwalk_custom_grid_listing_data_source</item>
           <item name="deps" xsi:type="string">elightwalk_custom_grid_listing.elightwalk_custom_grid_listing_data_source</item>
       </item>
       <item name="spinner" xsi:type="string">elightwalk_custom_grid_columns</item>
       <item name="buttons" xsi:type="array">
           <item name="add" xsi:type="array">
               <item name="name" xsi:type="string">add</item>
               <item name="label" xsi:type="string" translate="true">Add Data</item>
               <item name="class" xsi:type="string">primary</item>
               <item name="url" xsi:type="string">*/*/add</item>
           </item>
       </item>
   </argument>
   <dataSource name="elightwalk_custom_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">elightwalk_custom_grid_listing_data_source</argument>
           <argument name="primaryFieldName" xsi:type="string">id</argument>
           <argument name="requestFieldName" xsi:type="string">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">id</item>
                   </item>
               </item>
           </argument>
       </argument>
   </dataSource>
   <columns name="elightwalk_custom_grid_columns">
       <selectionsColumn name="ids">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="resizeEnabled" xsi:type="boolean">false</item>
                   <item name="resizeDefaultWidth" xsi:type="string">55</item>
                   <item name="indexField" xsi:type="string">id</item>
               </item>
           </argument>
       </selectionsColumn>
       <column name="id">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">textRange</item>
                   <item name="sorting" xsi:type="string">asc</item>
                   <item name="label" xsi:type="string" translate="true">ID</item>
               </item>
           </argument>
       </column>
       <column name="productid">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">textRange</item>
                   <item name="sorting" xsi:type="string">asc</item>
                   <item name="label" xsi:type="string" translate="true">ProductId</item>
               </item>
           </argument>
       </column>
       <column name="contact_number">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">text</item>
                   <item name="editor" xsi:type="array">
                       <item name="editorType" xsi:type="string">text</item>
                       <item name="validation" xsi:type="array">
                           <item name="required-entry" xsi:type="boolean">true</item>
                       </item>
                   </item>
                   <item name="label" xsi:type="string" translate="true">ContactNumber</item>
               </item>
           </argument>
       </column>
       <column name="email">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">text</item>
                   <item name="editor" xsi:type="array">
                       <item name="editorType" xsi:type="string">text</item>
                       <item name="validation" xsi:type="array">
                           <item name="required-entry" xsi:type="boolean">true</item>
                       </item>
                   </item>
                   <item name="label" xsi:type="string" translate="true">Email</item>
               </item>
           </argument>
       </column>
       <actionsColumn name="actions" class="Elightwalk\CustomGrid\Ui\Component\Listing\Column\Actions">
           <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
                   <item name="resizeEnabled" xsi:type="boolean">false</item>
                   <item name="resizeDefaultWidth" xsi:type="string">107</item>
                   <item name="indexField" xsi:type="string">id</item>
               </item>
           </argument>
       </actionsColumn>
   </columns>
</listing>

(12) Create a collection.php file

-> app/code/Elightwalk/CustomGrid/Model/ResourceModel/CustomerInfo/Collection.php

php

<?php
namespace Elightwalk\CustomGrid\Model\ResourceModel\CustomerInfo;
class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection
{
protected $_idFieldName = 'id';
protected $_eventPrefix = 'elightwalk_customgrid_customerinfo_collection';
protected $_eventObject = 'customerinfo_collection';
      /**
      * Define resource model
      *
      * @return void
      */
      protected function _construct()
      {
           $this->_init('Elightwalk\CustomGrid\Model\CustomerInfo', 'Elightwalk\CustomGrid\Model\ResourceModel\CustomerInfo');
      }
}

(13) Create CustomerInfo.php file

-> app/code/Elightwalk/CustomGrid/Model/ResourceModel/CustomerInfo.php

php

<?php
namespace Elightwalk\CustomGrid\Model\ResourceModel;
class CustomerInfo extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
{
          public function __construct(
                    \Magento\Framework\Model\ResourceModel\Db\Context $context
          )
          {
                    parent::__construct($context);
          }
          protected function _construct()
          {
                    $this->_init('elightwalk_custom_grid','id');
          }
}

(14) Create CustomerInfo.php file

-> app/code/Elightwalk/CustomGrid/CustomerInfo.php

namespace Elightwalk\CustomGrid\Model;
class CustomerInfo extends \Magento\Framework\Model\AbstractModel implements \Magento\Framework\DataObject\IdentityInterface
{
          const CACHE_TAG = 'elightwalk_custom_grid';
          protected $_cacheTag = 'elightwalk_custom_grid';
          protected $_eventPrefix = 'elightwalk_custom_grid';
          protected function _construct()
          {
                    $this->_init('Elightwalk\CustomGrid\Model\ResourceModel\CustomerInfo');
          }
          public function getIdentities()
          {
                    return [self::CACHE_TAG . '_' . $this->getId()];
          }
          public function getDefaultValues()
          {
                    $values = [];
                    return $values;
          }
}

Email send us at hello@elightwalk.com

Table of contents

Jayram Prajapati

Full Stack Developer

Jayram Prajapati brings expertise and innovation to every project he takes on. His collaborative communication style, coupled with a receptiveness to new ideas, consistently leads to successful project outcomes.

Most Visited Blog

Blog

Difference between the Varnish and Redis cache in Magento performance?

In Magento Cache Management, both Redis and Varnish are used to improve your website's performance and scalability. Let's check together their areas of improvement in the Magento website performance.

Blog

Unlock The Power Of Plugins In Magento 2: A Comprehensive Guide

Get started on utilizing Magento 2 plugins with our comprehensive tutorial. Master the art of plugin building and integration to improve the functionality and customization of your e-commerce shop.

Blog

The Ultimate Guide to Creating the Best Grid in Magento of 2022

Dive into the guide to creating an excellent Magento grid in 2022. Discover professional insights, strategies, and tactics for improving the grid design and functioning of an e-commerce platform for a better user experience.