Raul Watson Apr 15, 2018 2 min read

HowTo: Render a Grid on the Frontend using a Ui Component in Magento 2

On this page

Listing Ui Components are everywhere in the admin, but there is nothing stopping you from rendering one on the storefront, a “my downloads” page, a list of records tied to the customer, that sort of thing. It is not something you see every day, so let me show you the little trick that makes it work.

This post assumes that there is already a custom module with a frontend route and a controller. If you need that, look at HowTo: Create an Alternative Success Page for a Payment Method in Magento2, where I create a frontend route.

Declare the listing

A frontend listing is declared just like an admin one, but it lives under view/frontend/ui_component/. The data provider points to a collection of your records.

xml
<?xml version="1.0"?>
<!-- app/code/Vendor/Module/view/frontend/ui_component/vendor_entity_listing.xml -->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <settings>
        <spinner>vendor_entity_columns</spinner>
    </settings>
    <dataSource name="vendor_entity_listing_data_source" component="Magento_Ui/js/grid/provider">
        <settings>
            <updateUrl path="mui/index/render"/>
        </settings>
        <dataProvider name="vendor_entity_listing_data_source" class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <columns name="vendor_entity_columns">
        <column name="title">
            <settings>
                <label translate="true">Title</label>
            </settings>
        </column>
    </columns>
</listing>

Render it in a frontend layout

This is the trick. In the layout of your controller’s page, you drop the listing with the <uiComponent> node, exactly the way mui does internally.

xml
<?xml version="1.0"?>
<!-- app/code/Vendor/Module/view/frontend/layout/vendor_entity_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">
            <uiComponent name="vendor_entity_listing"/>
        </referenceContainer>
    </body>
</page>

Notice: The data source’s updateUrl still points at mui/index/render, which is an admin route. If your grid needs AJAX (sorting, paging), you will have to expose a frontend render controller or keep the grid simple and server-rendered. For a read-only list the default render is usually enough.

Register the collection for your listing in di.xml (same collections argument you use for admin grids), deploy the static content, flush the cache and your grid renders right there on the storefront.

Hope this helps.

If you have any question or know a better way to achieve this, feel free to share in the comments below.