This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

Listing (grid) component

Edit on GitHub
Log an Issue

Listing is a basic component that implements grids, lists, and tiles with filtering, pagination, sorting, and other features.

The following components can be used in the scope of the Listing component:

Examples

Create an instance

Example configuration of Listing component instance:

<your module root dir>/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">cms_page_listing.cms_page_listing_data_source</item>
        </item>
    </argument>
    <settings>
        <buttons>
            <button name="add">
                <url path="*/*/new"/>
                <class>primary</class>
                <label translate="true">Add New Page</label>
            </button>
        </buttons>
        <spinner>cms_page_columns</spinner>
        <deps>
            <dep>cms_page_listing.cms_page_listing_data_source</dep>
        </deps>
    </settings>
</listing>

Configure DataSource

DataSource is another UI component that provides data in specific format which is shared among all UI components.

The listing component requires the data source to be properly configured and associated with it:

<your module root dir>/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <dataSource name="cms_page_listing_data_source" component="Magento_Ui/js/grid/provider">
        <settings>
            <storageConfig>
                <param name="indexField" xsi:type="string">page_id</param>
            </storageConfig>
            <updateUrl path="mui/index/render"/>
        </settings>
        <aclResource>Magento_Cms::page</aclResource>
        <dataProvider class="Magento\Cms\Ui\Component\DataProvider" name="cms_page_listing_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>page_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
</listing>

Source files

© 2020 Magento. All rights reserved.