Skip to content

Latest commit

 

History

History
117 lines (93 loc) · 5.71 KB

ui-secondary-header.md

File metadata and controls

117 lines (93 loc) · 5.71 KB
layout group subgroup title menu_title menu_node menu_order version github_link redirect_from
default
UI Library
C_Listing/Grid Secondary Components
Sticky Header Component
Sticky Header Component
11
2.0
ui-components/ui-secondary-header.md
/guides/v2.0/ui-library/ui-secondary-header.html

Overview

The sticky header component is responsible for rendering additional grid header and grid toolbar.

Sticky header is displayed when the persistent header gets hidden during vertical scrolling. The persistent header reactivates when you scroll back up:

The following image is an illustration of a grid with a sticky header:

a grid with a sticky header

Enable sticky header for a grid

To enable the sticky header functionality for a certain grid, declare it as a child element in the grid configuration file using the following notation:

{% highlight xml %} Magento_Ui/js/grid/sticky/sticky ... ... {% endhighlight %}

Where the following should be specified:

  • toolbarProvider: full name of the toolbar component on this page.
  • listingProvider: full name of the listing (grid) component on this page; the one for which the sticky header is enabled.

Example

Enabling a sticky header for the CMS pages grid, configured in <your module root dir>/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml:

{% highlight xml %}

.. Magento_Ui/js/grid/sticky/sticky cms_page_listing.cms_page_listing.listing_top cms_page_listing.cms_page_listing.cms_page_columns {% endhighlight %}

Sticky header configuration

Any component of a sticky header can use a particular, not default template. This template is set in the stickyTmpl option. If the sticky template is not set, the default component's template is used for displaying in a sticky header.

Example The toolbar component should use the ui/grid/sticky/toolbar template for the sticky header. <your module root dir>/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml: {% highlight xml %}

ui/grid/toolbar ui/grid/sticky/toolbar .. </container name="listing_top"> {% endhighlight %}

Component elements

The sticky header component consists of the following elements:

Dependencies

The sticky header component depends on the following components:
  • Listing
  • Toolbar

It also works both with and without the following components, preserving their functionality: