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.

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

Integration

In the following example, we group the following components:

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