Sort

2

3

50

1

ABC

AAA

AAB

<div js-sort-container js-sort-order="asc">
            <button id="61efb8de7d1e20.10721138" class="c-button u-margin__bottom--6 c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-sort-button="111-0" type="button" aria-pressed="false" data-uid="61efb8de7d1f9">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Sort
            </span>
        
                    
            
    </span>
</button>
            <div id="61efb8de7d8ac" class="c-grid u-padding--2 u-color__bg--default u-text-align--center c-grid__container c-grid__container__gap__col--2 c-grid__container__gap__row--0" js-sort-data-container="" style="grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));" data-uid="61efb8de7d88d">
    <div id="61efb8de7d363" class="c-grid u-color__bg--secondary u-rounded u-padding--2 c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-sort-sortable="" js-sort-data="111-0" data-uid="61efb8de7d35f">
    <!-- typography.blade.php  -->
<h2 id="61efb8de7d2c6" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="61efb8de7d2c1">
    2
</h2>
</div>
                <div id="61efb8de7d408" class="c-grid u-color__bg--secondary u-rounded u-padding--2 c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-sort-sortable="" js-sort-data="111-0" data-uid="61efb8de7d404">
    <!-- typography.blade.php  -->
<h2 id="61efb8de7d3c0" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="61efb8de7d3bd">
    3
</h2>
</div>
                <div id="61efb8de7d4c5" class="c-grid u-color__bg--secondary u-rounded u-padding--2 c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-sort-sortable="" js-sort-data="111-0" data-uid="61efb8de7d4c0">
    <!-- typography.blade.php  -->
<h2 id="61efb8de7d457" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="61efb8de7d453">
    50
</h2>
</div>
                <div id="61efb8de7d59d" class="c-grid u-color__bg--secondary u-rounded u-padding--2 c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-sort-sortable="" js-sort-data="111-0" data-uid="61efb8de7d598">
    <!-- typography.blade.php  -->
<h2 id="61efb8de7d531" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="61efb8de7d52d">
    1
</h2>
</div>
                <div id="61efb8de7d670" class="c-grid u-color__bg--secondary u-rounded u-padding--2 c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-sort-sortable="" js-sort-data="111-0" data-uid="61efb8de7d66b">
    <!-- typography.blade.php  -->
<h2 id="61efb8de7d602" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="61efb8de7d5fe">
    ABC
</h2>
</div>
                <div id="61efb8de7d744" class="c-grid u-color__bg--secondary u-rounded u-padding--2 c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-sort-sortable="" js-sort-data="111-0" data-uid="61efb8de7d73f">
    <!-- typography.blade.php  -->
<h2 id="61efb8de7d6d5" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="61efb8de7d6d1">
    AAA
</h2>
</div>
                <div id="61efb8de7d822" class="c-grid u-color__bg--secondary u-rounded u-padding--2 c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-sort-sortable="" js-sort-data="111-0" data-uid="61efb8de7d81d">
    <!-- typography.blade.php  -->
<h2 id="61efb8de7d7bb" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="61efb8de7d7b6">
    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