Sorting

Data table sorting feature allows the user to order data on initial load and as well as by clicking on the sortable column headers (with sort indicator icon). This feature can be used with all types of data binding technique described in data binding section.

Ornamentum data table also supports powerful Multi-Column Sorting and Sorting Expressions, which are demonstrated below in detail.

Three sorting directions are supported:

  1. Ascending: Data rows will be sorted by target column ascending order.
  2. Descending: Data will be sorted by target column descending order.
  3. None (default order): Data represented in natural order without sorting.

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 is disabled by default. It can be enable by setting the [sortable] input property true in any target <ng-data-table-column> component.

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

There are additional input properties which can be used with [sortable] input property to override default behaviors.

Useful Properties

Below listed properties can be used to change the default behaviours of the sorting functionality.

Sort Order

sortOrder: 'asc' | 'desc' | ''Default Value: ''Target Component: <ng-data-table-column>

The default sort order to be applied on initial load can be overridden by setting an explicit sort direction via [sortOder] input property. This value is applicable only when sorting is enabled.

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: stringDefault Value: 'same column field name'Target Component: <ng-data-table-column>

Sort Field can be overridden by providing a different column field name which is available in the data source, by default sort field value is same as the column name. However, there can be instances where you should use a different field to sort data (i.e: Use ID field to sort). It is not required to have this field available in data table column list hence, it should be available in data source. This value is applicable only when sorting is enabled.

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: booleanDefault Value: falseTarget Component: <ng-data-table-column>

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 { DataTableHttpResourceFactoryService, 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<ExampleData>;

  constructor(private resourceFactory: DataTableHttpResourceFactoryService) {
    const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
    this.onDataBind = exampleDataResource.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 { DataTableHttpResourceFactoryService, 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<ExampleData>;

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