Sort

2

3

50

1

ABC

AAA

AAB

<div js-sort-container js-sort-order="asc">
            <button id="62bed9ba7ba3e" class="c-button u-margin__bottom--6 c-button__filled c-button__filled--primary c-button--md" href="" target="_top" js-sort-button="111-0" type="button" aria-pressed="false" data-uid="62bed9ba7ba37">   
    <span class="c-button__label">
        
        
                    <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  -->
<h2 id="62bed9ba7bade" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="62bed9ba7bada">
    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  -->
<h2 id="62bed9ba7bb3c" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="62bed9ba7bb39">
    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  -->
<h2 id="62bed9ba7bb6d" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="62bed9ba7bb6b">
    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  -->
<h2 id="62bed9ba7bb9a" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="62bed9ba7bb98">
    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  -->
<h2 id="62bed9ba7bbc7" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="62bed9ba7bbc5">
    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  -->
<h2 id="62bed9ba7bbf3" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="62bed9ba7bbf1">
    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  -->
<h2 id="62bed9ba7bc20" class="c-typography u-color__text--light c-typography__variant--h2" data-uid="62bed9ba7bc1e">
    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