Demo improvements

projects/ngx-easy-table/assets/style.scss

@@ -270,7 +270,7 @@ $primary-color: #50596c !default;
     line-height: 1rem;
     margin: 0.2rem 0;
     min-height: 1.2rem;
-    padding: 0.2rem 0.4rem 0.4rem 1.1rem;
+    padding: 0.2rem 0.4rem 0.4rem 1rem;
     position: relative;
 
     input {

projects/ngx-easy-table/src/lib/components/base/base.component.html

@@ -299,7 +299,7 @@
                 rowIndex === selectedRow && !config.selectCell
               "
             >
-              <td *ngIf="config.checkboxes">
+              <td *ngIf="config.checkboxes" width="3%">
                 <label class="ngx-form-checkbox">
                   <input
                     type="checkbox"
@@ -310,7 +310,7 @@
                   <em class="ngx-form-icon"></em>
                 </label>
               </td>
-              <td *ngIf="config.radio">
+              <td *ngIf="config.radio" width="3%">
                 <label>
                   <input
                     type="radio"

projects/ngx-easy-table/src/lib/components/base/base.component.ts

@@ -448,19 +448,19 @@ export class BaseComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
           });
         }
         this.onSearch(event.value);
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
         break;
       case API.onGlobalSearch:
         this.onGlobalSearch(event.value);
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
         break;
       case API.setRowClass:
         if (Array.isArray(event.value)) {
           event.value.forEach((val) => this.styleService.setRowClass(val));
           break;
         }
         this.styleService.setRowClass(event.value);
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
         break;
       case API.setCellClass:
         if (Array.isArray(event.value)) {
@@ -485,7 +485,7 @@ export class BaseComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
         break;
       case API.setTableClass:
         this.tableClass = event.value;
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
         break;
       case API.getPaginationTotalItems:
         return this.paginationComponent.paginationDirective.getTotalItems();

src/app/app.component.html

@@ -32,6 +32,16 @@
           <div class="accordion-body">
             <ul class="menu menu-nav">
               <li class="divider" [attr.data-content]="'Documentation'"></li>
+              <li class="menu-item">
+                <a
+                  href="#"
+                  [routerLink]="['/landing']"
+                  (click)="select({ link: 'landing', name: 'Site' })"
+                  id="landing"
+                >
+                  <i class="icon icon-link"></i> Site
+                </a>
+              </li>
               <li class="menu-item">
                 <a
                   href="#"

src/app/app.component.ts

@@ -83,6 +83,7 @@ export class AppComponent implements OnInit, OnDestroy {
       { link: ROUTE.LOADING_TEMPLATE, name: 'Loading template' },
       { link: ROUTE.ADDITIONAL_ACTIONS_TEMPLATE, name: 'Additional actions' },
       { link: ROUTE.CUSTOM_PAGINATION, name: 'Custom pagination' },
+      { link: ROUTE.STICKY, name: 'Sticky' },
     ],
     select: [
       { link: ROUTE.SELECT_ROW, name: 'Select row' },
@@ -135,7 +136,9 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   get excludedLinks(): boolean {
-    return [ROUTE.BASIC, ROUTE.API_DOC, ROUTE.DOC, ROUTE.INSTALLATION].includes(this.selected.link);
+    return [ROUTE.LANDING, ROUTE.API_DOC, ROUTE.DOC, ROUTE.INSTALLATION].includes(
+      this.selected.link
+    );
   }
 
   onMenuSearch(event: Event): void {

src/app/app.module.ts

@@ -72,6 +72,8 @@ import {
   RadioComponent,
   OnDragOverComponent,
   DynamicComponentComponent,
+  LandingComponent,
+  StickyComponent,
 } from './demo';
 import { TableModule } from 'ngx-easy-table';
 import { MenuSearchPipe } from './pipes/menu-search-pipe';
@@ -167,6 +169,8 @@ import { SmallTableComponent } from './demo/dynamic-component/small-table/small-
     OnDragOverComponent,
     DynamicComponentComponent,
     SmallTableComponent,
+    LandingComponent,
+    StickyComponent,
   ],
   bootstrap: [AppComponent],
   providers: [

src/app/demo/api-doc/api-doc.component.html

@@ -46,11 +46,11 @@ <h3>API Documentation</h3>
           <td>Emit event to toggle additional row details</td>
         </tr>
         <tr>
-          <td>API.setCheckbox</td>
+          <td>API.toggleCheckbox</td>
           <td>
-            <pre><code [highlight]="setCheckboxCode"></code></pre>
+            <pre><code [highlight]="toggleCheckboxCode"></code></pre>
           </td>
-          <td>string</td>
+          <td>number</td>
           <td>Emit event to toggle row checkbox</td>
         </tr>
         <tr>

src/app/demo/api-doc/api-doc.component.ts

@@ -43,8 +43,8 @@ export class ApiDocComponent {
   value: 1,
 });`;
 
-  public readonly setCheckboxCode = `this.table.apiEvent({
-  type: API.setCheckbox,
+  public readonly toggleCheckboxCode = `this.table.apiEvent({
+  type: API.toggleCheckbox,
   value: 1,
 });`;
 

src/app/demo/basic/basic.component.html

@@ -1,22 +1,3 @@
-<div class="columns">
-  <div class="column col-12">
-    <div class="jumbotron">
-      <h1 class="display-4">Ngx-easy-table</h1>
-      <h5 class="lead">The easiest Angular Table</h5>
-    </div>
-    <div class="mb-2">
-      <a
-        class="btn"
-        rel="noreferrer"
-        href="https://github.com/ssuperczynski/ngx-easy-table/tree/master/src/app/demo/basic/basic.component.ts"
-        target="_blank"
-      >
-        See demo code here
-      </a>
-      <a class="btn m-2" [routerLink]="['/installation']"> Full configuration </a>
-    </div>
-  </div>
-</div>
 <div class="columns mt-2">
   <div class="column col-12">
     <ngx-table [data]="data" [configuration]="configuration" [columns]="columns"> </ngx-table>

src/app/demo/customize-theme/customize-theme.component.html

@@ -27,16 +27,6 @@
           <i class="form-icon"></i> Style big
         </label>
       </div>
-      <div class="form-group">
-        <label class="form-radio form-inline">
-          <input type="radio" name="theme" checked (change)="setTheme('light')" />
-          <i class="form-icon"></i> Light
-        </label>
-        <label class="form-radio form-inline">
-          <input type="radio" name="theme" (change)="setTheme('dark')" />
-          <i class="form-icon"></i> Dark
-        </label>
-      </div>
     </div>
   </div>
 </div>

src/app/demo/customize-theme/customize-theme.component.ts

@@ -38,9 +38,4 @@ export class CustomizeThemeComponent implements OnInit {
     this.configuration.tableLayout.style = size;
     this.configuration = { ...this.configuration };
   }
-
-  setTheme(theme: string): void {
-    this.configuration.tableLayout.theme = theme;
-    this.configuration = { ...this.configuration };
-  }
 }

src/app/demo/exports/exports.component.html

@@ -1,5 +1,4 @@
 <div class="mb-2">
-  <button class="btn btn-primary" (click)="exportToExcel()">Excel export</button>
   <button class="btn btn-primary mx-1" (click)="exportToCSV()">CSV export</button>
 </div>
 <div class="columns">

src/app/demo/exports/exports.component.ts

@@ -26,23 +26,6 @@ export class ExportsComponent implements OnInit {
     this.data = data;
   }
 
-  exportToExcel(): void {
-    // Here is simple example how to export to excel by https://www.npmjs.com/package/xlsx
-    // try {
-    //   /* generate worksheet */
-    //   const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.data);
-    //
-    //   /* generate workbook and add the worksheet */
-    //   const wb: XLSX.WorkBook = XLSX.utils.book_new();
-    //   XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
-    //
-    //   /* save to file */
-    //   XLSX.writeFile(wb, 'file.xlsx');
-    // } catch (err) {
-    //   console.error('export error', err);
-    // }
-  }
-
   exportToCSV(): void {
     const options = {
       fieldSeparator: ',',

src/app/demo/index.ts

@@ -65,3 +65,5 @@ export * from './checkbox-as-radio/checkbox-as-radio.component';
 export * from './radio/radio.component';
 export * from './ondragover/ondragover.component';
 export * from './dynamic-component/dynamic-component.component';
+export * from './landing/landing.component';
+export * from './sticky/sticky.component';

src/app/demo/installation/installation.component.html

@@ -1,5 +1,5 @@
 <div class="columns">
-  <div class="column col-12">
+  <div class="column col-6 col-sm-12">
     <h3>Installation</h3>
     <h5>npm install</h5>
     <pre><code [highlight]="npmInstallCode"></code></pre>

src/app/demo/landing/landing.component.css

@@ -0,0 +1,84 @@
+.section-hero {
+  padding: 1rem 0.5rem;
+}
+
+.section-hero .docs-brand {
+  position: absolute;
+  top: 0.85rem;
+}
+
+.section-hero .docs-brand h2 {
+  color: #5755d9;
+}
+
+.section-hero .column {
+  padding: 0.4rem;
+}
+
+.section-ads {
+  padding: 1rem 0.5rem;
+}
+
+.section-updates {
+  padding: 4.5rem 0.5rem 2.5rem 0.5rem;
+}
+
+.section-updates .card {
+  border: 0;
+  margin-bottom: 1rem;
+}
+
+.section-features {
+  padding: 4.5rem 0.5rem;
+}
+
+.section-features .column {
+  padding: 0.4rem;
+}
+
+.section-footer {
+  color: #bcc3ce;
+  padding: 1.8rem 0.75rem 1rem;
+  position: relative;
+  z-index: 200;
+}
+
+.section-footer a {
+  color: #66758c;
+}
+.grid-hero {
+  padding-bottom: 2rem;
+  padding-top: 6rem;
+}
+
+.grid-hero h1 {
+  color: #3b4351;
+  font-size: 1.6rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+}
+
+.grid-hero h2 {
+  color: #455060;
+  font-size: 0.9rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.grid-hero h2 u {
+  border-bottom: 0.1rem solid currentColor;
+  padding-bottom: 0.05rem;
+  text-decoration: none;
+}
+
+.grid-hero .card {
+  padding: 0.5rem;
+}
+
+.grid-hero .card .card-title {
+  color: #5755d9;
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0;
+}

src/app/demo/landing/landing.component.html

@@ -0,0 +1,39 @@
+<div class="section section-hero">
+  <div class="grid-hero container grid-lg text-center" id="overview">
+    <h1>Ngx-easy-table</h1>
+    <h2>
+      The Easiest Angular Table. <br />
+      <u>12kb gzipped</u>, <u>Tree-shakeable</u>, <u>55 features</u> and growing!
+    </h2>
+    <p>
+      <a class="btn btn-primary btn-lg mr-2" [routerLink]="['/installation']">Configuration</a>
+      <a
+        class="btn btn-primary btn-lg"
+        href="https://github.com/ssuperczynski/ngx-easy-table/tree/master/src/app/demo/basic/basic.component.ts"
+        target="_blank"
+        >Demo code</a
+      >
+    </p>
+
+    <div class="columns">
+      <div class="column col-4 col-xs-12">
+        <div class="card text-center">
+          <div class="card-header"><span class="card-title">Lightweight</span></div>
+          <div class="card-body">Lightweight (~12KB gzipped)</div>
+        </div>
+      </div>
+      <div class="column col-4 col-xs-12">
+        <div class="card text-center">
+          <div class="card-header"><span class="card-title">Customizable</span></div>
+          <div class="card-body">55 features and growing!</div>
+        </div>
+      </div>
+      <div class="column col-4 col-xs-12">
+        <div class="card text-center">
+          <div class="card-header"><span class="card-title">Fast</span></div>
+          <div class="card-body">Works with 60fps</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/demo/landing/landing.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-landing',
+  templateUrl: './landing.component.html',
+  styleUrls: ['./landing.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LandingComponent {}

src/app/demo/sticky/sticky.component.css

@@ -0,0 +1,5 @@
+:host ::ng-deep thead {
+  position: sticky;
+  top: 0;
+  background-color: white;
+}