Adobe Commerce 2.3 reached end of support in September 2022.

ListingToolbar component

The ListingToolbar component implements a container for the listing-related elements such as paging, mass actions, filters, and bookmarks. It aggregates all elements that serve as tools and renders them at the top of the main table.

Configuration options

Option Description Type Default
sticky Whether the toolbar has a fixed position. When set to true, elements like paging, filters, and table headers stay in the viewport’s area, no matter where the scroll position is. Boolean false
stickyClass A list of additional CSS classes added to the root node of the .html template specified in StickyTmpl. {
[name:string]: boolean
}
{
'sticky-header': true
}
stickyTmpl Path to the toolbar’s template for the fixed position. String ui/grid/sticky/sticky
template Path to the component’s .html template. String ui/grid/toolbar

Examples

Integrate the ListingToolbar component with the Listing component

In the following example, we group the following components:

  • Bookmark
  • ColumnsControls
  • FilterSearch
  • Filters
  • Mass Actions
  • Paging
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<listingToolbar name="listing_top">
    <settings>
        <sticky>true</sticky>
    </settings>
    <bookmark name="bookmarks"/>
    <columnsControls name="columns_controls"/>
    <filterSearch name="fulltext"/>
    <filters name="listing_filters">
        ...
    </filters>
    <massaction name="listing_massaction">
        ...
    </massaction>
    <paging name="listing_paging"/>
</listingToolbar>

Result

ListingToolbar UiComponent

Source files

Extends UiCollection: