docs: add first sample documentation

Author: m.ivanov4

projects/table-builder/README.md

@@ -5,5 +5,5 @@
     [style.line-height.px]="clientRowHeight"
     [@fadeAnimation]="'in'"
 >
-    <strong class="cell-nowrap">{{ key }}</strong>
+    <strong class="cell-nowrap">{{ key | titlecase }}</strong>
 </div>

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

@@ -1,7 +1,6 @@
-<div class="table-grid__root" [ngDynamicHeight]="{ height: height }">
+<div *ngIf="source?.length" class="table-grid__root" [ngDynamicHeight]="{ autoHeight: autoHeight, height: height }">
     <div
         #tableViewport
-        *ngIf="source?.length"
         wheelThrottling
         class="table-grid"
         [style.width]="width"

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

@@ -39,7 +39,7 @@ describe('[TEST]: Simple table', () => {
         fixture.detectChanges();
     });
 
-    it('should create ngx-table', (done) => {
+    it('should create ngx-table', (done: any) => {
         expect(component).toBeDefined();
         fixture.detectChanges();
 
@@ -58,7 +58,7 @@ describe('[TEST]: Simple table', () => {
 
             const actualColumnHtml: string = new HtmlFormatter(`
               <table-thead>
-                <div class="table-grid__cell table-grid__header-cell"><strong class="cell-nowrap">id</strong></div>
+                <div class="table-grid__cell table-grid__header-cell"><strong class="cell-nowrap">Id</strong></div>
               </table-thead>
               <table-tbody>
                 <virtual-scroller class="vertical">

projects/table-builder/src/lib/tests/simple-table.spec.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { IntroductionComponent } from './samples/introduction/introduction.component';
 
 @NgModule({
     imports: [
@@ -8,7 +9,7 @@ import { RouterModule } from '@angular/router';
                 {
                     path: '',
                     pathMatch: 'full',
-                    redirectTo: 'samples'
+                    component: IntroductionComponent
                 },
                 {
                     path: 'samples',

src/app/app-routing.module.ts

@@ -1,10 +1,17 @@
 <mat-drawer-container class="dashboard">
     <mat-drawer mode="side" class="dashboard__menu" opened>
-        <mat-toolbar class="title">Table builder</mat-toolbar>
+        <mat-toolbar class="title">
+            <img class="logo" src="https://angular.io/assets/images/logos/angular/angular.svg" alt="angular" />
+            <a routerLink="/">Table builder</a>
+        </mat-toolbar>
 
         <mat-list class="menu">
             <mat-list-item class="menu__item">
-                <a routerLink="samples/first">Simple table</a>
+                <a routerLink="samples/guide">- <strong>Guide overview</strong></a>
+            </mat-list-item>
+            <mat-divider></mat-divider>
+            <mat-list-item class="menu__item">
+                <a routerLink="samples/first">- Example virtual scroll table</a>
             </mat-list-item>
             <mat-divider></mat-divider>
         </mat-list>

src/app/app.component.html

@@ -5,9 +5,10 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { SharedModule } from './shared/shared.module';
 import { AppRoutingModule } from './app-routing.module';
+import { IntroductionComponent } from './samples/introduction/introduction.component';
 
 @NgModule({
-    declarations: [AppComponent],
+    declarations: [AppComponent, IntroductionComponent],
     imports: [BrowserModule, SharedModule, AppRoutingModule, BrowserAnimationsModule],
     bootstrap: [AppComponent]
 })

src/app/app.module.ts

@@ -0,0 +1,52 @@
+<div class="main__wrap">
+    <h1>Angular Table Builder</h1>
+    <p>
+        The `ngx-table-builder` is an customizable data-table with a fully-templated API, dynamic columns, and an
+        accessible DOM structure. This component acts as the core upon which anyone can build their own tailored
+        data-table experience.
+    </p>
+
+    <pre><code class="plaintext">
+      $ npm install --save @angular-ru/table-builder
+    </code></pre>
+
+    <p>
+        After a few seconds of waiting, you should be good to go. Let's get to the actual coding! As a first step, let's
+        add the Angular table builder module to our app module (src/app.module.ts):
+    </p>
+
+    <pre><code class="typescript">
+    import &#123; TableBuilder &#125; from '@angular-ru/table-builder';
+
+    @NgModule(&#123;
+       imports: [ TableBuilder.forRoot() ],
+       ...
+    &#125;)
+    export class AppModule &#123; &#125;
+    </code></pre>
+
+    <p>Next, let's declare the basic grid configuration. Edit src/app.component.ts:</p>
+
+    <pre><code class="typescript">
+    import &#123; Component } from '@angular/core';
+
+    @Component(&#123;
+      selector: 'app-root',
+      template: `&lt;ngx-table-builder [source]="rowData"&gt;&lt;/ngx-table-builder&gt;`
+    })
+    export class AppComponent &#123;
+      rowData = [
+          &#123; make: 'Toyota', model: 'Celica', price: 35000 },
+          &#123; make: 'Ford', model: 'Mondeo', price: 32000 },
+          &#123; make: 'Porsche', model: 'Boxter', price: 72000 }
+      ];
+    }
+    </code></pre>
+
+    <ngx-table-builder [source]="rowData"></ngx-table-builder>
+
+    <p>
+        For more information on the interface and a detailed look at how the table is implemented, see the
+        <a routerLink="samples/guide">guide</a>.
+    </p>
+</div>

src/app/samples/introduction/introduction.component.html

@@ -0,0 +1,22 @@
+import { AfterViewInit, Component } from '@angular/core';
+import { TableRow } from '@angular-ru/table-builder';
+
+declare const hljs: any;
+
+@Component({
+    selector: 'introduction',
+    templateUrl: './introduction.component.html'
+})
+export class IntroductionComponent implements AfterViewInit {
+    public rowData: TableRow[] = [
+        { make: 'Toyota', model: 'Celica', price: 35000 },
+        { make: 'Ford', model: 'Mondeo', price: 32000 },
+        { make: 'Porsche', model: 'Boxter', price: 72000 }
+    ];
+
+    public ngAfterViewInit(): void {
+        document.querySelectorAll('pre code').forEach((block: any) => {
+            hljs.highlightBlock(block);
+        });
+    }
+}

src/app/samples/introduction/introduction.component.ts

@@ -1,5 +1,5 @@
 <mat-toolbar class="simple-toolbar">
-    <span>Simple table ({{ simple?.length }}x{{ table?.columnKeys?.length }})</span>
+    <span>Virtual scroll table ({{ simple?.length }}x{{ table?.columnKeys?.length }})</span>
     <mat-spinner *ngIf="loading" class="spinner" strokeWidth="5" [diameter]="30"></mat-spinner>
 </mat-toolbar>
 
@@ -52,6 +52,7 @@
         [source]="simple"
         [width]="width"
         [height]="height"
+        [auto-height]="true"
         [row-height]="rowHeight"
         [column-width]="columnWidth"
     ></ngx-table-builder>

src/app/samples/sample-first/sample-first.component.css

@@ -6,7 +6,6 @@ import { CodeDialogComponent } from '../../shared/dialog/code-dialog.component';
 @Component({
     selector: 'sample-first',
     templateUrl: './sample-first.component.html',
-    styleUrls: ['./sample-first.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SampleFirstComponent implements OnInit {
@@ -28,10 +27,14 @@ export class SampleFirstComponent implements OnInit {
         this.dialog.open(CodeDialogComponent, {
             data: {
                 title: 'Overview simple table (app.component.html)',
+                description: 'If you want enabled virtual scroll, you need use auto-height or height attribute.',
                 code:
                     `<!-- simple - is Array any objects -->\n` +
-                    `<ngx-table-builder [source]="simple"></ngx-table-builder>\n\n` +
-                    `<!-- also you can set height, width for table -->\n` +
+                    `<ngx-table-builder\n` +
+                    `   [source]="simple"\n` +
+                    `   [auto-height]="true"\n` +
+                    `></ngx-table-builder>\n\n\n` +
+                    `<!-- also you can set height, width for cell in table -->\n` +
                     `<ngx-table-builder\n` +
                     `   [source]="simple"\n` +
                     `   [width]="width"\n` +
@@ -40,7 +43,7 @@ export class SampleFirstComponent implements OnInit {
                     `   [column-width]="columnWidth"\n` +
                     `></ngx-table-builder>\n`
             },
-            height: '340px',
+            height: '450px',
             width: '600px'
         });
     }
@@ -84,9 +87,9 @@ export class SampleFirstComponent implements OnInit {
 
             const baseRow: TableRow = {
                 id: idx,
-                name: 'Hello - ' + ((Math.random() + 1) * 100).toFixed(0) + '__' + idx,
-                description: 'World - ' + ((Math.random() + 1) * 100).toFixed(0) + '__' + idx,
-                _id: '5cdae5b2ba0a57f709b72142' + '__' + idx,
+                name: 'Random - ' + ((Math.random() + 1) * 100).toFixed(0) + '__' + idx,
+                description: 'Random - ' + ((Math.random() + 1) * 100).toFixed(0) + '__' + idx,
+                guid: '5cdae5b2ba0a57f709b72142' + '__' + idx,
                 ['About Big Text And More Powerful Label Fugiat tempor sunt nostrud']: `
                  Fugiat tempor sunt nostrud ad fugiat. Laboris velit duis incididunt culpa consectetur veniam.
                  Fugiat tempor sunt nostrud ad fugiat. Laboris velit duis incididunt culpa consectetur veniam.

src/app/samples/sample-first/sample-first.component.html

@@ -1,4 +1,5 @@
 <h3>{{ data.title }}</h3>
+<p *ngIf="data.description">{{data.description}}</p>
 <pre><code class="html">{{ data.code }}</code></pre>
 
 <button class="dialog-close" mat-button (click)="close()">OK</button>

src/app/samples/sample-first/sample-first.component.ts

@@ -18,9 +18,10 @@ import { FormsModule } from '@angular/forms';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { TableBuilderModule } from '@angular-ru/table-builder';
 import { CodeDialogComponent } from './dialog/code-dialog.component';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
-    imports: [TableBuilderModule.forRoot(), MatButtonModule],
+    imports: [TableBuilderModule.forRoot(), CommonModule, MatButtonModule],
     entryComponents: [CodeDialogComponent],
     declarations: [CodeDialogComponent],
     exports: [

src/app/shared/dialog/code-dialog.template.html

@@ -8,32 +8,42 @@ body {
     font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
 
+a {
+    color: #000;
+}
+
 .dashboard {
     height: 100%;
 }
 
 .dashboard__menu {
-    background: #0040a7;
+    background: rgb(24, 75, 170);
     color: #fff;
-    width: 250px;
+    width: 280px;
 }
 
 .title {
     background: transparent;
     color: #fff;
 }
 
-.menu__item a {
+.dashboard__menu a {
     color: #fff;
     text-decoration: none;
 }
 
 .dashboard__content.mat-drawer-content {
-    padding: 10px 16px;
-    height: calc(100% - 20px);
+    padding: 0 100px;
+    height: 100%;
     background: whitesmoke;
 }
 
+.mat-drawer.mat-drawer-side {
+    z-index: 2;
+    box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.6);
+    border-right: none;
+}
+
 .mat-toolbar.simple-toolbar {
     padding: 0;
 }
@@ -60,3 +70,28 @@ body {
 .dialog-close {
     float: right;
 }
+
+.main__wrap {
+    width: 1024px;
+    margin: 0 auto;
+}
+
+code {
+    border: 1px dotted #c3c3c3;
+}
+
+.logo {
+    width: 30px;
+    margin-right: 10px;
+    margin-top: -3px;
+}
+
+.mat-list-item-content a {
+    padding-left: 5px;
+}
+
+.mat-divider {
+    border-top-color: rgba(241, 232, 232, 0.12);
+    width: 80%;
+    margin: 0 auto !important;
+}