Table component

src/app/app.module.ts

@@ -12,6 +12,9 @@ import { EServicesComponent } from './e-services/e-services.component';
 import { NotificationsComponent } from './notifications/notifications.component';
 import { CreateCommitteeComponent } from './create-committee/create-committee.component';
 import { CheckStatusComponent } from './check-status/check-status.component';
+import { TableComponent } from './table/table.component';
+import { KeyValueHolderComponent } from './key-value-holder/key-value-holder.component';
+import { DownloadButtonComponent } from './download-button/download-button.component';
 
 @NgModule({
   declarations: [
@@ -23,7 +26,10 @@ import { CheckStatusComponent } from './check-status/check-status.component';
     EServicesComponent,
     NotificationsComponent,
     CreateCommitteeComponent,
-    CheckStatusComponent
+    CheckStatusComponent,
+    TableComponent,
+    KeyValueHolderComponent,
+    DownloadButtonComponent
   ],
   imports: [
     BrowserModule,

src/app/download-button/download-button.component.html

@@ -0,0 +1 @@
+<p>download-button works!</p>

src/app/download-button/download-button.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadButtonComponent } from './download-button.component';
+
+describe('DownloadButtonComponent', () => {
+  let component: DownloadButtonComponent;
+  let fixture: ComponentFixture<DownloadButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DownloadButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/download-button/download-button.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-download-button',
+  templateUrl: './download-button.component.html',
+  styleUrls: ['./download-button.component.scss']
+})
+export class DownloadButtonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/e-services/e-services.component.html

@@ -55,4 +55,10 @@
             </div>
         </li>
     </ul>
-</section>
+</section>
+
+<div class="table-holder">
+    <app-table 
+    [headings]="['A', 'B', 'C']"
+    [tableDetails]="[['Val 1', 'Val 2 ', 'Val 3'], ['V1', 'V2', 'V3'], ['A1', 'A2', 'A3']]"></app-table>
+</div>

src/app/key-value-holder/key-value-holder.component.html

@@ -0,0 +1 @@
+<p>key-value-holder works!</p>

src/app/key-value-holder/key-value-holder.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeyValueHolderComponent } from './key-value-holder.component';
+
+describe('KeyValueHolderComponent', () => {
+  let component: KeyValueHolderComponent;
+  let fixture: ComponentFixture<KeyValueHolderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ KeyValueHolderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KeyValueHolderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/key-value-holder/key-value-holder.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-key-value-holder',
+  templateUrl: './key-value-holder.component.html',
+  styleUrls: ['./key-value-holder.component.scss']
+})
+export class KeyValueHolderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/table/table.component.html

@@ -0,0 +1,15 @@
+<section class="table">
+    <header [ngStyle]="{'grid-template-columns': '100px repeat(' + headings.length + ', 1fr)'}">
+        <div class="cell"> S/N </div>
+        <div class="cell" *ngFor="let heading of headings"> {{ heading }} </div>
+    </header>
+
+    <ul>
+        <li *ngFor="let tableDetail of tableDetails; let i = index" [ngStyle]="{'grid-template-columns': '100px repeat(' + headings.length + ', 1fr)'}">
+            <div class="cell"> {{ i + 1 }} </div>
+            <div class="cell" *ngFor="let detail of tableDetail">                
+                <p> {{ detail }} </p>
+            </div>
+        </li>
+    </ul>
+</section>

src/app/table/table.component.scss

@@ -0,0 +1,50 @@
+.table {
+    margin: 2rem auto;
+    width: 100%;
+    border-radius: 1rem;
+    overflow: auto;
+    border: 2px solid var(--border-grey);
+    min-height: 10rem;
+
+    header {
+        background: linear-gradient(90deg, var(--secondary) 0%, var(--primary));
+        color: white;
+        font-size: 1.6rem;        
+        height: 5.5rem;
+        font-weight: 300;
+        letter-spacing: 0.5px;
+
+        display: grid;
+        align-items: center;
+        text-align: center;
+    }
+
+    .cell {
+        
+        @media print {
+            word-break: break-all;
+        }
+    }
+
+    ul {
+        list-style: none;        
+    }
+    
+    li {
+        padding: 2rem 0;
+
+        display: grid;
+        align-items: center;
+        text-align: center;
+
+        &:nth-child(even) {
+            background-color: var(--border-grey);
+        }
+
+        .cell {
+            font-size: 1.4rem;
+            color: var(--dark-grey);
+            line-height: 1.7;                
+        }
+    }
+}

src/app/table/table.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/table/table.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-table',
+    templateUrl: './table.component.html',
+    styleUrls: ['./table.component.scss']
+})
+export class TableComponent implements OnInit {
+    @Input() headings: Array<string> = [];
+    @Input() tableDetails: Array<Array<string>> = [];
+
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}