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

<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:

app/code/Magento/Ui/view/base/web/js/grid/toolbar.js

Dec 20th, 2019

Edit this page on GitHub

Give us feedback