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" target="_top" js-sort-button="111-0" type="button" aria-label="Sort" data-uid="680c307536cf5">   
     <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="680c307536d65">
    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="680c307536d99">
    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="680c307536dd6">
    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="680c307536e0b">
    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="680c307536e2e">
    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="680c307536e4f">
    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="680c307536e70">
    AAB
</h2>                </div>
            </div>
        </div>

Attributes

The sort script handles sorting on any collection of elements. All you have to do is apply the attributes. You start by adding the js-sort-container attribute to wrap the rest. Inside of the container you add one or more js-sort-button, each with a unique id, js-sort-data-container which can contain mutliple js-sort-sortable which in turn contains js-sort-data. The data to be affected by a button need to have the same id. In the example above each element is both a sortable and also data. The sortable could also be a parent to the data like tablerow with tabledata.

Blade component parameters

Attributes	Description	Values
js-sort-container	`Outer container`
js-sort-order	`In what order to sort data`	asc and desc
js-sort-button	`The button to click for sort`	unique id
js-sort-data-container	`The container where the sortables will be appended`
js-sort-sortable	`The element to be sorted`
js-sort-data	`The data to sort on`	button id
js-sort-initial	`An optional attribute on the container to have an initial order on the items`	asc and desc