Merge pull request #6082 from eduard13/ui-listing-toolbar-component

Updating the ListingToolbar UiComponent documentation

Author: dobooth

_data/toc/ui-components-guide.yml

@@ -161,7 +161,7 @@ pages:
         - label: ThumbnailColumn component
           url: /ui_comp_guide/components/ui-thumbnailcolumn.html
 
-        - label: Toolbar component
+        - label: ListingToolbar component
           url: /ui_comp_guide/components/ui-toolbar.html
 
         - label: TreeMassActions component

common/images/ui_comps/listing-toolbar-component-result.png

@@ -1,44 +1,53 @@
 ---
 group: ui-components-guide
-title: Toolbar component
+title: ListingToolbar component
 ---
 
-The Toolbar component implements a container for the listing-related elements like paging, mass actions, filters, bookmarks. That is, it aggregates all elements that serve as tools and renders them at the top of the main table.
+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
 
-<table>
-  <tr>
-    <th>Option</th>
-    <th>Description</th>
-    <th>Type</th>
-    <th>Default</th>
-  </tr>
-  <tr>
-    <td><code>sticky</code></td>
-    <td>Whether the toolbar has a fixed position. When set to <code>true</code>, elements like paging, filters, and table headers stay in the viewport's area, no matter where the scroll position is.</td>
-    <td>Boolean</td>
-    <td><code>false</code></td>
-  </tr>
-  <tr>
-    <td><code>stickyClass</code></td>
-    <td>A list of additional CSS classes added to the root node of the <code>.html</code> template specified in <code>StickyTmpl</code>.</td>
-    <td>{<br />[name:string]: boolean<br />}</td>
-    <td>{<br /><code>'sticky-header': true</code><br />}</td>
-  </tr>
-  <tr>
-    <td><code>stickyTmpl</code></td>
-    <td>Path to the toolbar's template for the fixed position.</td>
-    <td>String</td>
-    <td><code>ui/grid/sticky/sticky</code></td>
-  </tr>
-  <tr>
-    <td><code>template</code></td>
-    <td>Path to the component’s <code>.html</code> template.</td>
-    <td>String</td>
-    <td><code>ui/grid/toolbar</code></td>
-  </tr>
-</table>
+| 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`. | {<br />[name:string]: boolean<br />} | {<br />`'sticky-header': true`<br />} |
+| `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
+
+```xml
+<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]({{ site.baseurl }}/common/images/ui_comps/listing-toolbar-component-result.png)
 
 ## Source files