Row Grouping

Row Grouping can be used to show array of data under one specific single cell. in such situations, you can use row grouping functionality.

As mention in the above, when there is a requirement to group rows, you have to find out how many rows needed to be span and how do you structure the data in those rows. by default data table doesn't group any rows and users have to set it explicitly.

What You Will See

IDOrder Method TypeRetailer TypeProduct LineProduct TypeAvailable StoresRevenueQuantity
10FaxOutdoors ShopCamping EquipmentCooking GearBarneys New York59628.66489
J. C. Penney
Von Maur
15FaxOutdoors ShopCamping EquipmentSleeping BagsBarneys New York87728.96352
20TelephoneOutdoors ShopCamping EquipmentLanternsBarneys New York6940.03109
Von Maur
25FaxOutdoors ShopMountaineering EquipmentSafetyJ. C. Penney62464.88898
Von Maur
30WebOutdoors ShopMountaineering EquipmentClimbing AccessoriesJ. C. Penney19476.8296
35WebOutdoors ShopMountaineering EquipmentClimbing AccessoriesJ. C. Penney4621.68262
40TelephoneOutdoors ShopMountaineering EquipmentToolsJ. C. Penney32870.4856
Barneys New York
45TelephoneOutdoors ShopPersonal AccessoriesKnivesJ. C. Penney30940.25275
50TelephoneOutdoors ShopOutdoor ProtectionFirst AidBarneys New York4057.2180
55TelephoneGolf ShopPersonal AccessoriesWatchesStage Stores7939.866
import { Component } from '@angular/core';

import { DataTableRow } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

  public onDynamicRowSpanExtract(row: DataTableRow<ExampleData>): number {
    if (row.item.availableStores && row.item.availableStores.length) {
      return row.item.availableStores.length;
    }

    return 1;
  }

  public getStoreName(item: ExampleData, index: number, field: string) {
    return item.availableStores && item.availableStores[index] ? item.availableStores[index][field] : '-';
  }
}

Basic Usage

The onDynamicRowSpanExtract property let the user to set a call back function to determine the number of rows to be grouped or else default value 1 will be applied.

Row grouping can be enabled by binding a DataTableDynamicRowSpanExtractorCallback<any> type of callback function to onDynamicRowSpanExtract event handler.

  // Table level configuration
  <ng-data-table
    ...
    [onDynamicRowSpanExtract]="onDynamicRowSpanExtract">
  
    // Column level configuration
    <ng-data-table-column>
        ...
        <ng-template #ngDataTableCell let-row="row" let-spanIndex="spanIndex">
          <td>
            <span>{{getStoreName(row.item, spanIndex, 'storeName')}}</span> // custom template to set data in the grouped rows
          </td>
        </ng-template>
    </ng-data-table-column>
  </ng-data-table>
Column Resizing
Responsive Configuration
API Doc for Data Table Row Grouping