In Magento admin grid can be created in two ways. One is using layout and another way is to use componenet.
Here I will explain grid creation using component.
Click here to read grid creation using layout.
Follow the below steps to create admin grid using component.
Step 1: Create database schema
Step 2: Create routes admin
Step 3: Create admin menu
Step 4: Create Controller
Step 5: Declare resource
Step 6: Create layout file
Step 7: Create component layout file
Step 8: Create a listing toolbar
Step 9: Create a Bookmark
Step 10: Column controls
Step 11: Full text search
Step 12: Filter
Step 13: Mass actions
Step 14: Paging
Step 15: Export button
Step 16: Flush Cache
Step 1: Create database schema
Read CRUD Models in Magento 2 to understand how to create database schema .
Step 2: Create routes admin
Create a file: app/code/PHPCodez/First/etc/adminhtml/routes.xml and insert the following code
<?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="phpcodez_first" frontName="phpcodez_first"> <module name="PHPCodez_First"/> </route> </router> </config>
Step 3: Create admin menu
Read Magento 2 Create Admin Menu for more details.
Step 4: Create Controller
Please read Create Controller Magento 2 article for the detail.
Create controller file app/code/PHPCodez/First/Controller/Adminhtml/Post/Index.php and insert the following content.
<?php
namespace PHPCodez\First\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: Declare resource
Declare resource in dependency injection file Now we will create di.xml file which will connect to the Model to get the data for our grid.
File: app/code/PHPCodez/First/etc/di.xml With the following content:
<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="phpcodez_first_post_listing_data_source" xsi:type="string">PHPCodez\First\Model\ResourceModel\Post\Grid\Collection</item> </argument> </arguments> </type> <virtualType name="PHPCodez\First\Model\ResourceModel\Post\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult"> <arguments> <argument name="mainTable" xsi:type="string">phpcodez_post</argument> <argument name="resourceModel" xsi:type="string">PHPCodez\First\Model\ResourceModel\Post</argument> </arguments> </virtualType> </config>
This file 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 6: Create layout file
For the action phpcodez_first/post/index, we will create a layout file name phpcodez_first_post_index.xml
File: app/code/PHPCodez/First/view/adminhtml/layout/phpcodez_first_post_index.xml with the following content:
<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="phpcodez_first_post_listing"/> </referenceContainer> </body> </page>
In this layout file, we declare an uiComponent for the content of this page
Step 7: Create component layout file
As declaration in layout file, we will create a component file phpcodez_first_post_listing.xml
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml with the following content:
<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">phpcodez_first_post_listing.phpcodez_first_post_listing_data_source</item> <item name="deps" xsi:type="string">phpcodez_first_post_listing.phpcodez_first_post_listing_data_source</item> </item> <item name="spinner" xsi:type="string">spinner_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 New Post</item> <item name="class" xsi:type="string">primary</item> <item name="url" xsi:type="string">*/*/new</item> </item> </item> </argument> <dataSource name="nameOfDataSource"> <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">phpcodez_first_post_listing_data_source</argument> <argument name="primaryFieldName" xsi:type="string">post_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">post_id</item> </item> </item> </argument> </argument> </dataSource> <columns name="spinner_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">post_id</item> </item> </argument> </selectionsColumn> <column name="post_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="name"> <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">Name</item> </item> </argument> </column> <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">dateRange</item> <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item> <item name="dataType" xsi:type="string">date</item> <item name="label" xsi:type="string" translate="true">Created</item> </item> </argument> </column> </columns> </listing>
With this code, you will know how to declare Grid layout (button, columns), call data source.
Step 8: Create a listing toolbar
As I said on the top of this page, the Magento 2 Grid will support some actions to interact with grid like: sort, filter, action delete/update etc. The sort feature is a default action for the grid. You can click on the column header to sorting the items. We will find out how to built the other features for our grid.
Prepare for this, we will create a listing toolbar element under the parent listing in the component layout file:
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml
<?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"> <!-- ... other block of code --> <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> </listingToolbar> <!-- ... other block of code --> </listing>
Step 9: Create a Bookmark
This argument is used to define the template Magento/Ui/view/base/web/templates/grid/toolbar.html which will be loaded to define the knockout js for handling all ajax update action in this grid. We will define above features inside of this container. You can place this container element before or after the columns element to define the position of the toolbar (above or below the columns). Let’s see the detail for each action: Bookmark
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml
<?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"> <!-- ... other block of code --> <listingToolbar name="listing_top"> <!-- ... other block of code --> <bookmark name="bookmarks"/> </listingToolbar> <!-- ... other block of code --> </listing>
This will add the bookmark feature which allows admin setup difference state of the grid. Each state may have a difference columns list. So with each admin user, they can choose to show the information which are relevant to him.
Step 10: Column controls
This node will add a columns list box which allow the admin user can choose which columns can be shown up on grid. After changing this list, admin can save that state as a bookmark which allow to access this state quickly.
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml
<?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"> <!-- ... other block of code --> <listingToolbar name="listing_top"> <!-- ... other block of code --> <columnsControls name="columns_controls"/> </listingToolbar> <!-- ... other block of code --> </listing>
Step 11: Full text search
This node will add a search box at the top of Grid. You can use this to search all the data in the table.
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml
<?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"> <!-- ... other block of code --> <listingToolbar name="listing_top"> <!-- ... other block of code --> <filterSearch name="fulltext"/> </listingToolbar> <!-- ... other block of code --> </listing>
Step 12: Filter
This node define the filter box for each column. You can see this by click to the Filter button at the top of the grid.
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml
<?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"> <!-- ... other block of code --> <listingToolbar name="listing_top"> <!-- ... other block of code --> <filters name="listing_filters" /> </listingToolbar> <!-- ... other block of code --> </listing>
Step 13: Mass actions
This node will add the mass action select to the grid. The Admin can use this action to take some action quickly on multiple items.
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml
<?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"> <!-- ... other block of code --> <listingToolbar name="listing_top"> <!-- ... other block of code --> <massaction name="listing_massaction"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item> </item> </argument> <action name="delete"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">delete</item> <item name="label" xsi:type="string" translate="true">Delete</item> <item name="url" xsi:type="url" path="mageplaza_helloworld/post/massDelete"/> <item name="confirm" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Delete Post</item> <item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item> </item> </item> </argument> </action> </massaction> </listingToolbar> <!-- ... other block of code -->
Step 14: Paging
This node will add the pagination for the grid. This is useful if you have a large of data in the table.
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml
<?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"> <!-- ... other block of code --> <listingToolbar name="listing_top"> <!-- ... other block of code --> <paging name="listing_paging"/> </listingToolbar> <!-- ... other block of code --> </listing>
Step 15: Export button
This node will add an export button which you can export the data of the grid.
File: app/code/PHPCodez/First/view/adminhtml/ui_component/phpcodez_first_post_listing.xml
<?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"> <!-- ... other block of code --> <listingToolbar name="listing_top"> <!-- ... other block of code --> <exportButton name="export_button"/> </listingToolbar> <!-- ... other block of code --> </listing>
Step 16: Flush Cache
php bin/magento cache:flush