Comment on page
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>
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 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
*/
}
Last modified 2yr ago