Add a mock generic table example for column search

Author: mklein994

src/app/column-search/column-search.component.html

@@ -1,3 +1,14 @@
-<p>
-  column-search works!
-</p>
+<h2>Column Search</h2>
+<p>Filter the table by searching in a specific column. This is different from
+  <a routerLink="/advanced">global search</a> search in that each header has a search field.</p>
+<div class="card mb-5">
+  <div class="card-header">Example</div>
+  <div class="card-body">
+    <generic-table #myTable
+      [gtClasses]="'table-sm'"
+      [gtSettings]="configObject.settings"
+      [gtFields]="configObject.fields"
+      [(gtData)]="configObject.data">
+    </generic-table>
+  </div>
+</div>

src/app/column-search/column-search.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { GenericTableComponent, GtConfig } from '@angular-generic-table/core';
+
+import { Person, PEOPLE } from './person';
 
 @Component({
   selector: 'column-search',
@@ -7,7 +10,42 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ColumnSearchComponent implements OnInit {
 
-  constructor() { }
+  public configObject: GtConfig<Person>;
+
+  constructor() {
+    this.configObject = {
+      settings: [{
+        objectKey: 'id',
+        sort: 'asc',
+        sortOrder: 1,
+        columnOrder: 0
+      }, {
+        objectKey: 'name',
+        sort: 'asc',
+        sortOrder: 0,
+        columnOrder: 1
+      }, {
+        objectKey: 'lucky_number',
+        sort: 'enable',
+        columnOrder: 2,
+        visible: true
+      }],
+      fields: [
+        {
+          name: 'Id',
+          objectKey: 'id'
+        }, {
+          name: 'Name',
+          objectKey: 'name'
+        }, {
+          name: 'Lucky number',
+          objectKey: 'lucky_number',
+          stackedHeading: 'Custom heading'
+        }
+      ],
+      data: PEOPLE,
+    };
+  }
 
   ngOnInit() {
   }