Sorting

Sort feature allows you to decide about the order of elements presented in Generic UI grid. When sorting is enabled, all you have to do is to click on one of the column headers. After which, the elements will be reorganized in two ways:

  • ascending - one click on the column header,
  • descending - two clicks on the column header,
  • default - three clicks turns off sorting

The example below shows you how to turn on the sorting feature in the Generic UI Grid for Angular. Try to click on the column headers and see how the column values change places.

Name
Position
Team
Training
Company
Mark Ross Team Leader TI 13 Genco Pura Olive Oil Company Concepción King Carpenter KN 33 Globex Corporation Vanecia Green Painter CR 42 Soylent Corp Samara Anderson Electrician PU 100 Initech Maxine Hamilton SEO Manager KN 29 Gekko & Co Dan Lee Director TI 92 Sterling Cooper Paul Long Web Developer AN 13 Hooli Madonna Snyder Product Manager DR 81 Vehement Capital Partners Oriole Perkins Public Relations TI 72 Massive Dynamic Ernest Jordan Copywriter TI 55 Wonka Industries
@Component({
	template: `
		<gui-grid [columns]="columns"
				  [source]="users"
				  [sorting]="sorting">
		</gui-grid>
	`
})
export class SingleSortComponent {

	users = users;

	columns = [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 80
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }];

	sorting: GuiSorting = {
	    enabled: true
	};
	
	
}

Multi sorting

Generic UI data grid has a built-in multi sorting feature that allows you to have enabled more than one sorting function.

To enable the multi sorting function you have to add fallowing code multiSorting: true to the sorting configuration. Multi sorting works same as sorting, but it can be activated on multiple columns. The arrow seen in the column headers informs that the order of the column cells has been changed. It helps to monitor which column has had their cells rearranged.

Multi-sorting gives the ability to arrange data in a meaningful way.

Name
Position
Team
Training
Company
Mark Ross Team Leader TI 13 Genco Pura Olive Oil Company Concepción King Carpenter KN 33 Globex Corporation Vanecia Green Painter CR 42 Soylent Corp Samara Anderson Electrician PU 100 Initech Maxine Hamilton SEO Manager KN 29 Gekko & Co Dan Lee Director TI 92 Sterling Cooper Paul Long Web Developer AN 13 Hooli Madonna Snyder Product Manager DR 81 Vehement Capital Partners Oriole Perkins Public Relations TI 72 Massive Dynamic Ernest Jordan Copywriter TI 55 Wonka Industries
@Component({
	template: `
		<gui-grid [columns]="columns"
				  [source]="users"
				  [sorting]="sorting">
		</gui-grid>
	`
})
export class MultiSortComponent {

	users = users;

	columns = [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 80
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }];

	sorting: GuiSorting = {
	    enabled: true,
	    multiSorting: true
	};
	
	
}

Related articles:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.