Data Table Overview

Ornamentum Data Table is a highly configurable Angular component which support table view data representation. This component supports client/server/real-time data binding along with data filtering, sorting, grouping, pagination, selection, templating, state persistence, theming and much more.

This component can be integrated with any UI framework and fully responsive dynamic mobile friendly component user interface design will deliver best user experience in any device resolution. Built with pure angular components and minimal peer dependencies to minimize overall bundle size. Guaranteed seamless integration via developer friendly component API along with rich example code based documentation. This component support all angular supported browsers out of the box.

Usage Demo

Following example depicts the outer appearance of the Ornamentum Data Table. Try out yourself in Stack Blitz Demo.

		ID	Order Method Type	Retailer Type	Product Type	Revenue	Quantity	Gross Margin
			Select	Select	Select

10	Fax	Outdoors Shop	COOKING GEAR	59628.66	489	0.34754797

15	Fax	Outdoors Shop	SLEEPING BAGS	87728.96	352	0.39814629

20	Telephone	Outdoors Shop	LANTERNS	6940.03	109	0.36186587

25	Fax	Outdoors Shop	SAFETY	62464.88	898	0.24468085

30	Web	Outdoors Shop	CLIMBING ACCESSORIES	19476.8	296	0.47613982

35	Web	Outdoors Shop	CLIMBING ACCESSORIES	4621.68	262	0.51643991

40	Telephone	Outdoors Shop	TOOLS	32870.4	856	0.49166667

45	Telephone	Outdoors Shop	KNIVES	30940.25	275	0.28895209

50	Telephone	Outdoors Shop	FIRST AID	4057.2	180	0.60070985

55	Telephone	Golf Shop	WATCHES	7939.8	66	0.44272652

Results: 1-10of20

Limit:

/ 2

Basic Installation

Angular 7 or higher version is required to use the latest version (3.1.0) of Ornamentum.

Install Ornamentum packages and it's peer dependencies using either of following command depending on your package manager.
```
 npm install ornamentum lodash --save
```
or
```
 yarn add ornamentum lodash
```

Once the installation is successful, add the Ornamentum Data Table component to your application Root Module as depicted below.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { DataTableModule } from 'ornamentum';

import { AppComponent } from './app.component';

// App component module  
@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  // Refer https://angular.io/guide/frequent-ngmodules about module usages.
  imports: [
    BrowserModule, // Optional module
    CommonModule, // Optional module
    FormsModule, // Optional module
    DataTableModule.forRoot() // Import data table module with root configuration.
  ]
})
export class AppModule {
}

Import the Ornamentum theme style sheet reference to apply theming of your preference. Refer Themes section for more details.
- SCSS (recommended approach): Include Ornamentum theme SCSS style sheets in Angular CLI config "styles".
```
"styles": [
  "node_modules/ornamentum/themes/dark.theme.scss",
  "node_modules/ornamentum/themes/addon.dark.theme.scss",
  "styles.scss"
]
```
  You must install compass mixins if you are using scss style sheets. Install using either of following command depending on your package manager.
```
 npm install compass-mixins --dev
```
  or
```
 yarn add compass-mixins --dev
```
- CSS: Include Ornamentum prebuilt CSS theme style sheets in Angular CLI config "styles".
```
"styles": [
  "node_modules/ornamentum/prebuilt-themes/dark.theme.css",
  "node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css",
  "styles.css"
]
```

Finally, use Ornamentum data table component.

Example usage component controller class

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data: any[] = [
    {
      orderMethodType: 'Fax',
      grossMargin: 0.34754797,
      id: 10
    },
    {
      orderMethodType: 'Fax',
      grossMargin: 0.39814629,
      id: 15
    },
    {
      orderMethodType: 'Telephone',
      grossMargin: 0.36186587,
      id: 20
    },
    {
      orderMethodType: 'Fax',
      grossMargin: 0.24468085,
      id: 25
    },
    {
      orderMethodType: 'Web',
      grossMargin: 0.47613982,
      id: 30
    },
  ];
}

Example usage component markup file

<ng-data-table
  [id]="'sales_products_detail_summery'"
  [title]="'Sales Products'"
  [items]="data"
  [indexColumnTitle]="'#'"
  [showIndexColumn]="true"
  [indexColumnWidth]="10">
  <ng-data-table-column
    [field]="'id'"
    [title]="'ID'"
    [width]="20">
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'orderMethodType'"
    [title]="'Order Method Type'"
    [sortable]="true"
    [width]="130">
  </ng-data-table-column>
  <ng-data-table-column
    [field]="'grossMargin'"
    [title]="'Gross Margin'"
    [filterable]="true"
    [width]="100">
  </ng-data-table-column>
</ng-data-table>