feat: add ngx-column component

Author: m.ivanov4

package-lock.json

@@ -6,7 +6,7 @@
         "typedoc": "typedoc projects/table-builder/src",
         "test": "jest --config ./jest.config.js --coverage",
         "start": "ng serve --open --aot=false",
-        "build": "ng build",
+        "build": "ng build && ng build table-builder",
         "build.meta": "echo 'prebuild'",
         "lint": "ng lint"
     },
@@ -29,6 +29,7 @@
         "prettier": "^1.17.1",
         "rxjs": "~6.3.3",
         "tslib": "^1.9.0",
+        "typedoc-plugin-markdown": "^1.2.1",
         "zone.js": "~0.8.26"
     },
     "devDependencies": {

package.json

@@ -9,14 +9,17 @@ import {
     ENABLE_INTERACTION_OBSERVER,
     ROW_HEIGHT,
     WHEEL_MAX_DELTA
-} from './table-builder.tokens';
+} from './table/config/table-builder.tokens';
 import { TableBuilderComponent } from './table/table-builder.component';
-import { TableBuilderOptions } from './table-builder.interfaces';
-import { TableBuilderConfig } from './table-builder.config';
+import { TableBuilderConfig } from './table/config/table-builder.config';
 import { WheelThrottlingDirective } from './table/directives/wheel.directive';
 import { TableTheadComponent } from './table/components/table-thead/table-thead.component';
 import { TableTbodyComponent } from './table/components/table-tbody/table-tbody.component';
 import { DynamicHeightDirective } from './table/directives/dynamic-height.directive';
+import { NgxColumnComponent } from './table/components/ngx-column/ngx-column.component';
+import { TableBuilderOptions } from './table/interfaces/table-builder.external';
+import { TemplateHeadThDirective } from './table/directives/rows/template-head-th.directive';
+import { TemplateBodyTdDirective } from './table/directives/rows/template-body-td.directive';
 
 @NgModule({
     imports: [CommonModule, VirtualScrollerModule, InViewportModule],
@@ -25,9 +28,12 @@ import { DynamicHeightDirective } from './table/directives/dynamic-height.direct
         WheelThrottlingDirective,
         DynamicHeightDirective,
         TableTheadComponent,
-        TableTbodyComponent
+        TableTbodyComponent,
+        NgxColumnComponent,
+        TemplateHeadThDirective,
+        TemplateBodyTdDirective
     ],
-    exports: [TableBuilderComponent]
+    exports: [TableBuilderComponent, NgxColumnComponent, TemplateHeadThDirective, TemplateBodyTdDirective]
 })
 export class TableBuilderModule {
     public static forRoot(options: Partial<TableBuilderOptions> = {}): ModuleWithProviders {

projects/table-builder/src/lib/table-builder.interfaces.ts

@@ -0,0 +1,3 @@
+<p>
+    ngx-column works!
+</p>

projects/table-builder/src/lib/table-builder.module.ts

@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'ngx-column',
+    templateUrl: './ngx-column.component.html'
+})
+export class NgxColumnComponent {
+    @Input() public key: string;
+}

projects/table-builder/src/lib/table/core/fade.animation.ts renamed to projects/table-builder/src/lib/table/animations/fade.animation.ts

@@ -1,10 +1,9 @@
-import { ChangeDetectionStrategy, Component, Inject, Input, ViewChild, ViewEncapsulation } from '@angular/core';
-import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
+import { ChangeDetectionStrategy, Component, Inject, Input, ViewEncapsulation } from '@angular/core';
 
 import { TableLineRow } from '../common/table-line-row.class';
