如何根据Angular 6中的单个列实现排序表（使用boostrap）

Question

任何人都可以建议使用botstrap在角度6中实现排序的最佳方法。这是我的桌子。 我需要使用mrp，ssp，ymp对表进行排序。 我试图搜索教程，但整个Internet上都有angularjs实现。

任何人都可以使用数据表建议正确的角度6实现

<table id="myTable" class="table table-striped table-bordered table-dark" #myTable>
   <thead>
      <tr>
         <th scope="col">#</th>
         <th scope="col">Id</th>
         <th scope="col">Image</th>
         <th scope="col">Name</th>
         <th scope="col">Seller</th>
         <th scope="col">Category</th>
         <th scope="col">Status</th>
         <th scope="col" sortable="mrp.value" class="sortable">MRP
         </th>
         <th scope="col" class="sortable">SSP     
         </th>
         <th scope="col" class="sortable"  >YMP
         </th>
         <th scope="col" class="sortable">Date Added
         </th>
      </tr>
   </thead>
   <tbody *ngFor ="let tempProduct of products">
      <tr>
         <th scope="row"><input type="checkbox" name="cbProducts"
            value=`${{tempProduct.id}}`></th>
         <td>{{tempProduct.id}}</td>
         <td>
            <img
               src="http://localhost:8080/YourMart-PMP-Admin- 
               Panel/resources/images/{{tempProduct.primaryImg}}"
               height="50" width="50">
         </td>
         <td>{{tempProduct.name}}</td>
         <td>{{tempProduct.seller.name}}</td>
         <td>{{tempProduct.category.name}}</td>
         <td>{{tempProduct.status}}</td>
         <td >{{tempProduct.mrp}}</td>
         <td >{{tempProduct.ssp}}</td>
         <td >{{tempProduct.ymp}}</td>
         <td >{{tempProduct.created}}</td>
      </tr>
   </tbody>
</table>