Data Table Column Binding

The column binding section consists of set of basic properties which will describe how the users can use them for data table column, data binding and manipulate data inside the column. The grid can facilitate a column for every item of the data array.

What You Will See

Sales Products

Auto IDIDProduct LineProduct TypeRevenueQuantityGross Margin
110Camping EquipmentCooking Gear59628.664890.34754797
215Camping EquipmentSleeping Bags87728.963520.39814629
320Camping EquipmentLanterns6940.031090.36186587
425Mountaineering EquipmentSafety62464.888980.24468085
530Mountaineering EquipmentClimbing Accessories19476.82960.47613982
635Mountaineering EquipmentClimbing Accessories4621.682620.51643991
740Mountaineering EquipmentTools32870.48560.49166667
845Personal AccessoriesKnives30940.252750.28895209
950Outdoor ProtectionFirst Aid4057.21800.60070985
1055Personal 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-binding-usage',
  templateUrl: './column-binding-usage.component.html',
  styles: ['.product-type { font-weight: bold }']
})
export class ColumnBindingUsageComponent {
  public items: ExampleData[];

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

Basic Usage

field: string   Default Value: undefinedTarget Component: <ng-data-table-column>

The following code snippet will depicts the basic usage of column data binding. To use all it's associated properties it is mandatory to define field property that is bound to a column, else the functionality may not work as expected.

This property will act as a identifier for access specific data set in your data array. The field name should be a valid Javascript identifier.

  <ng-data-table
    ... >
    <ng-data-table-column
       ...
      [field]="'sampleField'">
    </ng-data-table-column>
  </ng-data-table>

Useful Properties

There are several more properties that support column binding functionality when a field property is defined.

ID (Identifier)

id: string   Default Value: undefinedTarget Component: <ng-data-table>

This property is a mandatory property which required a unique and valid Javascript identifier for each and every data table in your application. Failed to define this property caused to throw an error and halt the execution.

Title

title: string   Default Value: undefinedTarget Component: <ng-data-table-column>

This property is useful to set a name for the field that the column is bounded. If the property is not provided Ornamentum will render the column title as blank.

Index Column Title

indexColumnTitle: string   Default Value: '#'Target Component: <ng-data-table>Depends On: [showIndexColumn]

Index column title can be used to set a custom title for index column when it is enabled. Further details about index column refer the Show Index Column section.

CSS Class

cssClass: string   Default Value: undefinedTarget Component: <ng-data-table-column>

This property is useful if you want to inject a CSS class into your data table column cells. You can provide a string or a function that returns a CSS class or classes in which space delimiter separated without a dot selector.

Width

width: number | string   Default Value: undefinedTarget Component: <ng-data-table-column>

The width can be used to set a static width for grid column. It accepts number that automatically converts its unit to pixels or the user can manually define a string with respective CSS units (px, cm, mm etc).

Visible

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

This property is useful if you want to show your column in the data table. If it is set to false, Ornamentum will not render the column and its content but include it in Show Column Selector dropdown as not selected.

Show In Column Selector

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

If this property is set to true, the column will be displayed on Show Column Selector dropdown with field title and selected state, By enabling this functionality end users will able to customize what they want to see.

Show Index Column

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

This property can be uses to display a additional index column and appears on left side as first column on the data table. It will start from 1 and keep incrementing by 1 for each data row to maintain a unique numerical id for all over the data table.

Sales Products

#IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
110FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
215FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
320TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
425FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
530WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
635WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
740TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
845TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
950TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
1055TelephoneGolf 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-index-column-usage',
  templateUrl: './show-index-column-usage.component.html'
})
export class ShowIndexColumnUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}
Sorting
Filtering
Header Details
Responsive Configuration
API Doc for Data Table Column Sorting