{"id":1337,"date":"2020-11-05T07:05:55","date_gmt":"2020-11-05T07:05:55","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/11\/05\/display-table-data-magento-2\/"},"modified":"2025-05-21T17:45:51","modified_gmt":"2025-05-21T12:15:51","slug":"display-table-data-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/display-table-data-magento-2\/","title":{"rendered":"How to Display Table Data in Magento 2"},"content":{"rendered":"\n

In the previous tutorial, you learned how to save form data to the custom table<\/a>. Continuing with the same, we will now move further.<\/p>\n\n\n\n

This tutorial demonstrates how to display table data in Magento 2<\/strong><\/em>.<\/p>\n\n\n\n

As we have already learned how to save data to the table, let us understand how to display the saved data<\/strong>.<\/p>\n\n\n\n

All the data which you have stored can be displayed on the frontend.<\/p>\n\n\n\n

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 <\/em><\/strong><\/p>\n\n\n\n

Programmatic Method to Display Table Data in Magento 2<\/h2>\n\n\n\n

1. Create a controller Showdata.php <\/strong>at app\\code\\Meetanshi\\Extension\\Controller\\Index\\<\/em><\/strong><\/em><\/strong><\/p>\n\n\n\n

<?php\n\nnamespace Meetanshi\\Extension\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\nuse Magento\\Framework\\App\\Action\\Action;\n\nclass Showdata extends Action\n{\n    protected $resultPageFactory;\n\n    public function __construct(Context $context, PageFactory $resultPageFactory)\n    {\n        parent::__construct($context);\n        $this->resultPageFactory = $resultPageFactory;\n    }\n\n    public function execute()\n    {\n        return $this->resultPageFactory->create();\n    }\n}<\/pre>\n\n\n\n
2. Create extension_index_showdata.xml<\/strong> at app\\code\\Meetanshi\\Extension\\view\\frontend\\layout\\<\/em><\/strong><\/em><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page layout=\"1column\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceContainer name=\"content\">\n            <block class=\"Meetanshi\\Extension\\Block\\Showdata\" name=\"showdata\"\n                   template=\"Meetanshi_Extension::showdata.phtml\" cacheable=\"false\"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
3. Create Showdata.php<\/strong> at app\\code\\Meetanshi\\Extension\\Block\\<\/em><\/strong><\/em><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Meetanshi\\Extension\\Block;\n\nuse Magento\\Framework\\View\\Element\\Template;\nuse Magento\\Backend\\Block\\Template\\Context;\nuse Meetanshi\\Extension\\Model\\ResourceModel\\Extension\\CollectionFactory;\n\nclass Showdata extends Template\n{\n\n    public $collection;\n\n    public function __construct(Context $context, CollectionFactory $collectionFactory, array $data = [])\n    {\n        $this->collection = $collectionFactory;\n        parent::__construct($context, $data);\n    }\n\n    public function getCollection()\n    {\n        return $this->collection->create();\n    }\n\n}<\/pre>\n\n\n\n
4. Create showdata.phtml<\/strong> file at app\\code\\Meetanshi\\Extension\\view\\frontend\\templates\\<\/em><\/strong><\/em><\/strong><\/p>\n\n\n\n
<?php\n    $collection = $block->getCollection();\nif ($collection->count()) {\n?>\n<div class=\"table-wrapper orders-history\">\n    <table class=\"data table table-order-items history\" id=\"my-orders-table\">\n        <caption class=\"table-caption\"><?php echo __('Grid Record') ?><\/caption>\n        <thead>\n        <tr>\n            <th scope=\"col\" class=\"col id\"><?php echo __('ID') ?><\/th>\n            <th scope=\"col\" class=\"col name\"><?php echo __('Name') ?><\/th>\n            <th scope=\"col\" class=\"col email\"><?php echo __('Email') ?><\/th>\n            <th scope=\"col\" class=\"col telephone\"><?php echo __('Telephone') ?><\/th>\n            <th scope=\"col\" class=\"col createat\"><?php echo __('Created At') ?><\/th>\n        <\/tr>\n        <\/thead>\n        <tbody>\n        <?php\n                foreach ($collection as $item): ?>\n        <tr>\n            <td data-th=\"<?= $block->escapeHtml(__('ID')) ?>\" class=\"col id\">\n                <?php echo $item->getId() ?>\n            <\/td>\n            <td data-th=\"<?= $block->escapeHtml(__('Name')) ?>\" class=\"col name\">\n                <?php echo $item->getName() ?>\n            <\/td>\n            <td data-th=\"<?= $block->escapeHtml(__('Email')) ?>\" class=\"col email\">\n                <?php echo $item->getEmail() ?>\n            <\/td>\n            <td data-th=\"<?= $block->escapeHtml(__('Telephone')) ?>\" class=\"col telephone\">\n                <?php echo $item->getTelephone() ?>\n            <\/td>\n            <td data-th=\"<?= $block->escapeHtml(__('Created At')) ?>\"\n                class=\"col title\"><?php echo date('Y-m-d', strtotime($item->getCreatedAt())); ?><\/td>\n        <\/tr>\n        <?php endforeach; ?>\n        <\/tbody>\n    <\/table>\n<\/div>\n<?php\n    }\n    ?><\/pre>\n\n\n\n
After following these four steps, you will be able to display table data.<\/p>\n\n\n
\n
\"How<\/figure>\n<\/div>\n\n\n
Done!<\/p>\n\n\n\n
Consider sharing this post novice Magento developer.<\/p>\n\n\n\n
Thank you.<\/p>\n\n\n\n