Data Table Overview
Ornamentum data table component is a highly configurable lightweight Angular component which supports table view data representation. Ornamentum data table supports client/server/real-time data binding along with data filtering, sorting, grouping, pagination, selection, templating, state persistence, theming and much more.
Ornamentum data table can be integrated with any of the UI frameworks that are currently available. The fully responsive, dynamic and mobile friendly design of the user interface will deliver the best user experience in any device resolution. It's built with pure angular components and minimal peer dependencies to minimize overall bundle size. Seamless integration via developer friendly API along with a rich sample code based documentation. Ornamentum works with all angular supported browsers out of the box.
Usage Demo
Following example depicts the basic usage of the Ornamentum Data Table. Try out yourself in Stack Blitz Demo.
Sales Products
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 | ||
Basic Installation
Ornamentum major versions are aligned with Angular Major versions hence, You can ony use Ornamentum 8.x.x versions with Angular 8.x.x version. Latest Ornamentum version (8.1.4) require Angular 8.x.x version.
Install Ornamentum packages and it's peer dependencies using either of following command depending on your dependency manager.
npm install ornamentum --save
or
yarn add ornamentum
Once the installation is successful, add the Ornamentum Data Table component to your application Root Module as shown 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. Follow Angular CLI: Global Styles documentation for more information on how to integrate third party style sheets. Refer Ornamentum Themes documentation for more details about theme style sheet references.
SCSS (recommended approach): Include Ornamentum theme source SCSS references. array.
"node_modules/ornamentum/themes/dark.theme.scss" "node_modules/ornamentum/themes/addon.dark.theme.scss"
or
CSS: Include Ornamentum prebuilt CSS references.
"node_modules/ornamentum/prebuilt-themes/dark.theme.css" "node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css"
Finally, use Ornamentum data table component.
Example usage component controller class Example usage component markup fileimport { 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 }, ]; }
<ng-data-table [id]="'sales_products_overview_03'" [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>
Peer Dependencies
Following dependencies are required to be installed along with Ornamentum.
Functionality
Refer below sections for available feature/functionality usage in detail.
- Data Binding
- Client Side Basic Data binding
- Client Side Stream Data binding
- Server Side Basic Data binding
- Server Side Web Socket Data binding
- Custom Data Provider
- Functionality
- Templating
- Options
- Styling
- Advanced
- Experimental
Suggested Links
Dropdown Basic UsageAPI Doc for DataTable Module