PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
Listing (grid) component
Listing is a basic component that implements grids, lists, and tiles with filtering, pagination, sorting, and other features.
Related components
The following components can be used in the scope of the Listing component:
- ActionsColumn
- Bookmarks
- Button
- Column
- Columns
- ColumnsControls
- DateColumn
- DragAndDrop
- Expandable
- ExportButton
- Filters
- FiltersChips
- ImagePreview
- LinkColumn
- MassActions
- MultiselectColumn
- OnOffColumn
- Paging
- Range
- Search
- SelectColumn
- Sizes
- ThumbnailColumn
- ListingToolbar
- TreeMassActions
- UI-select
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>