@ea-controls/mat-table-extensions 0.0.0

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,160 @@
+# MatTableExtensions
+
+Angular directives that allows to extend Angular [mat-table](https://material.angular.io/components/table/overview) features
+
+## Multiple Headers/Footer
+
+Usually mat-table only allows one header and footer inside [matColumnDef] directive
+
+```html
+<table mat-table>
+    <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> No. </th> <!-- Only one header -->
+        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+</table>
+```
+
+With current library, now you can add more of them
+
+```html
+<table mat-table>
+    <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> No. </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'extra-header-name'"> Extra Header </th> <!-- Extra header cell-->
+        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-header-row *matExtraHeaderRowDef="displayedColumns; name: 'extra-header-name'"></tr> <!-- Extra header row -->
+</table>
+```
+
+### Steps
+
+1. Import `MatExtraTableModule`
+1. Add new `*matExtraHeaderCellDef` instead `*matHeaderCellDef` for extra headers
+    1. You have to send any string value as cell identifier
+        > Replace `extra-header-name` with your custom name
+    1. Notice you can use `*matHeaderRowDef` normally, new directive is only used when you need extra header cell
+1. Add new `*matExtraHeaderRowDef` instead `*matHeaderRowDef` for extra rows using extra header cells
+    1. `name` is required to find extra header, it have to be the same use in `matExtraHeaderCellDef` attribute
+        > *matExtraHeaderRowDef="displayedColumns; `name`: 'extra-header-name'>"
+    1. Notice you can use `*matHeaderRowDef` normally, new directive is only used when you need extra header row
+1. Similar tags you can use when extra footer is required
+
+```html
+<td mat-footer-cell *matExtraFooterCellDef="'extra-footer-name'">Footer</th> <!-- Extra footer cell -->
+```
+
+```html
+<tr mat-header-row *matExtraFooterRowDef="displayedColumns; name: 'extra-footer-name'"></tr> <!-- Extra footer row -->
+```
+    
+
+### Full example
+
+```ts
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+];
+
+@Component({
+  selector: 'app-basic',
+  imports: [MatExtraTableModule],
+  templateUrl: './basic.component.html'
+})
+export class BasicComponent {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}
+
+```
+
+```html
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+    <!-- POSITION -->
+    <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> 1. from html </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let data"> xxxxxxxxxx from html </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+        <th mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="2">f2</th>
+    </ng-container>
+
+    <!-- NAME -->
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+        <th mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="4">f2</th>
+    </ng-container>
+
+    <!-- WEIGHT -->
+    <ng-container matColumnDef="weight">
+        <th mat-header-cell *matHeaderCellDef> Weight </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+    </ng-container>
+
+    <!-- SYMBOL -->
+    <ng-container matColumnDef="symbol">
+        <th mat-header-cell *matHeaderCellDef> Symbol </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+    </ng-container>
+
+
+
+    <!-- HEADERS -->
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-header-row *matExtraHeaderRowDef="displayedColumns; name: 'filter'"></tr>
+
+    <!-- CELLS -->
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    <!-- FOOTER -->
+    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+    <tr mat-footer-row *matExtraFooterRowDef="['position', 'name']; name: 'filter'"></tr>
+
+</table>
+```

package/angular.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "mat-table-extensions": {
+      "projectType": "library",
+      "root": "projects/mat-table-extensions",
+      "sourceRoot": "projects/mat-table-extensions/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/mat-table-extensions/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/mat-table-extensions/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/mat-table-extensions/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/mat-table-extensions/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    },
+    "mat-table-extensions-examples": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/mat-table-extensions-examples",
+      "sourceRoot": "projects/mat-table-extensions-examples/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/mat-table-extensions-examples",
+            "index": "projects/mat-table-extensions-examples/src/index.html",
+            "browser": "projects/mat-table-extensions-examples/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/mat-table-extensions-examples/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/mat-table-extensions-examples/public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "projects/mat-table-extensions-examples/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "mat-table-extensions-examples:build:production"
+            },
+            "development": {
+              "buildTarget": "mat-table-extensions-examples:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/mat-table-extensions-examples/tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/mat-table-extensions-examples/public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "projects/mat-table-extensions-examples/src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@ea-controls/mat-table-extensions",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "publish": "ng build mat-table-extensions && npm publish"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "^19.1.0",
+    "@angular/cdk": "^19.1.5",
+    "@angular/common": "^19.1.0",
+    "@angular/compiler": "^19.1.0",
+    "@angular/core": "^19.1.0",
+    "@angular/forms": "^19.1.0",
+    "@angular/material": "^19.1.5",
+    "@angular/platform-browser": "^19.1.0",
+    "@angular/platform-browser-dynamic": "^19.1.0",
+    "@angular/router": "^19.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.1.8",
+    "@angular/cli": "^19.1.6",
+    "@angular/compiler-cli": "^19.1.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^19.1.0",
+    "typescript": "~5.7.2"
+  }
+}

