Initial commit

angular.json

@@ -24,7 +24,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -87,7 +87,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss"
             ],
             "scripts": []
           }
@@ -120,5 +120,8 @@
       }
     }
   },
-  "defaultProject": "sample"
+  "defaultProject": "sample",
+  "cli": {
+    "analytics": false
+  }
 }
\ No newline at end of file

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --port 4500",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { IGridCell } from './components/grid/grid';
+
+const sampleGridCells: IGridCell[] = [
+  {
+    label: 'Name',
+    align: 'left',
+    field: 'name',
+    width: 200
+  },
+  {
+    label: 'Account Number',
+    align: 'center',
+    field: 'account_number',
+    width: 150
+  },
+  {
+    label: 'Balance',
+    align: 'right',
+    field: 'balance',
+    width: 140
+  },
+];
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'sample';
+
+  isLoading = false;
+
+  gridCells: IGridCell[] = sampleGridCells;
+
+  totalRows = 50;
+
+  samples: any[] = [
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1111',
+      balance: '1111'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1133',
+      balance: '1133'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    },
+    {
+      name: 'Nguyen Van Ha',
+      account_number: '1122',
+      balance: '1122'
+    }
+  ];
+
+  onLoaded(): void {}
+
 }

src/app/app.module.ts

@@ -2,15 +2,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { GridComponent } from './components/grid/grid.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    GridComponent
   ],
   imports: [
     BrowserModule
   ],
+  exports: [
+    GridComponent
+  ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule { }

src/app/components/grid/grid.component.html

+<div class="grid__body" #gridBodyRef>
+    <div class="grid__no-items" *ngIf="!isLoading && (!rows || !rows.length); else hasItems">
+        <span>no items</span>
+    </div>
+    <ng-template #hasItems>
+        <table class="table">
+            <thead>
+                <tr>
+                    <th scope="col" *ngFor="let cell of cells;" [ngClass]="{
+                            'grid__block--left': cell.align === 'left',
+                            'grid__block--center': cell.align === 'center',
+                            'grid__block--right': cell.align === 'right'
+                        }" [style.width.px]="cell.width">
+                        {{cell.label}}
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="tbody-custom">
+                <tr class="grid__item" *ngFor="let item of rows;">
+                    <td class="grid__block" *ngFor="let cell of cells;" [ngClass]="{
+                        'grid__block--left': cell.align === 'left',
+                        'grid__block--center': cell.align === 'center',
+                        'grid__block--right': cell.align === 'right'
+                    }" [style.width.px]="cell.width">
+                        {{item[cell.field]}}
+                    </td>
+                </tr>
+            </tbody>
+            <div class="pagination">
+                <a href="#">&laquo;</a>
+                <a href="#" class="active">1</a>
+                <a href="#">2</a>
+                <a href="#">3</a>
+                <a href="#">4</a>
+                <a href="#">5</a>
+                <a href="#">6</a>
+                <a href="#">&raquo;</a>
+              </div>
+        </table>
+
+        <!-- <a class="grid__row" *ngFor="let item of rows;">
+            <div class="grid__item">
+                <div class="grid__block" *ngFor="let cell of cells, index as i" [ngClass]="{
+                        'grid__block--left': cell.align === 'left',
+                        'grid__block--center': cell.align === 'center',
+                        'grid__block--right': cell.align === 'right'
+                    }" [style.width.px]="cell.width">
+                    
+                    <ng-container *ngTemplateOutlet="cellContentsArray[i]; context: { item: item }"></ng-container>
+
+                </div>
+            </div>
+        </a> -->
+    </ng-template>
+
+    <!-- <ng-template #row let-item="item">
+        {{row|json}}
+    </ng-template> -->
+</div>
\ No newline at end of file

src/app/components/grid/grid.component.scss

+table{
+  width: 100%;
+  th{
+    background: rgb(0, 140, 255);
+    color: white;
+  }
+  th, td{
+    border-bottom: .5px solid #333;
+    padding: 10px 5px;
+  }
+}
+.grid__block--left{
+  text-align: left;
+}
+.grid__block--center{
+  text-align: center;
+}
+.grid__block--right{
+  text-align: right;
+}
+tbody {
+  display:block;
+  height: 200px;
+  overflow:auto;
+}
+thead, tbody tr {
+  display:table;
+  width:100%;
+  table-layout:fixed;
+}
+thead {
+  width: calc( 100% - 1em )
+}
+
+.pagination {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+.pagination a {
+  color: black;
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+}
+
+.pagination a.active {
+  background-color: rgb(0, 140, 255);
+  color: white;
+}
+
+.pagination a:hover:not(.active) {background-color: #ddd;}

src/app/components/grid/grid.component.ts

+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  TemplateRef,
+} from '@angular/core';
+import { IGridCell } from './grid';
+
+@Component({
+  selector: 'app-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GridComponent implements OnInit, AfterViewInit {
+  @Input() cells: IGridCell[] = [];
+  @Input() rows: [] = [];
+  @Input() totalRows: number;
+  @Input() isLoading = false;
+  @Input() pagingMode: string | 'paging' | 'scroll';
+  // tslint:disable-next-line: no-output-rename
+  @Output('isLoaded') isLoaded = new EventEmitter<any>();
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void {}
+}

src/app/components/grid/grid.ts

+export interface IGridCell {
+  label: string;
+  align: 'center' | 'left' | 'right';
+  field: string;
+  width?: number;
+}