jqwidgets-framework/demos/Angular/src/datatable/sortingapi/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxDataTable #myDataTable style="float: left"
    [width]="getWidth()" [source]="dataAdapter" [columns]="columns"
    [altRows]="true" [pageable]="true" [sortable]="true">
</jqxDataTable>

<div style="float: left; margin-left: 10px">
  <table>
    <tbody>
      <tr>
        <td align="right">
          <div><strong>Settings</strong></div>
        </td>
        <td align="left"></td>
      </tr>
      <tr>
        <td align="right">Column:</td>
        <td align="left">

          <jqxDropDownList #columnName
              [width]="100" [selectedIndex]="0" [autoDropDownHeight]="true"
              [source]="['Name','Last Name','Product','Quantity','Unit Price','Total']">
          </jqxDropDownList>

        </td>
      </tr>
      <tr>
        <td align="right">Sort Order:</td>
        <td align="left">

          <jqxDropDownList #sortOrder
              [width]="100" [selectedIndex]="0" [autoDropDownHeight]="true"
              [source]="['Ascending','Descending']">
          </jqxDropDownList>

        </td>
      </tr>
      <tr>
        <td align="right"></td>
        <td align="left">

          <jqxButton style="float: left" (onClick)="sortBtnOnClick()" [width]="50">Sort</jqxButton>
          <jqxButton style="float: left; margin-left: 5px" (onClick)="clearBtnOnClick()" [width]="50">Clear</jqxButton>

        </td>
      </tr>
    </tbody>
  </table>
</div>