15/08/2022
We use cookies to make your experience better. To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Learn more.
How to Display Table Data in Magento 2
We have learned in the previous tutorial How to Save form data in Magento 2 Now in this tutorial, we will learn how we can display table data in Magento 2.
To display all stored data on the front end. To o this process we need to create an action file.
Here is an example path http://example.com/module/index/showdata
Display Table Data programmatically:
Step#1
create controller file named Showdata.php
app\code\TOH\Module\Controller\Index\
<?php
namespace TOH\Module\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();
}
}
Step#2
Create file module_index_showdata.xml
app\code\TOH\Module\view\frontend\layout\
<?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="TOH\Module\Block\Showdata" name="showdata"
template="TOH_Module::showdata.phtml" cacheable="false"/>
</referenceContainer>
</body>
</page>
Step#3
Create file Showdata.php
app\code\TOH\Module\Block\
<?php
namespace TOH\Module\Block;
use Magento\Framework\View\Element\Template;
use Magento\Backend\Block\Template\Context;
use TOH\Module\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();
}
}
Step#4
Create file Showdata.phtml
app\code\TOH\Module\view\frontend\templates\
<?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
}
?>
If you need Magento developers, please visit TheOnlineHelper
Related Products