Row Selection

The Grid enables the users to select a single row or multiple rows by enabling Row Selection. Once the Data table row selection functionality is enabled, the end-user will be able to select data rows. For more convenience, Ornamentum data table supports 03 main row selection modes.

  1. Single: Single data row selection
  2. Single Toggle: Single row selection with row de-select capability
  3. Multi: Multiple row selection

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

Basic Usage

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

To Enable row selection, configure the rowSelectable to true and by default, the table does not display row selectable option, which means the property is disabled.

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

Useful Properties

Furthermore, There are some additional configurations available to customize the functionality. These properties will be discussed in the following sections.

Select Mode

selectMode: string = 'single' | 'single_toggle' | 'multi'   Default Value: 'single'Target Component: <ng-data-table>

This control allows you to configure the row selection mode. There are 03 types of row selections available in the data table as mentioned above.

  1. Single Row Selection: 'single'

    The user will be allowed to select only one row at a time and not allowed to deselect the selected option by clicking the same row. If another row is being selected, the previously selected row will be deselected automatically.

    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-10of10
    / 1
    import { Component } from '@angular/core';
    
    import { ExampleData } from 'helper-models';
    
    import { DataFetchService } from 'helper-services';
    
    @Component({
      selector: 'app-single-row-selection-usage',
      templateUrl: './single-row-selection-usage.component.html'
    })
    export class SingleRowSelectionUsageComponent {
      public items: ExampleData[];
    
      constructor(private dataFetchService: DataFetchService) {
        this.items = this.dataFetchService.fetchStaticData();
      }
    }
    
  2. Single Toggle Row Selection: 'single_toggle'

    The user will be allowed to select only one row at a time and lets to deselect the selected option by clicking the same row. If another row is being selected, previously selected row will be automatically deselected. Additionally, users are facilitated with to remove the row selection by clicking the same row.

    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-10of10
    / 1
    import { Component } from '@angular/core';
    
    import { ExampleData } from 'helper-models';
    
    import { DataFetchService } from 'helper-services';
    
    @Component({
      selector: 'app-single-toggle-row-selection-usage',
      templateUrl: './single-toggle-row-selection-usage.component.html'
    })
    export class SingleToggleRowSelectionUsageComponent {
      public items: ExampleData[];
    
      constructor(private dataFetchService: DataFetchService) {
        this.items = this.dataFetchService.fetchStaticData();
      }
    }
    
  3. Multi Row Selection: 'multi'

    This selection technique facilitated with to select deselect single/multiple row selection checkboxes as desired or by clicking anywhere in the row if Select on Row Click functionality 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-10of10
    / 1
    import { Component } from '@angular/core';
    
    import { ExampleData } from 'helper-models';
    
    import { DataFetchService } from 'helper-services';
    
    @Component({
      selector: 'app-multi-row-selection-usage',
      templateUrl: './multi-row-selection-usage.component.html'
    })
    export class MultiRowSelectionUsageComponent {
      public items: ExampleData[];
    
      constructor(private dataFetchService: DataFetchService) {
        this.items = this.dataFetchService.fetchStaticData();
      }
    }
    

Show Row Select Checkbox

showRowSelectCheckbox: boolean   Default Value: trueTarget Component: <ng-data-table>

By configuring This property, It displays row selection checkboxes for all the available rows in the data table and triggers the Row Select Change event for each row implicitly, when the user changes the state of the row checkbox.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-show-row-select-checkbox-usage',
  templateUrl: './show-row-select-checkbox-usage.component.html'
})
export class ShowRowSelectCheckboxUsageComponent {
  public items: ExampleData[];

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

Show Row Select All Checkbox

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

This property allows the users to select all the rows in current view at once by clicking on a single checkbox or else selecting all the rows one by one will trigger the checkbox. It was located in the top of the row selection checkbox column and for each page, view have separate row select all checkbox. It triggers the Row Select Change event automatically when the user changes the state of the select all checkbox.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-show-row-select-all-checkbox-usage',
  templateUrl: './show-row-select-all-checkbox-usage.component.html'
})
export class ShowRowSelectAllCheckboxUsageComponent {
  public items: ExampleData[];

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

Select On Row Click

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

This property allow the users to perform row click operation anywhere within a row. It will trigger the Row Select Change for each row click event implicitly, based on the provided Select Mode.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-select-on-row-click-usage',
  templateUrl: './select-on-row-click-usage.component.html'
})
export class SelectOnRowClickUsageComponent {
  public items: ExampleData[];

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

Select Track By

selectTrackBy: string   Default Value: 'id'Target Component: <ng-data-table>

This property allows the users to provide a field name to identify a selection item schema and it might be uniquely identifiable all over the data set. When a user selects a row, the data table Row Select Change will emit the selected row selection id for each row selection operation.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

Selected Row

selectedRow: any   Default Value: undefinedTarget Component: <ng-data-table>Depends On: [selectTrackBy]

This property allows to set a specifically selected row to display after the data table Initialization or component initialization events fired. It accepts a Select Track By column any unique field value and can only be used when Select Mode is 'single' or 'single_toggle'.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';


@Component({
  selector: 'app-selected-row-usage',
  templateUrl: './selected-row-usage.component.html'
})
export class SelectedRowUsageComponent {
  public items: ExampleData[];
  public selectedRow: any;

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

  public onDataTableInit(): void {
    this.selectedRow = 10;
  }
}

Selected Rows

selectedRows: any[]   Default Value: []Target Component: <ng-data-table>Depends On: [selectTrackBy]

This property allows to set specifically selected rows to display after the data table Initialization or component initialization events fired. It accepts Select Track By column any unique field values array and can only be used when Select Mode is 'multi'.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-selected-rows-usage',
  templateUrl: './selected-rows-usage.component.html'
})
export class SelectedRowsUsageComponent {
  public items: ExampleData[];
  public selectedRows: any[];

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

  public onDataTableInit(): void {
    this.selectedRows = [10, 20, 25];
  }
}
Row Expand Template
State Persistence
Column Binding
API Doc for Data Table Row Selection