jqwidgets-scripts-custom/demos/Angular/treegrid/sortingapi/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxTreeGrid [theme]="'material'" style="float: left;"
             [width]="550"
             [source]="dataAdapter"
             [columns]="columns"
             [sortable]="true"
             [ready]="ready"
             #TreeGrid>
</jqxTreeGrid>

<div style="float: left; margin-left: 10px;">
  <table>
    <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 [theme]="'material'" #columnName
                         [width]="100" [source]="['First Name', 'Last Name' , 'City' , 'Country']"
                         [selectedIndex]="0" [autoDropDownHeight]="true">
        </jqxDropDownList>
      </td>
    </tr>
    <tr>
      <td align="right">Sort Order:</td>
      <td align="left">
        <jqxDropDownList [theme]="'material'" #sortOrder
                         [width]="100" [source]="['Ascending', 'Descending']"
                         [selectedIndex]="0" [autoDropDownHeight]="true">
        </jqxDropDownList>
      </td>
    </tr>
    <tr>
      <td align="right"></td>
      <td align="left">
        <jqxButton [theme]="'material'" #sort style="float: left;" (onClick)="clickSort()">Sort</jqxButton>
        <jqxButton [theme]="'material'" #clear style="float: left; margin-left: 5px;" (onClick)="clickClear()">Clear</jqxButton>
      </td>
    </tr>
  </table>
</div>