Column Resizing

Column resizing property facilitates the users to manually resize the columns as required. This feature is currently on an experimental level and functionality will not still fully guaranteed.

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-column-resizing-usage',
  templateUrl: './column-resizing-usage.component.html'
})
export class ColumnResizingUsageComponent {
  public items: ExampleData[];

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

Basic Usage

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

In order to enable column resizing property the resizable property should mark as true and the default value of the property is false. As per the above example resizable is enabled for all the columns.

  <ng-data-table
    ... >
    <ng-data-table-column
       ...
      [resizable]="true">
    </ng-data-table-column>
  </ng-data-table>
Sorting
API Doc for Data Table Column Resizable