Data Table Dynamic Row Span

Dynamic Row span can be used to show an 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, the user has to find out how many rows needed to be span and how to structure the data in those rows. By default, data table doesn't group any rows and users have to set it explicitly.

If user going to use cell templates for more than one column user has to handel rowspan on that cell manually, Please refer to Row Span in Cell Template section. This feature is currently on an experimental level and functionality will not still fully guaranteed.

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-dynamic-row-span-usage',
  templateUrl: './dynamic-row-span-usage.component.html'
})
export class DynamicRowSpanUsageComponent {
  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

onDynamicRowSpanExtract: DataTableDynamicRowSpanExtractorCallback<any>   Default Value: 1Target Component: <ng-data-table>

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.

Dynamic Row Span can be enabled by binding a callback function to onDynamicRowSpanExtract event handler. The call back function should be a type of DataTableDynamicRowSpanExtractorCallback.

  // 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>
Cell Template
Column Resizing
Responsive Configuration
API Doc for Data Table Row Span