How to Display Data Table in Magento 2

In the prior tutorial, you explored the process of incorporating external CSS and JavaScript into Magento 2. Building upon that foundation, we will now progress to the next stage.

Magento 2, an advanced eCommerce platform, has become the cornerstone for businesses seeking robust and scalable online storefronts. Its open-source nature allows developers to customize every aspect, from design themes to backend functionalities. Whether you’re building a straightforward storefront or a feature-rich marketplace, Magento 2’s flexibility empowers developers to tailor the platform to unique business needs.

Significance of Presenting Tabular Data in Magento 2

Displaying data in a structured, tabular format is essential for clarity and usability. Tables provide an intuitive way to present datasets, such as product specifications, order histories, or customer data, ensuring efficient navigation and decision-making. In Magento 2, mastering table data display can enhance administrative workflows and improve user experience on the front end.

Understanding Table Data in Magento 2

What is Table Data and Why it Matters

data Table refers to information organized into rows and columns, providing a systematic representation of complex datasets. In Magento 2, tables are often used in admin panels, reports, and customer-facing pages. By utilizing well-structured tables, businesses can present critical data transparently and boost operational efficiency.

Common Use Cases for Displaying Table Data in Magento 2

From admin dashboards showcasing sales reports to customer accounts summarizing past orders, the utility of table data is vast. Key examples include inventory lists, pricing comparisons, shipping rates, and order management interfaces. Each of these scenarios highlights the importance of accurate, well-organized table displays in eCommerce operations.

Displaying data table in Magento 2 typically involves fetching data from a custom database table or an existing Magento table and then rendering it on the frontend or in the admin panel. Here’s a step-by-step guide to achieve this:

1. Create a Custom Database Table

If you’re working with a custom table, ensure it’s created in your module’s InstallSchema.php or db_schema.xml. For example:

// etc/db_schema.xml
<?xml version="1.0"?>
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd>
    <table name="custom_table" resource="default" engine="innodb" comment="Custom Table>
        <column name="entity_id" xsi:type="int" nullable="false" identity="true" comment="Entity ID>
        <column name="name" xsi:type="varchar" nullable="false" length="255" comment="Name>
        <column name="description" xsi:type="text" nullable="true" comment="Description>
        <constraint xsi:type="primary" columns="entity_id>
    </table>
</schema>

Run the setup:upgrade command to create the table.

2. Create a Model and Resource Model

Create a model to interact with the custom table:

// Model/Custom.php
namespace Vendor\Module\Model;

use Magento\Framework\Model\AbstractModel;

class Custom extends AbstractModel
{
    protected function _construct()
    {
        $this->_init(\Vendor\Module\Model\ResourceModel\Custom::class);
    }
}

Resource model to define the table and its primary key:

// Model/ResourceModel/Custom.php
namespace Vendor\Module\Model\ResourceModel;

use Magento\Framework\Model\ResourceModel\Db\AbstractDb;

class Custom extends AbstractDb
{
    protected function _construct()
    {
        $this->_init('custom_table', 'entity_id');
    }
}

3. Create a Collection Class

Create a collection to fetch multiple records:

// Model/ResourceModel/Custom/Collection.php
namespace Vendor\Module\Model\ResourceModel\Custom;

use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;

class Collection extends AbstractCollection
{
    protected function _construct()
    {
        $this->_init(
            \Vendor\Module\Model\Custom::class,
            \Vendor\Module\Model\ResourceModel\Custom::class
        );
    }
}

4. Create a Block for Data Retrieval

Use a block to fetch data from the collection and pass it to the template:

// Block/Custom.php
namespace Vendor\Module\Block;

use Magento\Framework\View\Element\Template;
use Vendor\Module\Model\ResourceModel\Custom\CollectionFactory;

class Custom extends Template
{
    protected $collectionFactory;

    public function __construct(
        Template\Context $context,
        CollectionFactory $collectionFactory,
        array $data = []
    ) {
        $this->collectionFactory = $collectionFactory;
        parent::__construct($context, $data);
    }

    public function getCustomData()
    {
        return $this->collectionFactory->create()->getItems();
    }
}

5. Create a Template File

Create a .phtml file to render the data as a table:

// view/frontend/templates/custom.phtml
getCustomData() as $item): ?>
            

    

        

            
ID
            
Name
            
Description
        
    
    

        

                
getData('entity_id') ?>
                
getData('name') ?>
                
getData('description') ?>
            
        
    

6. Add the Block to a Layout

Define the block in the layout XML:

// view/frontend/layout/cms_index_index.xml
<page 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="Vendor\Module\Block\Custom" name="custom_table_data" template="Vendor_Module::custom.phtml"/>
        </referenceContainer>
    </body>
</page>

7. Test the Output

Clear the cache and test the page where the block is displayed.

php bin/magento cache:clean

The table data should now be visible on the frontend.

Optional Enhancements

• Pagination: Use Magento’s \Magento\Ui\Component\DataProvider to handle pagination for larger datasets.
• Admin Grid: If displaying data in the admin panel, consider creating a UI component grid.