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

sortable: boolean   Default Value: falseTarget Component: <ng-data-table-column>

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
    ... >
    <ng-data-table-column
       ...
      [sortable]="true">
    </ng-data-table-column>
  </ng-data-table>

There are additional input properties which can be used with [sortable] input property to override default behaviors. Ornamentum sorting behavior persist the natural order of data source while ordering data rows with equal target field values.

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>Depends On: [sortable]

The initial sort direction can be overridden via this input property.

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 bound field name'Target Component: <ng-data-table-column>Depends On: [sortable]

The sort field path is used to order the table bound data set upon sort order change. The column bound field path is considered as the default sort field path. The sort Field can be overridden by providing a different field path available in data source. Override this value only when it is required to use a different field path instead of default column field path.

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 Sorting

multiColumnSortable: boolean   Default Value: falseTarget Component: <ng-data-table>

Multi column sorting is disabled by default. It can be enabled by setting [multiColumnSortable] input property true in <ng-data-table> component.

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

This will change the default sort behavior by allowing the user to sort data based on multiple columns at once depending on the sort priority. The sort priority will appear on the column when data table is sorted by more than one column.

The sort priority can be explicitly configured for sortable columns when multi column sorting mode is enabled. This can be configured via [sortPriority] input property which accepts a positive column sort index integer. Sort priority define the order which shorting should be applied and value of sort priority will appear on table column header when configured. Sort priority is only applicable for sortable columns with an explicit sort order of 'asc' or 'desc'. Descriptive errors will be thrown when sort priority is miss configured.

Sales Products

1ID2Order Method TypeRetailer Type3Product 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 Sorting

Sorting functionality is fully supported by server side date binding approaches out of the box. Please refer Server Side Basic and Server Side WebSocket Data Binding documentations for more information.

Column Resizing
Pagination
Header Details
API Doc for Data Table Sorting