Sorting

This feature enables column data sorting according to the selected sorting order in specified column fields. Following configuration types are available when working with data table sorting.

There are 03 types of sorting orders, which are:

  1. Ascending : Column data will be sorted in ascending order
  2. Descending : Column data will be sorted in descending order
  3. None (default order) : Column data will be displayed in the order of received

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1-10of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-sorting-usage',
  templateUrl: './sorting-usage.component.html'
})
export class SortingUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Basic Usage

Sorting can be enabled by setting the sortable property as true. By default this property will be in false state. Sorting can be perform by clicking on the sorting icon placed on each column heading.

  <ng-data-table
    ...
    [sortable]="true">
  </ng-data-table>

By default the table does not sort it’s contents. Also there are set of additional properties can be uses with sortable property and those will be explain in next section.

After enabling the sortable users can simply change the sorting order to any above mention 3 types, by clicking on icon that appears on data table column top right side corner.

Useful Properties

There are other useful additional properties where the behaviour of the sorting can be applied independently except for Multi Column Sortable property.

Sort Order

sortOrder: string = 'asc' | 'desc' | ''  
Default Value: ''

Using the sortOrder property users can order the data that already fetched or being fetched from a data source. If the sorting order has not been defined by the user, default sorting mechanism will be applied for sortable enabled columns.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
85WebDepartment StoreCamping EquipmentCooking Gear21434.7361340.75675458
90WebDepartment StoreCamping EquipmentCooking Gear11394.396090.46552646
95MailDepartment StoreCamping EquipmentSleeping Bags50892.686010.29145017
100MailDepartment StoreCamping EquipmentSleeping Bags150163.0915290.33560737
105TelephoneDepartment StoreCamping EquipmentPacks26806.923880.40396584
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
60WebGolf ShopPersonal AccessoriesEyewear129351990.39374952
65WebGolf ShopPersonal AccessoriesKnives866.2710.59836066
70TelephoneGolf ShopGolf EquipmentIrons16025.28320.44535634
75WebGolf ShopGolf EquipmentWoods53082.54620.44845066
Results: 1-10of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-sort-order-usage',
  templateUrl: './sort-order-usage.component.html'
})
export class SortOrderUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Sort Field

sortField: string  
Default Value: 'same column field name'

Sort Field can be overridden by providing a different column field name, by default sort field value is same as the column name. Providing a different column name to the sortField, Ornamentum will start sorting according to the provided column's data.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
55TelephoneGolf ShopPersonal AccessoriesWatches7939.8660.44272652
Results: 1-10of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-sort-field-usage',
  templateUrl: './sort-field-usage.component.html'
})
export class SortFieldUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Multi Column Sortable

multiColumnSortable: boolean  
Default Value: false

Multi column sortable can be used only inside the data table global level configuration. If multi column sortable is been enabled, data sorting will be processed based on the previously preserved sorting order.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
105TelephoneDepartment StoreCamping EquipmentPacks26806.923880.40396584
100MailDepartment StoreCamping EquipmentSleeping Bags150163.0915290.33560737
95MailDepartment StoreCamping EquipmentSleeping Bags50892.686010.29145017
90WebDepartment StoreCamping EquipmentCooking Gear11394.396090.46552646
85WebDepartment StoreCamping EquipmentCooking Gear21434.7361340.75675458
80MailGolf ShopGolf EquipmentGolf Accessories5911.054920.50059634
75WebGolf ShopGolf EquipmentWoods53082.54620.44845066
70TelephoneGolf ShopGolf EquipmentIrons16025.28320.44535634
65WebGolf ShopPersonal AccessoriesKnives866.2710.59836066
60WebGolf ShopPersonal AccessoriesEyewear129351990.39374952
Results: 1-10of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-multi-column-sortable-usage',
  templateUrl: './multi-column-sortable-usage.component.html'
})
export class MultiColumnSortableUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData(0, 20);
  }
}

Server-side Column Sorting

This feature enables to perform column data sorting in the server side. Also all the attributes mentioned in the Useful Properties section can be used in this nature as well.

Server-side Single Column Sorting

Server-side single sorting can be enabled by simply setting sortable property in to value true, when Server-side Data Binding technique is used.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Whoops!

No data to display. Added data will appear here.

import { Component } from '@angular/core';

import { DataTableHttpDataFetchService, DataTableDataBindCallback } from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-server-side-single-column-sorting',
  templateUrl: './server-side-single-column-sorting.component.html'
})
export class ServerSideSingleColumnSortingComponent {
  public onDataBind: DataTableDataBindCallback;

  constructor(private dataFetchService: DataTableHttpDataFetchService<ExampleData>) {
    this.onDataBind = this.dataFetchService.onDataBind('/api/data');
  }
}

Server-side Multi Column Sorting

This feature will enable to perform the same behaviour mentioned in the Multi Column Sortable, in the server-side.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Whoops!

No data to display. Added data will appear here.

import { Component } from '@angular/core';

import { DataTableHttpDataFetchService, DataTableDataBindCallback } from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-server-side-multi-column-sorting',
  templateUrl: './server-side-multi-column-sorting.component.html'
})
export class ServerSideMultiColumnSortingComponent {
  public onDataBind: DataTableDataBindCallback;

  constructor(private dataFetchService: DataTableHttpDataFetchService<ExampleData>) {
    this.onDataBind = this.dataFetchService.onDataBind('/api/data');
  }
}
Column Resizing
Pagination
Header Details
API Doc for Data Table Sorting