Fixed columns extension documentation added

demo/angular.json

@@ -58,7 +58,8 @@
               "node_modules/prismjs/components/prism-bash.min.js",
               "node_modules/prismjs/plugins/toolbar/prism-toolbar.min.js",
               "node_modules/clipboard/dist/clipboard.min.js",
-              "node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
+              "node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js",
+              "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -123,7 +124,8 @@
               "node_modules/datatables.net-buttons/js/buttons.print.js",
               "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js",
               "node_modules/datatables.net-responsive/js/dataTables.responsive.js",
-              "node_modules/datatables.net-select/js/dataTables.select.js"
+              "node_modules/datatables.net-select/js/dataTables.select.js",
+              "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
             ],
             "styles": [
               "node_modules/datatables.net-dt/css/jquery.dataTables.css",

demo/package.json

@@ -31,6 +31,7 @@
     "datatables.net-colreorder": "^1.5.5",
     "datatables.net-colreorder-dt": "^1.5.5",
     "datatables.net-dt": "^1.11.3",
+    "datatables.net-fixedcolumns": "^4.3.0",
     "datatables.net-responsive": "^2.2.9",
     "datatables.net-responsive-dt": "^2.2.9",
     "datatables.net-scroller": "^2.0.5",

demo/src/app/app.component.html

@@ -110,6 +110,9 @@ <h3>
               <li>
                 <a class="waves-effect waves-blue" routerLink="/extensions/select">Select extension</a>
               </li>
+              <li>
+                <a class="waves-effect waves-blue" routerLink="/extensions/fixed-columns">Fixed Columns extension</a>
+              </li>  
             </ul>
           </div>
         </li>

demo/src/app/app.module.ts

@@ -32,6 +32,7 @@ import { RouterLinkComponent } from './advanced/router-link.component';
 // Using extension examples
 import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
 import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
+import { FixedColumnsExtensionComponent } from './extensions/fixed-columns-extension.component';
 import { ResponsiveExtensionComponent } from './extensions/responsive-extension.component';
 import { SelectExtensionComponent } from './extensions/select-extension.component';
 import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
@@ -73,6 +74,7 @@ import { NewServerSideComponent } from './basic/new-server-side/new-server-side.
 
     ButtonsExtensionComponent,
     ColreorderExtensionComponent,
+    FixedColumnsExtensionComponent,
     ResponsiveExtensionComponent,
     SelectExtensionComponent,
     UsingNgPipeComponent,

demo/src/app/app.routing.ts

@@ -30,6 +30,7 @@ import { UsingNgTemplateRefComponent } from './advanced/using-ng-template-ref.co
 import { MoreHelpComponent } from './more-help/more-help.component';
 import { WithAjaxCallbackComponent } from './basic/with-ajax-callback/with-ajax-callback.component';
 import { NewServerSideComponent } from './basic/new-server-side/new-server-side.component';
+import { FixedColumnsExtensionComponent } from './extensions/fixed-columns-extension.component';
 
 const routes: Routes = [
     {
@@ -129,6 +130,10 @@ const routes: Routes = [
         path: 'extensions/colreorder',
         component: ColreorderExtensionComponent
     },
+    {
+        path: 'extensions/fixed-columns',
+        component: FixedColumnsExtensionComponent
+    },
     {
         path: 'extensions/responsive',
         component: ResponsiveExtensionComponent

demo/src/app/extensions/fixed-columns-extension.component.html

@@ -0,0 +1,6 @@
+<ng-template #preview>
+    <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
+  </ng-template>
+  <app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdInstall]="mdInstall" [mdHTML]="mdHTML" [mdTS]="mdTS"
+    [template]="preview">
+  </app-base-demo>

demo/src/app/extensions/fixed-columns-extension.component.ts

@@ -0,0 +1,97 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-fixed-columns-extension',
+  templateUrl: 'fixed-columns-extension.component.html'
+})
+export class FixedColumnsExtensionComponent implements OnInit {
+
+  pageTitle = 'DataTables Fixed Columns extension';
+  mdIntro = 'assets/docs/extensions/fixedcolumns/intro.md';
+  mdInstall = 'assets/docs/extensions/fixedcolumns/installation.md';
+  mdHTML = 'assets/docs/extensions/fixedcolumns/source-html.md';
+  mdTS = 'assets/docs/extensions/fixedcolumns/source-ts.md';
+
+  // Must be declared as "any", not as "DataTables.Settings"
+  dtOptions: any = {};
+
+  ngOnInit(): void {
+    this.dtOptions = {
+      ajax: 'data/data.json',
+      columns: [{
+        title: 'ID',
+        data: 'id'
+      }, {
+        title: 'First name',
+        data: 'firstName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      }
+
+    ],
+    // Make sure that scrollX is set to true for this to work!
+    scrollX: true,
+    fixedColumns: {
+        left: 3,
+        right: 0
+      },
+    };
+  }
+}

demo/src/assets/docs/extensions/fixedcolumns/installation.md

@@ -0,0 +1,33 @@
+##### NPM
+
+You need to install its dependencies:
+
+```bash
+# JS file
+npm install datatables.net-fixedcolumns --save
+# CSS file
+npm install datatables.net-fixedcolumns-bs4 --save
+```
+
+##### angular.json
+
+Add the dependencies in the scripts and styles attributes:
+
+```json
+{
+  "projects": {
+    "your-app-name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              ...
+              "node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css"
+            ],
+            "scripts": [
+              ...
+              "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
+            ],
+            ...
+}
+```

demo/src/assets/docs/extensions/fixedcolumns/intro.md

@@ -0,0 +1,3 @@
+You can use the [Fixed Columns Extension](https://datatables.net/extensions/fixedcolumns/) with angular-datatables.<br>
+This extension comes handy when you have a large number of columns and want to freeze
+certain columns on either side while scrolling along X axis.

demo/src/assets/docs/extensions/fixedcolumns/source-html.md

@@ -0,0 +1,3 @@
+```html
+<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
+```

demo/src/assets/docs/extensions/fixedcolumns/source-ts.md

@@ -0,0 +1,93 @@
+```typescript
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-select-extension',
+  templateUrl: 'select-extension.component.html'
+})
+export class SelectExtensionComponent implements OnInit {
+
+  // Must be declared as "any", not as "DataTables.Settings"
+  dtOptions: any = {};
+
+  ngOnInit(): void {
+    this.dtOptions = {
+      ajax: 'data/data.json',
+      columns: [{
+        title: 'ID',
+        data: 'id'
+      }, {
+        title: 'First name',
+        data: 'firstName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      },
+      {
+        title: 'Last name',
+        data: 'lastName'
+      }, {
+        title: 'Last name',
+        data: 'lastName'
+      }
+
+    ],
+    // Make sure that scrollX is set to true for this to work!
+    scrollX: true,
+    fixedColumns: {
+        left: 3,
+        right: 0
+      },
+    };
+  }
+}
+```