How to Display Table Data in Magento 2
In the previous tutorial, you learned how to save form data to the custom table. Continuing with the same, we will now move further.
This tutorial demonstrates how to display table data in Magento 2.
As we have already learned how to save data to the table, let us understand how to display the saved data.
All the data which you have stored can be displayed on the frontend.
To do that, we need to create action so that we can display data on the frontend. The given path is an example: http://example.com/extension/index/showdata
Programmatic Method to Display Table Data in Magento 2
1. Create a controller Showdata.php at app\code\Meetanshi\Extension\Controller\Index\
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php namespace Meetanshi\Extension\Controller\Index; use Magento\Framework\App\Action\Context; use Magento\Framework\View\Result\PageFactory; use Magento\Framework\App\Action\Action; class Showdata extends Action { protected $resultPageFactory; public function __construct(Context $context, PageFactory $resultPageFactory) { parent::__construct($context); $this->resultPageFactory = $resultPageFactory; } public function execute() { return $this->resultPageFactory->create(); } } |
2. Create extension_index_showdata.xml at app\code\Meetanshi\Extension\view\frontend\layout\
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0"?> <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Meetanshi\Extension\Block\Showdata" name="showdata" template="Meetanshi_Extension::showdata.phtml" cacheable="false"/> </referenceContainer> </body> </page> |
3. Create Showdata.php at app\code\Meetanshi\Extension\Block\
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php namespace Meetanshi\Extension\Block; use Magento\Framework\View\Element\Template; use Magento\Backend\Block\Template\Context; use Meetanshi\Extension\Model\ResourceModel\Extension\CollectionFactory; class Showdata extends Template { public $collection; public function __construct(Context $context, CollectionFactory $collectionFactory, array $data = []) { $this->collection = $collectionFactory; parent::__construct($context, $data); } public function getCollection() { return $this->collection->create(); } } |
4. Create showdata.phtml file at app\code\Meetanshi\Extension\view\frontend\templates\
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php $collection = $block->getCollection(); if ($collection->count()) { ?> <div class="table-wrapper orders-history"> <table class="data table table-order-items history" id="my-orders-table"> <caption class="table-caption"><?php echo __('Grid Record') ?></caption> <thead> <tr> <th scope="col" class="col id"><?php echo __('ID') ?></th> <th scope="col" class="col name"><?php echo __('Name') ?></th> <th scope="col" class="col email"><?php echo __('Email') ?></th> <th scope="col" class="col telephone"><?php echo __('Telephone') ?></th> <th scope="col" class="col createat"><?php echo __('Created At') ?></th> </tr> </thead> <tbody> <?php foreach ($collection as $item): ?> <tr> <td data-th="<?= $block->escapeHtml(__('ID')) ?>" class="col id"> <?php echo $item->getId() ?> </td> <td data-th="<?= $block->escapeHtml(__('Name')) ?>" class="col name"> <?php echo $item->getName() ?> </td> <td data-th="<?= $block->escapeHtml(__('Email')) ?>" class="col email"> <?php echo $item->getEmail() ?> </td> <td data-th="<?= $block->escapeHtml(__('Telephone')) ?>" class="col telephone"> <?php echo $item->getTelephone() ?> </td> <td data-th="<?= $block->escapeHtml(__('Created At')) ?>" class="col title"><?php echo date('Y-m-d', strtotime($item->getCreatedAt())); ?></td> </tr> <?php endforeach; ?> </tbody> </table> </div> <?php } ?> |
After following these four steps, you will be able to display table data.
Done!
If you have queries regarding this blog, feel free to ask in the Comment section below.
I would be happy to help you.
Consider sharing this post novice Magento developer.
Thank you.
8 Comments
i want to display the data in the same page what to do? /extension/index/index/
Hey Ankus,
You can do this with same code in showdata.php to index.php controller and make extension_index_index.xml
and copy the extension_index_showdata.xml file’s code into that xml and check it,
Thank You.
thanks, it’s help me alot
Hello Vietanh,
We’re glad to know that our solution helped you out.
Thank You
Hello, I’m getting the following error when I try to open the page “extension/index/showdata” :
Exception #0 (Magento\Framework\Exception\LocalizedException): Invalid block type: Meetanshi\Extension\Block\Showdata
Exception #1 (ReflectionException): Impossible to process constructor argument Parameter #1 [ Meetanshi\Extension\Model\ResourceModel\Extension\CollectionFactory $collectionFactory ] of Meetanshi\Extension\Block\Showdata class
Exception #2 (ReflectionException): Class Meetanshi\Extension\Model\ResourceModel\Extension\CollectionFactory does not exist.
there are more lines as well but I’m not including them as to not flood the comment section.
I have done all of the previous steps before this and everything works well. Do you have an idea of what could be causing this?Hello, I’m getting the following error when I try to open the page “extension/index/showdata” :
Exception #0 (Magento\Framework\Exception\LocalizedException): Invalid block type: Meetanshi\Extension\Block\Showdata
Exception #1 (ReflectionException): Impossible to process constructor argument Parameter #1 [ Meetanshi\Extension\Model\ResourceModel\Extension\CollectionFactory $collectionFactory ] of Meetanshi\Extension\Block\Showdata class
Exception #2 (ReflectionException): Class Meetanshi\Extension\Model\ResourceModel\Extension\CollectionFactory does not exist.
there are more lines as well but I’m not including them as to not flood the comment section.
I have done all of the previous steps before this and everything works well. Do you have an idea of what could be causing this?
Hello,
Please create the collection file.
Thank You
Hi Jignesh,
Thanks for this..
Just a heads up, the link to the Next blog is currently returning a 404.
Thanks for bringing it to my notice. I’ve updated the post.