Responsive Configuration

Ornamentum allows you to set-up data table responsive configurations in few ways, by overriding available default configurations you can customize data table responsiveness 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
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-10of20
/ 2
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(0, 20);
  }
}

Content Height

contentHeight: string | number  
Default Value: undefined

This property was responsible to enable static content height and vertical scrolling in data table. provide height in pixels to override the default content height and if content height is not defined by explicitly, ornamentum will takes 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: undefined

This property can be uses to define a static data table content width. it was accepts pixels as any number or string and if width is not defined by explicitly, ornamentum will takes 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 Height

minHeight: string | number  
Default Value: undefined

This property was uses to set minimum height which act as a overlay height when pageable is disabled. provide pixels as a number or string to see the property in action. for more about data table pagination and it's options refer Pagination 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
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

Min Width

minWidth: string | number  
Default Value: undefined

This property was uses to enable horizontal scroll bar when after container width meet defined minimum width. this was useful when building mobile responsive grid without scattering data on data table. provide 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
Results: 1-10of10
/ 1
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

Expander Column Width

expanderColumnWidth: string | number  
Default Value: 30

This property was allowing expander icon column width, by providing a string or number in pixels you can customize the responsiveness of the expander column. this property can be uses when expandableRows 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-10of20
/ 2
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(0, 20);
  }
}

Index Column Width

indexColumnWidth: string | number  
Default Value: 30

Using index column width, you can set static data row auto incrementing number column width by manually. it was accepts pixels as a type of number or string and this property can be uses when showIndexColumn is enabled. for more details about auto increment column details refer Row Indexing section.

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-10of20
/ 2
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(0, 20);
  }
}

Column Selector Width

columnSelectorWidth: string | number  
Default Value: 240

This property can be used to dynamically configure the column selector width when showColumnSelector is enabled. Useful when column names taking more space than the available selector width. that kind of use case can be adjust the default width by simply binding a value to columnSelectorWidth property which was available at table level.

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-10of20
/ 2
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(0, 20);
  }
}

Selection Column Width

selectionColumnWidth: string | number  
Default Value: 30

This property can be uses to set row selector checkbox column width. it can be uses when only rowSelectable and showRowSelectAllCheckbox properties are enabled. for more details about data selection refer Row Selection 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-10of20
/ 2
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(0, 20);
  }
}
Row Selection
Row Expand Template
Events
Row Indexing
API Doc for Data Table Responsive Configuration