Responsive Configuration

Ornamentum allows you to set-up data table responsive configurations in a couple of methods such as by overriding available default configurations and make the data table supports for different device resolutions and viewports.

What You Will See

Sales Products

#
IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
1
10FaxOutdoors ShopCamping EquipmentCooking Gear59628.664890.34754797
2
15FaxOutdoors ShopCamping EquipmentSleeping Bags87728.963520.39814629
3
20TelephoneOutdoors ShopCamping EquipmentLanterns6940.031090.36186587
4
25FaxOutdoors ShopMountaineering EquipmentSafety62464.888980.24468085
5
30WebOutdoors ShopMountaineering EquipmentClimbing Accessories19476.82960.47613982
6
35WebOutdoors ShopMountaineering EquipmentClimbing Accessories4621.682620.51643991
7
40TelephoneOutdoors ShopMountaineering EquipmentTools32870.48560.49166667
8
45TelephoneOutdoors ShopPersonal AccessoriesKnives30940.252750.28895209
9
50TelephoneOutdoors ShopOutdoor ProtectionFirst Aid4057.21800.60070985
10
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-responsive-conf-usage',
  templateUrl: './responsive-conf-usage.component.html'
})
export class ResponsiveConfUsageComponent {
  public items: ExampleData[];

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

Content Height

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

This property was responsible to enable static-content height and vertical scrolling in the data table. By providing the height in pixels to override the default content height and if the content height is not defined explicitly, Ornamentum will take parent container height as the data table content height.

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-10of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

Width

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

This property can be used to define a static data table content width. It accepts pixels as any number or string, and if the width is not defined by explicitly, Ornamentum will take the parent container width as the data table 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-10of20
/ 2
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

Min Content Height

minContentHeight: string | number   Default Value: 200Target Component: <ng-data-table>

This property was uses to set minimum height which act as an overlay height when Pagination is disabled. provide the pixels as a number or string to see the property in action.

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
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-min-content-height-usage',
  templateUrl: './min-content-height-usage.component.html'
})
export class MinContentHeightUsageComponent {
  public items: ExampleData[];

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

Min Content Width

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

This property is used to enable a horizontal scroll bar when the container width meet defined minimum width. This becomes useful when building mobile responsive grid without scattering data on data table. Provide pixels as number or string to see the property in action.

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

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

Expander Column Width

expanderColumnWidth: string | number   Default Value: 30Target Component: <ng-data-table>Depends On: [expandableRows]

This property is used to set the width of the expander icon column. By providing a string or number in pixels you can customize the responsiveness of the expander column. This property can be used while Expandable Rows is enabled. for more details about expander column details refer Row Expand Template section.

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

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

Index Column Width

indexColumnWidth: string | number   Default Value: 30Target Component: <ng-data-table>Depends On: [showIndexColumn]

Using the index column width, you can set static data row auto-incrementing number column width manually. It accepts pixels as a type of number or string and this property can be used while Show Index Column is enabled.

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

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

Column Selector Width

columnSelectorWidth: string | number   Default Value: 240Target Component: <ng-data-table>Depends On: [showColumnSelector]

This property can be used to dynamically configure the column selector width when Show Column Selector is enabled. This property become handier when column names taking more space than the available selector width. Such a scenario can be handled by adjusting the default width by binding a value to columnSelectorWidth property.

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

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

Selection Column Width

selectionColumnWidth: string | number   Default Value: 30Target Component: <ng-data-table>Depends On: [rowSelectable]

This property can be used to set the row selector checkbox column width. It can be used only when the Row Selectable and Row Selection properties enabled.

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

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}
Row Selection
Row Expand Template
Column Binding
Events
API Doc for Data Table Responsive Configuration