Now that our view is much better, let's bring back the sorting functionality that we originally had. Since we do not have table headers anymore, we can use some buttons to sort the information based on certain fields that are important.
Let's use the Bootstrap button group (https://getbootstrap.com/docs/4.0/components/button-group/) for this. Place the following snippet over the <div class="list-group"> element that we created earlier:
<div class="mb-2 d-flex justify-content-end align-items-center">
<span class="mx-2 col-1">Sort by</span>
<div class="btn-group" role="group" jhiSort [(predicate)]="predicate"
[(ascending)]="reverse" [callback]="transition.bind(this)">
<button type="button" class="btn btn-light" jhiSortBy="name">
<span class="d-flex">
<span jhiTranslate="storeApp.product.name">Name</span>
<fa-icon [icon]="'sort'"></fa-icon>
</span>
</button>
<button type="button" class="btn btn-light" jhiSortBy="price">
<span class="d-flex">
<span jhiTranslate="storeApp.product.price">Price</span>
<fa-icon [icon]="'sort'"></fa-icon>
</span>
</button>
<button type="button" class="btn btn-light" jhiSortBy="size">
<span class="d-flex">
<span jhiTranslate="storeApp.product.size">Size</span>
<fa-icon [icon]="'sort'"></fa-icon>
</span>
</button>
<button type="button" class="btn btn-light"
jhiSortBy="productCategory.id">
<span class="d-flex">
<span jhiTranslate="storeApp.product.productCategory">Product
Category</span>
<fa-icon [icon]="'sort'"></fa-icon>
</span>
</button>
</div>
</div>
We can use the Bootstrap margin and flexbox utility classes, such as mb-2 d-flex justify-content-end align-items-center, to position and align the item properly. We use the btn-group class on a div element to group our button elements together, on which we have placed the jhiSort directive and its bound properties, such as predicate, ascending, and callback. On the buttons themselves, we use the jhiSortBy directive to specify which field they would use to sort. Now our page looks as follows, where products are sorted by price:
