Modified code to make striped and bordered as configuration options (…

…true by default) for the table styling.

components/table/ng-table.component.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, EventEmitter, ElementRef, Renderer} from '@angular/core';
+import {Component, Directive, EventEmitter, ElementRef, Renderer, OnInit} from '@angular/core';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgFor} from '@angular/common';
 
 import {NgTableSorting} from './ng-table-sorting.directive';
@@ -8,7 +8,7 @@ import {NgTableSorting} from './ng-table-sorting.directive';
   inputs: ['rows', 'columns', 'config'],
   outputs: ['tableChanged'],
   template: `
-    <table class="table table-striped table-bordered dataTable"
+    <table class="table dataTable" [ngClass]="{'table-striped': config.striped, 'table-bordered': config.bordered}"
            role="grid" style="width: 100%;">
       <thead>
       <tr role="row">
@@ -28,12 +28,22 @@ import {NgTableSorting} from './ng-table-sorting.directive';
 `,
   directives: [NgTableSorting, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
 })
-export class NgTable {
+export class NgTable implements OnInit {
   // Table values
   public rows:Array<any> = [];
   private _columns:Array<any> = [];
   public config:any = {};
 
+  ngOnInit() {
+      if (this.config.striped === undefined) {
+          this.config.striped = true;
+      }
+
+      if (this.config.bordered === undefined) {
+          this.config.bordered = true;
+      }
+  }
+
   // Outputs (Events)
   public tableChanged:EventEmitter<any> = new EventEmitter();
 

demo/components/table/table-demo.html

@@ -2,7 +2,7 @@
        [ngTableFiltering]="config.filtering"
        (tableChanged)="onChangeTable(config)"/>
 
-<ngTable [config]="config.sorting"
+<ngTable [config]="config.table"
            (tableChanged)="onChangeTable(config)"
            [rows]="rows" [columns]="columns">
 </ngTable>

demo/components/table/table-demo.ts

@@ -32,8 +32,12 @@ export class TableDemo implements OnInit {
 
   public config:any = {
     paging: true,
-    sorting: {columns: this.columns},
-    filtering: {filterString: '', columnName: 'position'}
+    filtering: {filterString: '', columnName: 'position'},
+    table: {
+        columns: this.columns,
+        striped: true,
+        bordered: true
+    }
   };
 
   private data:Array<any> = TableData;