This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

Sortby component

The Sortby component allows you to sort the column in ascending or descending order.

Configuration options

Option Description Type Default Value
template Path to the component .html template. String ui/grid/sortBy
options List of options available for sorting. Array []
applied Currently applied sorting. Object {}
sorting Specify ascending (asc) or descending (desc) sorting order for the column. String asc
selectedOption Currently selected option for sorting. String -
isVisible Check if component is visible or not. Boolean true

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<listing>
    ...
    <container name="sorting"
               provider="dataProvider"
               displayArea="sorting"
               sortOrder="20"
               component="Magento_Ui/js/grid/sortBy">
               <argument name="data" xsi:type="array">
                   <item name="config" xsi:type="array">
                       <item name="deps" xsi:type="array">
                           <item name="0" xsi:type="string">
                               columnProvider
                           </item>
                       </item>
                   </item>
               </argument>
    </container>
    ...
    <columns name="columnProvider">
        <column name="name">
            <settings>
                <label translate="true">Name</label>
                <visible>false</visible>
                <sortable>true</sortable>
            </settings>
        </column>
        <column name="directory">
            <settings>
                <label translate="true">Directory</label>
                <visible>false</visible>
                <sortable>true</sortable>
            </settings>
        </column>
    </columns>
</listing>

Source files

Extends UiElement:

Result

Sortby Component