-import { TableRow } from '../../../table-builder.interfaces';
-import { BUFFER_AMOUNT } from '../../../table-builder.tokens';
-import { fadeAnimation } from '../../core/fade.animation';
+import { BUFFER_AMOUNT } from '../../config/table-builder.tokens';
+import { fadeAnimation } from '../../animations/fade.animation';
+import { TableRow } from '../../interfaces/table-builder.external';
 
 @Component({
     selector: 'table-tbody',
@@ -19,7 +18,6 @@ export class TableTbodyComponent extends TableLineRow {
     @Input('table-viewport') public tableViewport: HTMLElement;
     @Input('column-virtual-height') public columnVirtualHeight: number;
     @Input('buffer-amount') public bufferAmount: number;
-    @ViewChild('scroll') public scroll: VirtualScrollerComponent;
 
     constructor(@Inject(BUFFER_AMOUNT) public defaultBufferAmount: number) {
         super();

projects/table-builder/src/lib/table/components/ngx-column/ngx-column.component.html

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 import { TableLineRow } from '../common/table-line-row.class';
-import { fadeAnimation } from '../../core/fade.animation';
+import { fadeAnimation } from '../../animations/fade.animation';
 
 @Component({
     selector: 'table-thead',

projects/table-builder/src/lib/table/components/ngx-column/ngx-column.component.ts

@@ -1,4 +1,4 @@
-import { TableBuilderOptions } from './table-builder.interfaces';
+import { TableBuilderOptions } from '../interfaces/table-builder.external';
 
 export class TableBuilderConfig implements TableBuilderOptions {
     public readonly bufferAmount: number = 10;

projects/table-builder/src/lib/table/components/table-tbody/table-tbody.component.ts

@@ -1,5 +1,5 @@
 import { ApplicationRef, Directive, ElementRef, Input, NgZone, OnChanges, OnDestroy, OnInit } from '@angular/core';
-import { DynamicHeightOptions } from '../../table-builder.interfaces';
+import { DynamicHeightOptions } from '../interfaces/table-builder.internal';
 
 @Directive({ selector: '[ngDynamicHeight]' })
 export class DynamicHeightDirective implements OnInit, OnChanges, OnDestroy {

projects/table-builder/src/lib/table/components/table-thead/table-thead.component.ts

@@ -0,0 +1,7 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+@Directive({ selector: 'ng-template[ngx-td]' })
+export class TemplateBodyTdDirective {
+    @Input('ngx-td') public type: string = null;
+    constructor(public template: TemplateRef<unknown>) {}
+}

projects/table-builder/src/lib/table-builder.config.ts renamed to projects/table-builder/src/lib/table/config/table-builder.config.ts

@@ -0,0 +1,7 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+@Directive({ selector: 'ng-template[ngx-th]' })
+export class TemplateHeadThDirective {
+    @Input('ngx-th') public type: string = null;
+    constructor(public template: TemplateRef<unknown>) {}
+}

projects/table-builder/src/lib/table-builder.tokens.ts renamed to projects/table-builder/src/lib/table/config/table-builder.tokens.ts

@@ -1,5 +1,5 @@
 import { Directive, ElementRef, EventEmitter, Inject, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
-import { WHEEL_MAX_DELTA } from '../../table-builder.tokens';
+import { WHEEL_MAX_DELTA } from '../config/table-builder.tokens';
 
 @Directive({ selector: '[wheelThrottling]' })
 export class WheelThrottlingDirective implements OnInit, OnDestroy {

projects/table-builder/src/lib/table/directives/dynamic-height.directive.ts

@@ -0,0 +1,29 @@
+import { TemplateRef } from '@angular/core';
+
+export interface TableRow<T = any> {
+    [key: string]: T;
+}
+
+export interface TableBuilderOptions {
+    bufferAmount: number;
+    rowHeight: number;
+    columnWidth: number;
+    wheelMaxDelta: number;
+    enableInteractionObserver: boolean;
+}
+
+export interface TableColumnOptions<T> {
+    template: TemplateRef<T>;
+}
+
+export interface ColumnsSchema<T = any> {
+    [key: string]: {
+        td: TableColumnOptions<T>;
+        th: TableColumnOptions<T>;
+        width?: string;
+    };
+}
+
+export interface TableSchema<T = any> {
+    columns: ColumnsSchema;
+}

projects/table-builder/src/lib/table/directives/rows/template-body-td.directive.ts

@@ -0,0 +1,12 @@
+export enum PrimaryKey {
+    ID = 'id'
+}
+
+export interface DynamicHeightOptions {
+    autoHeight: boolean;
+    height: number;
+}
+
+export interface ScrollOffsetStatus {
+    offset: boolean;
+}

projects/table-builder/src/lib/table/directives/rows/template-head-th.directive.ts

@@ -0,0 +1,5 @@
+import { ColumnsSchema, TableSchema } from '../../interfaces/table-builder.external';
+
+export class SchemaBuilder<T = any> implements TableSchema<T> {
+    public columns: ColumnsSchema = {};
+}

projects/table-builder/src/lib/table/directives/wheel.directive.ts

@@ -0,0 +1,32 @@
+import { Injectable, QueryList } from '@angular/core';
+
+import { NgxColumnComponent } from '../../components/ngx-column/ngx-column.component';
+import { TableSchema } from '../../interfaces/table-builder.external';
+import { SchemaBuilder } from './schema-builder.class';
+
+@Injectable()
+export class TemplateParserService {
+    public schema: TableSchema = new SchemaBuilder();
+
+    public parse(columns: QueryList<NgxColumnComponent>): void {
+        columns.forEach((column: NgxColumnComponent) => this.extractColumnTemplate(column));
+    }
+
+    private extractColumnTemplate(column: NgxColumnComponent): void {
+        const { key }: NgxColumnComponent = column;
+        this.schema.columns[key] = {
+            th: {
+                template: null
+            },
+            td: {
+                template: null
+            }
+        };
+
+        console.log(this.schema);
+    }
+
+    public get templateColumnKeys(): string[] {
+        return Object.keys(this.schema.columns);
+    }
+}

projects/table-builder/src/lib/table/interfaces/table-builder.external.ts

@@ -1,5 +1,6 @@
 import { Input } from '@angular/core';
-import { PrimaryKey, TableRow } from '../table-builder.interfaces';
+import { PrimaryKey } from './interfaces/table-builder.internal';
+import { TableRow } from './interfaces/table-builder.external';
 
 export class TableBuilderApiImpl {
     @Input() public height: number;

projects/table-builder/src/lib/table/interfaces/table-builder.internal.ts

@@ -1,34 +1,45 @@
 import {
+    AfterContentInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    ContentChildren,
     Inject,
     OnChanges,
     OnInit,
+    QueryList,
     ViewEncapsulation
 } from '@angular/core';
 
-import { COL_WIDTH, ENABLE_INTERACTION_OBSERVER, ROW_HEIGHT } from '../table-builder.tokens';
-import { ScrollOffsetStatus, TableRow } from '../table-builder.interfaces';
+import { COL_WIDTH, ENABLE_INTERACTION_OBSERVER, ROW_HEIGHT } from './config/table-builder.tokens';
+import { ScrollOffsetStatus } from './interfaces/table-builder.internal';
 import { TableBuilderApiImpl } from './table-builder.api';
-import { fadeAnimation } from './core/fade.animation';
+import { fadeAnimation } from './animations/fade.animation';
+import { NgxColumnComponent } from './components/ngx-column/ngx-column.component';
+import { TemplateParserService } from './services/template-parser/template-parser.service';
+import { TableRow } from './interfaces/table-builder.external';
 
 @Component({
     selector: 'ngx-table-builder',
     templateUrl: './table-builder.component.html',
     styleUrls: ['./table-builder.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
+    providers: [TemplateParserService],
     animations: [fadeAnimation]
 })
-export class TableBuilderComponent extends TableBuilderApiImpl implements OnInit, OnChanges {
+export class TableBuilderComponent extends TableBuilderApiImpl implements OnInit, OnChanges, AfterContentInit {
     public scrollOffset: ScrollOffsetStatus = { offset: false };
     public columnKeys: string[] = [];
 
+    @ContentChildren(NgxColumnComponent)
+    private readonly columnsList: QueryList<NgxColumnComponent>;
+
     constructor(
         @Inject(ROW_HEIGHT) public defaultRowHeight: number,
         @Inject(COL_WIDTH) public defaultColumnWidth: number,
         @Inject(ENABLE_INTERACTION_OBSERVER) public enabledObserver: boolean,
+        private templateParser: TemplateParserService,
         private readonly cd: ChangeDetectorRef
     ) {
         super();
@@ -50,7 +61,7 @@ export class TableBuilderComponent extends TableBuilderApiImpl implements OnInit
         return this.source.length * this.clientRowHeight + this.clientRowHeight;
     }
 
-    private get modelKeys(): string[] {
+    private get modelColumnKeys(): string[] {
         return Object.keys(this.rowKeyValue);
     }
 
@@ -59,12 +70,10 @@ export class TableBuilderComponent extends TableBuilderApiImpl implements OnInit
     }
 
     public ngOnChanges(): void {
-        this.columnKeys = this.modelKeys.slice();
+        this.setupTableColumnKeys();
     }
 
-    public ngOnInit(): void {
-        this.columnKeys = this.modelKeys;
-    }
+    public ngOnInit(): void {}
 
     public updateScrollOffset(offset: boolean): void {
         this.scrollOffset = { offset };
@@ -74,4 +83,15 @@ export class TableBuilderComponent extends TableBuilderApiImpl implements OnInit
     public inViewportAction(column: HTMLDivElement, $event: { visible: boolean }): void {
         column['visible'] = $event.visible;
     }
+
+    public ngAfterContentInit(): void {
+        this.templateParser.parse(this.columnsList);
+        this.setupTableColumnKeys();
+    }
+
+    private setupTableColumnKeys(): void {
+        const templateColumnKeys: string[] = this.templateParser.templateColumnKeys;
+        const modelColumnKeys: string[] = this.modelColumnKeys;
+        this.columnKeys = templateColumnKeys.length ? templateColumnKeys.slice() : modelColumnKeys.slice();
+    }
 }

projects/table-builder/src/lib/table/services/template-parser/schema-builder.class.ts

@@ -1,7 +1,7 @@
 /*
  * Public API Surface of table-builder
  */
-
 export { TableBuilderModule } from './lib/table-builder.module';
 export { TableBuilderComponent } from './lib/table/table-builder.component';
-export * from './lib/table-builder.interfaces';
+export { NgxColumnComponent } from './lib/table/components/ngx-column/ngx-column.component';
+export * from './lib/table/interfaces/table-builder.external';

projects/table-builder/src/lib/table/services/template-parser/template-parser.service.ts

@@ -22,6 +22,10 @@ import { IntroductionComponent } from './samples/introduction/introduction.compo
                         {
                             path: 'first',
                             loadChildren: './samples/sample-first/sample-first.module#SampleFirstModule'
+                        },
+                        {
+                            path: 'second',
+                            loadChildren: './samples/sample-second/sample-second.module#SampleSecondModule'
                         }
                     ]
                 }

projects/table-builder/src/lib/table/table-builder.api.ts

@@ -14,6 +14,10 @@
                 <a routerLink="samples/first">- Example virtual scroll table</a>
             </mat-list-item>
             <mat-divider></mat-divider>
+            <mat-list-item class="menu__item">
+                <a routerLink="samples/second">- Define the column templates</a>
+            </mat-list-item>
+            <mat-divider></mat-divider>
         </mat-list>
     </mat-drawer>
 

projects/table-builder/src/lib/table/table-builder.component.ts

@@ -15,7 +15,7 @@ <h1>Angular Table Builder</h1>
         add the Angular table builder module to our app module (src/app.module.ts):
     </p>
 
-    <pre><code class="typescript">
+    <pre><code class="javascript">
     import &#123; TableBuilder &#125; from '@angular-ru/table-builder';
 
     @NgModule(&#123;