Data Table Header Details

Showing header details along with the header menu will help users to get a better understanding of what kind of data is shown and allow them to customize the overall grid table by providing a several rich data table configurations.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Whoops!

No data to display. Added data will appear here.

import { Component } from '@angular/core';

import { DataTableDataBindCallback, DataTableHttpResourceFactoryService } from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-header-details-usage',
  templateUrl: './header-details-usage.component.html'
})
export class HeaderDetailsUsageComponent {

  public onDataBind: DataTableDataBindCallback<ExampleData>;

  constructor(private resourceFactory: DataTableHttpResourceFactoryService) {
    const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
    this.onDataBind = exampleDataResource.onDataBind('/api/data');
  }
}

Basic Usage

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

To show the header in the data table users need to set the showHeader property to true. The default value for showing header is false.

By enabling showHeader the header section will be enabled and there will be few additional properties that can be configured after enabling the header section. Those details will be explained in detail in following sections.

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

Useful Properties

There are a few more properties that affect the behaviour of table header. All the available properties can be applied in the global level of grid configuration.

Title

title: string   Default Value: ''Target Component: <ng-data-table>Depends On: [showHeader]

Title property will allow defining a name for the grid table. By binding, a string value to the title property will be display on header section. Providing a meaningful name is mandatory to get a better understanding of showing the data for the users from the first impression.

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

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

Show Refresh Button

showRefreshButton: boolean   Default Value: falseTarget Component: <ng-data-table>Depends On: [showHeader]

This configuration can be used to enable/disable data refresh button. By enabling the refresh button users will be able to update the grid with the latest data by clicking on the refresh icon that appears in the header details bar.

This will become much handy while dealing with Server Side Basic or Server Side Web Socket Data Binding operations. When users click on the refresh button, it will trigger the particular event and Ornamentum will re-send a request by invoking the respective service call and render the data with the newly received response.

Also this property is useful in no data retrieval scenario, Please refer No Records Template for further details.

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin

Whoops!

No data to display. Added data will appear here.

import { Component } from '@angular/core';

import { DataTableDataBindCallback, DataTableHttpResourceFactoryService } from 'ornamentum';

import { ExampleData } from 'helper-models';


@Component({
  selector: 'app-show-refresh-button-usage',
  templateUrl: './show-refresh-button-usage.component.html'
})
export class ShowRefreshButtonUsageComponent {
  public onDataBind: DataTableDataBindCallback<ExampleData>;

  constructor(private resourceFactory: DataTableHttpResourceFactoryService) {
    const exampleDataResource = resourceFactory.getResourceProvider<ExampleData>();
    this.onDataBind = exampleDataResource.onDataBind('/api/data');
  }
}

Show Column Selector

showColumnSelector: boolean   Default Value: falseTarget Component: <ng-data-table>Depends On: [showHeader]

This property is used to show or hide the column selector button. By enabling the column selector property, Ornamentum display all the Show In Column Selector enabled properties. Users can select/deselect the available columns that need to be shown in the grid table. Selected columns will be displayed with provided Column Selector Width or default column width.

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

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}
Column Binding
Server Side Basic Data Binding
Server Side Web Socket Data Binding
Translations
State Persistence
API Doc for Data Table Header