Sort DropDown Control
The sort dropdown control is used to sort HTML elements by the specified CSS selector using the HTML SELECT element. It is possible to sort text and numerical content.
1
<select data-grid-control="sort">
2
<option data-type="initial" selected>Sort by</option>
3
<option data-path=".title" data-direction="asc" data-type="text">Sort by title asc</option>
4
<option data-path=".title" data-direction="desc" data-type="text">Sort by title desc</option>
5
<option data-path=".price" data-direction="asc" data-type="number">Sort by price asc</option>
6
<option data-path=".price" data-direction="desc" data-type="number">Sort by price desc</option>
7
</select>
Copied!

Select data attributes

Data Attribute
Value
Description
Required
data-grid-control
sort
This attribute defines the control type.
Required
data-id
any alphanumeric string
This attribute may be used in the deep-link,
local storage, or complex filter logic.
Optional

Option elements data attributes

Data Attribute
Value
Description
Required
data-path
any CSS selector
It defines the path to the item that should be sorted.
Optional
data-direction
asc, desc
Sort direction
Optional
data-type
text, number, initial
Sort type
Optional
data-skip
[^a-zA-Z0-9]+
Defines a regex of characters that should be skipped.
Optional
selected
​
The selected option
Optional
The selected option should be marked with the selected attribute.

Sort Types

Sort Type
Description
text
Sort by text content.
number
Sort by numeric content.
initial
Sort by initial document order.
Added in DataGrid v1.0.2
​
Last modified 7mo ago
Copy link