l-lin · shanmukhateja · Dec 17, 2023 · Dec 9, 2023 · Dec 9, 2023 · Dec 13, 2023
diff --git a/demo/angular.json b/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",

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/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",

diff --git a/demo/src/app/app.component.html b/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>

diff --git a/demo/src/app/app.module.ts b/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,

diff --git a/demo/src/app/app.routing.ts b/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

diff --git a/demo/src/app/extensions/fixed-columns-extension.component.html b/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>
diff --git a/demo/src/app/extensions/fixed-columns-extension.component.ts b/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
+      },
+    };
+  }
+}
diff --git a/demo/src/assets/docs/extensions/fixedcolumns/installation.md b/demo/src/assets/docs/extensions/fixedcolumns/installation.md
@@ -0,0 +1,70 @@
+##### NPM
+
+You need to install its dependencies:
+
+```bash
+# JS file
+npm install datatables.net-fixedcolumns --save
+```
+
+##### angular.json
+
+Add the dependencies in the scripts and styles attributes:
+
+```json
+{
+  "projects": {
+    "your-app-name": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              ...
+            ],
+            "scripts": [
+              ...
+              "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
+            ],
+            ...
+}
+```
+
+#### Update CSS
+
+Update your global style ( genreally styles.css ) as
+
+ ```css
+    /** Fixed columns css 
+
+   These classes are injected by fixed columns extensions
+   and can be tweaked here to match the colors of headers and body
+   to hide the scrolling element behind the fixed header.
+
+   */
+
+   table.dataTable thead tr > .dtfc-fixed-left,
+   table.dataTable thead tr > .dtfc-fixed-right,
+   table.dataTable tfoot tr > .dtfc-fixed-left,
+   table.dataTable tfoot tr > .dtfc-fixed-right {
+     top: 0;
+     bottom: 0;
+     z-index: 3;
+     background-color: white;
+   }
+
+   table.dataTable tbody tr > .dtfc-fixed-left,
+   table.dataTable tbody tr > .dtfc-fixed-right {
+     z-index: 1;
+     background-color: white;
+   }
+
+   div.dtfc-left-top-blocker,
+   div.dtfc-right-top-blocker {
+     background-color: white;
+   }
+ ```
+ Alternative to writing css to global file, you can also install a supported css file for this extension from npm library and update it inside ``styles`` property in angular.json.
+
+```bash
+npm install datatables.net-fixedcolumns-bs4 --save
+```
diff --git a/demo/src/assets/docs/extensions/fixedcolumns/intro.md b/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.
diff --git a/demo/src/assets/docs/extensions/fixedcolumns/source-html.md b/demo/src/assets/docs/extensions/fixedcolumns/source-html.md
@@ -0,0 +1,3 @@
+```html
+<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
+```
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@