Sort

2

3

50

1 ABC

AAA

AAB

<div js-sort-container js-sort-order="asc">
                <button class="c-button u-margin__bottom--6 c-button__filled c-button__filled--primary c-button--md" js-sort-button="111-0" type="button" aria-label="Sort" data-uid="69f0cfeba952a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Sort
            </span>
        
    </span> </button>
            <div class="o-grid">

                <div class="o-grid-12 u-color__bg--secondary u-rounded u-padding--2" js-sort-sortable="" js-sort-data="111-0">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-color__text--light c-typography__variant--h2" data-uid="69f0cfeba95ae" data-component="typography">
    2
</h2>                </div>

                <div class="o-grid-12 u-color__bg--secondary u-rounded u-padding--2" js-sort-sortable="" js-sort-data="111-0">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-color__text--light c-typography__variant--h2" data-uid="69f0cfeba95f0" data-component="typography">
    3
</h2>                </div>

                <div class="o-grid-12 u-color__bg--secondary u-rounded u-padding--2" js-sort-sortable="" js-sort-data="111-0">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-color__text--light c-typography__variant--h2" data-uid="69f0cfeba9627" data-component="typography">
    50
</h2>                </div>

                <div class="o-grid-12 u-color__bg--secondary u-rounded u-padding--2" js-sort-sortable="" js-sort-data="111-0">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-color__text--light c-typography__variant--h2" data-uid="69f0cfeba9659" data-component="typography">
    1
</h2>                </div>

                <div class="o-grid-12 u-color__bg--secondary u-rounded u-padding--2" js-sort-sortable="" js-sort-data="111-0">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-color__text--light c-typography__variant--h2" data-uid="69f0cfeba968a" data-component="typography">
    ABC
</h2>                </div>

                <div class="o-grid-12 u-color__bg--secondary u-rounded u-padding--2" js-sort-sortable="" js-sort-data="111-0">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-color__text--light c-typography__variant--h2" data-uid="69f0cfeba96b8" data-component="typography">
    AAA
</h2>                </div>

                <div class="o-grid-12 u-color__bg--secondary u-rounded u-padding--2" js-sort-sortable="" js-sort-data="111-0">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-color__text--light c-typography__variant--h2" data-uid="69f0cfeba96e4" data-component="typography">
    AAB
</h2>                </div>
            </div>
        </div>

Key	Default value	Type	Available values	Description
js-sort-container		string	-	Outer container
js-sort-order	asc and desc	string	-	In what order to sort data
js-sort-button	unique id	string	-	The button to click for sort
js-sort-data-container		string	-	The container where the sortables will be appended
js-sort-sortable		string	-	The element to be sorted
js-sort-data	button id	string	-	The data to sort on
js-sort-initial	asc and desc	string	-	An optional attribute on the container to have an initial order on the items
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes

Sort

2

3

50

1

ABC

AAA

AAB

Parameters (Blade)