package/projects/mat-table-extensions/README.md

@@ -0,0 +1,63 @@
+# MatTableExtensions
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build mat-table-extensions
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/mat-table-extensions
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/projects/mat-table-extensions/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/mat-table-extensions",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/mat-table-extensions/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "mat-table-extensions",
+  "version": "19.0.2",
+  "peerDependencies": {
+    "@angular/common": "^19.1.0",
+    "@angular/core": "^19.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "angular",
+    "mat-table",
+    "angular-material",
+    "cdk",
+    "table",
+    "grid"
+  ],
+  "author": "Edwin Arias"
+}

package/projects/mat-table-extensions/src/lib/cell.ts

@@ -0,0 +1,58 @@
+import { Directive, inject, input, effect } from "@angular/core";
+import { MatHeaderCellDef, MatTable, MatColumnDef, MatFooterCellDef } from "@angular/material/table";
+
+@Directive({
+    selector: '[matExtraHeaderCellDef]',
+    providers: [{ provide: MatHeaderCellDef, useExisting: MatExtraHeaderCellDefDirective }]
+})
+export class MatExtraHeaderCellDefDirective extends MatHeaderCellDef {
+
+    private _table = inject(MatTable);
+    private _column = inject(MatColumnDef);
+    public _prefix = input('', { alias: 'matExtraHeaderCellDef' })
+
+    constructor() {
+        super();
+
+        let column = new MatColumnDef();
+
+        effect(() => {
+            if (this._table) {
+                column.name = `h_${this._column.name}_${this._prefix()}`;
+                column.sticky = this._column.sticky;
+                column.stickyEnd = this._column.stickyEnd;
+                column.cssClassFriendlyName = this._column.cssClassFriendlyName;
+                column.headerCell = this;
+                this._table.addColumnDef(column);
+            }
+        });
+    }
+}
+
+@Directive({
+    selector: '[matExtraFooterCellDef]',
+    providers: [{ provide: MatFooterCellDef, useExisting: MatExtraFooterCellDefDirective }]
+})
+export class MatExtraFooterCellDefDirective extends MatFooterCellDef {
+
+    private _table = inject(MatTable);
+    private _column = inject(MatColumnDef);
+    public _prefix = input('', { alias: 'matExtraFooterCellDef' })
+
+    constructor() {
+        super();
+
+        let column = new MatColumnDef();
+
+        effect(() => {
+            if (this._table) {
+                column.name = `f_${this._column.name}_${this._prefix()}`;
+                column.sticky = this._column.sticky;
+                column.stickyEnd = this._column.stickyEnd;
+                column.cssClassFriendlyName = this._column.cssClassFriendlyName;
+                column.footerCell = this;
+                this._table.addColumnDef(column);
+            }
+        });
+    }
+}

package/projects/mat-table-extensions/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './cell';
+export * from './row';
+export * from './module';

package/projects/mat-table-extensions/src/lib/module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { MatExtraFooterCellDefDirective, MatExtraFooterRowDefDirective, MatExtraHeaderCellDefDirective, MatExtraHeaderRowDefDirective } from ".";
+import { MatTableModule } from "@angular/material/table";
+
+@NgModule({
+    imports: [
+        MatExtraHeaderCellDefDirective,
+        MatExtraFooterCellDefDirective,
+        MatExtraHeaderRowDefDirective,
+        MatExtraFooterRowDefDirective,
+        MatTableModule
+    ],
+    exports: [
+        MatExtraHeaderCellDefDirective,
+        MatExtraFooterCellDefDirective,
+        MatExtraHeaderRowDefDirective,
+        MatExtraFooterRowDefDirective,
+        MatTableModule
+    ],
+})
+export class MatExtraTableModule { }

package/projects/mat-table-extensions/src/lib/row.ts

@@ -0,0 +1,38 @@
+import { CdkHeaderRowDef, CdkFooterRowDef } from "@angular/cdk/table";
+import { Directive, booleanAttribute, input, effect } from "@angular/core";
+
+@Directive({
+    selector: '[matExtraHeaderRowDef]',
+    providers: [{ provide: CdkHeaderRowDef, useExisting: MatExtraHeaderRowDefDirective }],
+    inputs: [
+        { name: 'columns', alias: 'matExtraHeaderRowDef' },
+        { name: 'sticky', alias: 'matExtraHeaderRowDefSticky', transform: booleanAttribute },
+    ],
+})
+export class MatExtraHeaderRowDefDirective extends CdkHeaderRowDef {
+
+    public _prefix = input.required({ alias: 'matExtraHeaderRowDefName' })
+
+    constructor() {
+        super();
+        effect(() => this.columns = [...this.columns].map(c => `h_${c}_${this._prefix()}`));
+    }
+}
+
+@Directive({
+    selector: '[matExtraFooterRowDef]',
+    providers: [{ provide: CdkFooterRowDef, useExisting: MatExtraFooterRowDefDirective }],
+    inputs: [
+        { name: 'columns', alias: 'matExtraFooterRowDef' },
+        { name: 'sticky', alias: 'matExtraFooterRowDefSticky', transform: booleanAttribute },
+    ],
+})
+export class MatExtraFooterRowDefDirective extends CdkFooterRowDef {
+
+    public _prefix = input.required({ alias: 'matExtraFooterRowDefName' })
+
+    constructor() {
+        super();
+        effect(() => this.columns = [...this.columns].map(c => `f_${c}_${this._prefix()}`));
+    }
+}

package/projects/mat-table-extensions/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of mat-table-extensions
+ */
+
+
+export * from './lib';

package/projects/mat-table-extensions/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/mat-table-extensions/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/mat-table-extensions/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/projects/mat-table-extensions-examples/src/app/app.component.html

@@ -0,0 +1,6 @@
+<div class="navbar">
+    <a [routerLink]="'/basic'" routerLinkActive="active">Basic</a>
+    <a [routerLink]="'/sticky'" routerLinkActive="active">Sticky</a>
+</div>
+
+<router-outlet />

package/projects/mat-table-extensions-examples/src/app/app.component.scss

@@ -0,0 +1,29 @@
+/* Navbar container */
+.navbar {
+    overflow: hidden;
+    background-color: #333;
+    font-family: Arial, Helvetica, sans-serif;
+    margin-bottom: 1rem;
+}
+
+/* Navbar links */
+.navbar a {
+    float: left;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+/* Change color on hover */
+.navbar a:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+/* Active/current link */
+.navbar a.active {
+    background-color: #4CAF50;
+    color: white;
+}

package/projects/mat-table-extensions-examples/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'mat-table-extensions-examples' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('mat-table-extensions-examples');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, mat-table-extensions-examples');
+  });
+});

package/projects/mat-table-extensions-examples/src/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [
+    RouterModule
+  ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+
+}

package/projects/mat-table-extensions-examples/src/app/app.config.ts

@@ -0,0 +1,9 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()]
+};

package/projects/mat-table-extensions-examples/src/app/app.routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import { BasicComponent } from './basic/basic.component';
+import { StickyComponent } from './sticky/sticky.component';
+
+export const routes: Routes = [
+    { path: '', redirectTo: 'basic', pathMatch: 'full' },
+    { path: 'basic', component: BasicComponent },
+    { path: 'sticky', component: StickyComponent },
+];

package/projects/mat-table-extensions-examples/src/app/basic/basic.component.html

@@ -0,0 +1,66 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+    <!-- POSITION -->
+    <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> 1. from html </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let data"> xxxxxxxxxx from html </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+        <td mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="2">f2</td>
+    </ng-container>
+
+    <!-- NAME -->
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+        <td mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="4">f2</td>
+    </ng-container>
+
+    <!-- WEIGHT -->
+    <ng-container matColumnDef="weight">
+        <th mat-header-cell *matHeaderCellDef> Weight </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+    </ng-container>
+
+    <!-- SYMBOL -->
+    <ng-container matColumnDef="symbol">
+        <th mat-header-cell *matHeaderCellDef> Symbol </th>
+        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
+            <input type="text">
+        </th>
+
+        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+
+        <td mat-footer-cell *matFooterCellDef> f1 </td>
+    </ng-container>
+
+
+
+    <!-- HEADERS -->
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-header-row *matExtraHeaderRowDef="displayedColumns; name: 'filter'"></tr>
+
+    <!-- CELLS -->
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    <!-- FOOTER -->
+    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+    <tr mat-footer-row *matExtraFooterRowDef="['position', 'name']; name: 'filter'"></tr>
+
+</table>

