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 turn 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
import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [columns]="columns"
				  [source]="users"
				  [sorting]="sorting">
		</gui-grid>
	`
})
export class SingleSortComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        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 the following code multiSorting: true to the sorting configuration. Multi-sorting works the 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 its 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
import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [columns]="columns"
				  [source]="users"
				  [sorting]="sorting">
		</gui-grid>
	`
})
export class MultiSortComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        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
	};
	
	
}

Sorting per columns

It is possible to configure sorting for each column. You can define whether sorting should be enabled or not.

In the example below sorting is disabled for columns Name and Team.

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
import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [columns]="columns"
				  [source]="users"
				  [sorting]="sorting">
		</gui-grid>
	`
})
export class SingleSortComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        header: 'Name',
        field: 'name',
        sorting: {
            enabled: false
        }
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 80,
        sorting: {
            enabled: false
        }
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }];
			
	sorting: GuiSorting = {
	    enabled: true
	};
	
	
}

Related articles: