Row Selection

Row selection will add a additional column which contains check boxes when user need to select specific data or data set from the data table to perform their select operations. In these type of situations you might want to turn on the row selectable check boxes.

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

Enable row selectable option, simply set rowSelectable to true and by default row selection is in false state.

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

In default the table does not displays to selectable rows. But if you enabled selection row(s), there are some additional configurations available to do the row selection more easily. Those properties will be discuss on next section.

Useful Properties

As mention in earlier, there are some additional configurations which helps users to control the row selection.

Row Selection Mode

selectMode: string = 'single' | 'single_toggle' | 'multi'  
Default Value: 'single'

This control allows you to configure the row selection type. There are 3 types of row selections are available in the data table.

  1. Single Row Selection: "single"
  2. User will be allowed to select only one row at a time and did not allow to deselect selected option by click itself. If second row is been selected, firstly selected row will be automatically de-selected.

    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();
      }
    }
    
  3. Single Toggle Row Selection: "single_toggle"
  4. User will be allowed to select only one row at a time and allow to deselect selected option by click itself. If second row is been selected, firstly selected row will be automatically de-selected. Additionally, user will be facilitated to remove the row selection once after select on another 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();
      }
    }
    
  5. Multi Row Selection: "multi"
  6. User can be select multiple rows at a time and facilitated to remove the selected checkboxes by de-select individual 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-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: false

This property allow users to enable/disable individual row selection checkboxes for all available rows in the data table and triggers the rowSelectChange event for each row by automatically when user changes row checkbox(es) state.

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: false

This property was allow users to enable/disable the row select all checkbox on top of row selection column and triggers the rowSelectChange event by automatically when user changes select all checkbox state. Selecting all available checkboxes in a current table view will also triggers rowSelectChange 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-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: false

This property will allow users to select specific row(s) based on selectMode by clicking on anywhere on the row or clicks on row selectable checkboxes.

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'

This property let users to identify selected row(s) uniquely. When selecting row(s), data table will emit the value of the column specified by the user. Please refer Row Select Change section for about event binding details. All the examples shown in Row Selection Mode section have set selectTrackBy property as id.

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();
  }
}

Set Selected Row

selectedRow: any

This property let user to set a specific selected row in the data table by automatically right after the data table Initialization. This can only be uses when selection mode is single or single_toggle as mentioned in the Row Selection Mode section.

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, OnInit } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

  public ngOnInit() {
    this.selectedRow = 10;
  }
}

Set Selected Rows

selectedRows: any[]

This property let user to set specific rows to be selected in the data table by automatically right after the data table Initialization. This can only be use when selection 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, OnInit } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

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