jqwidgets-scripts-custom/demos/Angular/grid/sorting/src/app/app.component.html

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

<div style="font-size: 13px; font-family: Verdana; float: left">

    <jqxGrid [theme]="'material'" #myGrid (onSort)="myGridOnSort($event)"
        [width]="getWidth()" [height]="450" [source]="dataAdapter" [columns]="columns"
        [sortable]="true" [altrows]="true" [filterable]="true"
        [selectionmode]="'multiplecellsadvanced'">
    </jqxGrid>

    <div style="margin-top: 30px">
        <div style="float: left; margin-right: 10px">

            <jqxButton [theme]="'material'" (onClick)="removeSortBtnOnClick()" [height]="25">Remove Sort</jqxButton>

            <div style="margin-top: 10px"></div>

            <jqxCheckBox [theme]="'material'" (onChange)="sortBackGroundBtn($event)" [height]="25" [checked]="true">Sort Background</jqxCheckBox>

        </div>

        <div style="margin-left: 100px; float: left">
            Event Log:

            <jqxPanel [theme]="'material'" #myPanel [width]="300" [height]="80"></jqxPanel>

        </div>
    </div>
</div>