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
   */
}