Sort Button Control

The Sort Button Control is used to sort HTML elements using links or buttons. It is possible to sort text and numerical content.

This control is added in DataGrid v1.0.2

<a
href="#"
data-id="my_button"
data-grid-control="sort-button"
data-path=".first-name"
data-direction="asc"
data-toggle-direction
data-type="text">First Name</a>

It also can be a button:

<button
type="button"
data-id="my_button"
data-grid-control="sort-button"
data-path=".first-name"
data-direction="asc"
data-toggle-direction
data-type="text">First Name</button>

Select data attributes

Data Attribute

Value

Description

Required

data-grid-control

sort-button

This attribute defines the control type.

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

data-toggle-direction

no value

If this attribute exists, the control

will toggle direction between asc and desc on every click.

Optional

data-id

any alphanumeric string

This attribute may be used in the deep-link,

local storage, or complex filter logic.

Optional

Sort Types

Sort Type

Description

text

Sort by text content.

number

Sort by numeric content.

initial

Sort by initial document order.

The control supports the following CSS classes:

.dg-asc{
/* when the control in the ASC state */
}
.dg-desc{
/* when the control in the DESC state */
}
.dg-sort-selected{
/* when the control in the latest
clicked between other sort buttons
with the same data-id
*/
}