Sortby component

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

Options

OptionDescriptionTypeDefault 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

Copied to your clipboard
<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