jqwidgets-scripts-custom/demos/Angular/grid/dataexport/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
        [width]="getWidth()" [source]="dataAdapter" [columns]="columns"
        [sortable]="true" [altrows]="true" [selectionmode]="'multiplecellsadvanced'">
    </jqxGrid>

    <div style="margin-top: 20px">
      <div style="float: left">
        <jqxButton [theme]="'material'" (onClick)="excelBtnOnClick()">Export to Excel</jqxButton>
        <br /><br />
        <jqxButton [theme]="'material'" (onClick)="xmlBtnOnClick()">Export to XML</jqxButton>
      </div>
      <div style="float: left; margin-left: 10px">
        <jqxButton [theme]="'material'" (onClick)="csvBtnOnClick()">Export to CSV</jqxButton>
        <br /><br />
        <jqxButton [theme]="'material'" (onClick)="tsvBtnOnClick()">Export to TSV</jqxButton>
      </div>
      <div style="float: left; margin-left: 10px">
        <jqxButton [theme]="'material'" (onClick)="htmlBtnOnClick()">Export to HTML</jqxButton>
        <br /><br />
        <jqxButton [theme]="'material'" (onClick)="jsonBtnOnClick()">Export to JSON</jqxButton>
      </div>
      <div style="float: left; margin-left: 10px">
        <jqxButton [theme]="'material'" (onClick)="pdfBtnOnClick()">Export to PDF</jqxButton>
      </div>
    </div>

</div>