package/projects/mat-table-extensions-examples/src/app/basic/basic.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicComponent } from './basic.component';
+
+describe('BasicComponent', () => {
+  let component: BasicComponent;
+  let fixture: ComponentFixture<BasicComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BasicComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BasicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/mat-table-extensions-examples/src/app/basic/basic.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { MatExtraTableModule } from '@ea-controls/mat-table-extensions';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+];
+
+@Component({
+  selector: 'app-basic',
+  imports: [MatExtraTableModule],
+  templateUrl: './basic.component.html',
+  styleUrl: './basic.component.scss'
+})
+export class BasicComponent {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}

package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.html

@@ -0,0 +1,83 @@
+<div>
+    <button mat-raised-button (click)="tables.push(tables.length)">Add table</button>
+    <button mat-raised-button (click)="tables.pop()">Remove table</button>
+</div>
+
+<div>
+    Sticky Headers:
+    <mat-button-toggle-group multiple [value]="['header-1']" #stickyHeaders="matButtonToggleGroup"
+        class="example-sticky-toggle-group">
+        <mat-button-toggle value="header-1"> Row 1 </mat-button-toggle>
+        <mat-button-toggle value="header-2"> Row 2 </mat-button-toggle>
+    </mat-button-toggle-group>
+</div>
+
+<div>
+    Sticky Footers:
+    <mat-button-toggle-group multiple [value]="['footer-1']" #stickyFooters="matButtonToggleGroup"
+        class="example-sticky-toggle-group">
+        <mat-button-toggle value="footer-1"> Row 1 </mat-button-toggle>
+        <mat-button-toggle value="footer-2"> Row 2 </mat-button-toggle>
+    </mat-button-toggle-group>
+</div>
+
+<div>
+    Sticky Columns:
+    <mat-button-toggle-group multiple [value]="['position', 'symbol']" #stickyColumns="matButtonToggleGroup"
+        class="example-sticky-toggle-group">
+        <mat-button-toggle value="position"> Position </mat-button-toggle>
+        <mat-button-toggle value="name"> Name </mat-button-toggle>
+        <mat-button-toggle value="weight"> Weight </mat-button-toggle>
+        <mat-button-toggle value="symbol"> Symbol </mat-button-toggle>
+    </mat-button-toggle-group>
+</div>
+
+<section class="example-container mat-elevation-z8" tabindex="0">
+    @for (table of tables; track table) {
+    <mat-table [dataSource]="dataSource">
+        <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
+            <th mat-header-cell *matHeaderCellDef> Position </th>
+            <th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
+            <td mat-footer-cell mat-cell *matCellDef="let element"> {{element.position}} </td>
+            <td mat-footer-cell *matFooterCellDef> Position Footer </td>
+        </ng-container>
+
+        <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
+            <th mat-header-cell *matHeaderCellDef> Name </th>
+            <th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
+            <td mat-footer-cell mat-cell *matCellDef="let element"> {{element.name}} </td>
+            <td mat-footer-cell *matFooterCellDef> Name Footer </td>
+        </ng-container>
+
+        <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
+            <th mat-header-cell *matHeaderCellDef> Weight </th>
+            <th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
+            <td mat-footer-cell mat-cell *matCellDef="let element"> {{element.weight}} </td>
+            <td mat-footer-cell *matFooterCellDef> Weight Footer </td>
+        </ng-container>
+
+        <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
+            <th mat-header-cell *matHeaderCellDef> Symbol </th>
+            <th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
+            <td mat-footer-cell mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+            <td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
+        </ng-container>
+
+        <ng-container matColumnDef="filler">
+            <th mat-header-cell *matHeaderCellDef> Filler header cell </th>
+            <th mat-header-cell *matExtraHeaderCellDef="'filter'"> <input type="text"> </th>
+            <td mat-footer-cell mat-cell *matCellDef="let element"> Filler data cell </td>
+            <td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
+        </ng-container>
+
+        <tr mat-header-row *matExtraHeaderRowDef="displayedColumns; sticky: true; name: 'filter'"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>
+
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
+        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
+    </mat-table>
+    }
+</section>

package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StickyComponent } from './sticky.component';
+
+describe('StickyComponent', () => {
+  let component: StickyComponent;
+  let fixture: ComponentFixture<StickyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StickyComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StickyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/mat-table-extensions-examples/src/app/sticky/sticky.component.ts

@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatExtraTableModule } from '@ea-controls/mat-table-extensions';
+import { MatButtonToggleGroup } from '@angular/material/button-toggle';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+];
+
+
+@Component({
+  selector: 'app-sticky',
+  imports: [MatExtraTableModule, MatButtonModule, MatButtonToggleModule],
+  templateUrl: './sticky.component.html',
+  styleUrl: './sticky.component.scss'
+})
+export class StickyComponent {
+
+  displayedColumns: string[] = [];
+  dataSource = ELEMENT_DATA;
+
+  tables = [0];
+
+  constructor() {
+    this.displayedColumns.length = 24;
+    this.displayedColumns.fill('filler');
+
+    // The first two columns should be position and name; the last two columns: weight, symbol
+    this.displayedColumns[0] = 'position';
+    this.displayedColumns[1] = 'name';
+    this.displayedColumns[22] = 'weight';
+    this.displayedColumns[23] = 'symbol';
+  }
+
+  /** Whether the button toggle group contains the id as an active value. */
+  isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) {
+    return (buttonToggleGroup.value || []).indexOf(id) !== -1;
+  }
+
+}

package/projects/mat-table-extensions-examples/src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>MatTableExtensionsExamples</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/mat-table-extensions-examples/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

package/projects/mat-table-extensions-examples/src/styles.scss

@@ -0,0 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

package/projects/mat-table-extensions-examples/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/projects/mat-table-extensions-examples/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,35 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "paths": {
+      "mat-table-extensions": [
+        "./dist/mat-table-extensions"
+      ],
+      "@ea-controls/mat-table-extensions": [
+        "./projects/mat-table-extensions/src/public-api"
+      ]
+    },
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}