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