jqwidgets-framework/demos/Angular/src/grid/sortingmany/app.component.ts

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

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';

import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild('myGrid', { static: false }) myGrid: jqxGridComponent;

	getWidth() : any {
		if (document.body.offsetWidth < 850) {
			return '90%';
		}
		
		return 850;
	}

	generateData = function() {
	    let data: any[] = new Array();
		const firstNames =
		[
			"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
		];
		const lastNames =
		[
			"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
		];
		const productNames =
		[
			"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
		];
		const priceValues =
		[
			"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
		];
		for (var i = 0; i < 200; i++) {
			const row = {};
			const productindex = Math.floor(Math.random() * productNames.length);
			const price = parseFloat(priceValues[productindex]);
			const quantity = 1 + Math.round(Math.random() * 10);
			
			row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
			row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
			row["productname"] = productNames[productindex];
			row["price"] = price;
			row["quantity"] = quantity;
			row["total"] = price * quantity;
			data[i] = row;
		}
		
		return data;
	}
	
	data: any[] = this.generateData();
	
    source: any =
    {
        datatype: 'array',
        datafields: [
			{ name: 'firstname', type: 'string' },
			{ name: 'lastname', type: 'string' },
			{ name: 'productname', type: 'string' },
			{ name: 'quantity', type: 'number' },
			{ name: 'price', type: 'number' },
			{ name: 'total', type: 'number' }
        ],
        localdata: this.data
    }

    dataAdapter: any = new jqx.dataAdapter(this.source);

    columns: any[] =
    [
      { text: 'Name', datafield: 'firstname', width: 120 },
	  { text: 'Last Name', datafield: 'lastname', width: 120 },
	  { text: 'Product', datafield: 'productname', width: 180 },
	  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
	  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
	  { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2', resizable: false }	
    ];

	ready = function() {
		this.sortby('firstname');
		this.sortby('lastname'); 
	}
}