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
Source files
Extends UiCollection
: