Support Angular 20

.eslintrc.js

@@ -30,12 +30,7 @@ module.exports = {
       rules: {
         '@angular-eslint/no-attribute-decorator': 'error',
         '@angular-eslint/no-forward-ref': 'error',
-        '@angular-eslint/no-host-metadata-property': [
-          'error',
-          {
-            'allowStatic': true
-          }
-        ],
+        '@angular-eslint/no-host-metadata-property': 'off',
         'brace-style': 'off',
         'no-bitwise': 'off',
         'comma-dangle': 'off',

.github/workflows/test_and_deploy.yml

@@ -12,13 +12,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 20.17.0
+          node-version: 22.16.0
 
       - name: Enable Corepack
         run: corepack enable
 
       - name: Install Yarn
-        run: corepack prepare yarn@4.5.1 --activate
+        run: corepack prepare yarn@4.9.2 --activate
 
       - name: Install dependencies
         run: yarn install --immutable

docs/api/table/inputs.md

@@ -62,7 +62,23 @@ Static messages in the table you can override for localization.
   totalMessage: 'total',
 
   // Footer selected message
-  selectedMessage: 'selected'
+  selectedMessage: 'selected',
+
+  // Pager screen reader message for the first page button
+  ariaFirstPageMessage: 'go to first page',
+
+  // Pager screen reader message for the previous page button
+  ariaPreviousPageMessage: 'go to previous page',
+
+  // Pager screen reader message for the n-th page button.
+  // It will be rendered as: `{{ariaPageNMessage}} {{n}}`.
+  ariaPageNMessage: 'page',
+
+  // Pager screen reader message for the next page button
+  ariaNextPageMessage: 'go to next page',
+
+  // Pager screen reader message for the last page button
+  ariaLastPageMessage: 'go to last page'
 }
 ```
 

docs/api/table/outputs.md

@@ -18,17 +18,6 @@ A cell or row was focused via keyboard or mouse click.
 }
 ```
 
-### `detailToggle`
-
-Row detail row was toggled.
-
-```
-{
-  rows
-  currentIndex
-}
-```
-
 ### `page`
 
 The table was paged either triggered by the pager or the body scroll.

package.json

@@ -31,31 +31,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.1.4",
-    "@angular/cdk": "^18.2.14",
-    "@angular/common": "^19.1.4",
-    "@angular/compiler": "^19.1.4",
-    "@angular/core": "^19.1.4",
-    "@angular/forms": "^19.1.4",
-    "@angular/platform-browser": "^19.1.4",
-    "@angular/platform-browser-dynamic": "^19.1.4",
-    "@angular/router": "^19.1.4",
+    "@angular/animations": "^20.0.5",
+    "@angular/cdk": "^20.0.4",
+    "@angular/common": "^20.0.5",
+    "@angular/compiler": "^20.0.5",
+    "@angular/core": "^20.0.5",
+    "@angular/forms": "^20.0.5",
+    "@angular/platform-browser": "^20.0.5",
+    "@angular/platform-browser-dynamic": "^20.0.5",
+    "@angular/router": "^20.0.5",
     "rxjs": "~7.8.1",
     "tslib": "~2.4.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.1.4",
-    "@angular-devkit/core": "^19.1.4",
-    "@angular-devkit/schematics": "^19.1.4",
-    "@angular-eslint/builder": "^18.0.0",
-    "@angular-eslint/eslint-plugin": "^18.0.0",
-    "@angular-eslint/eslint-plugin-template": "^18.0.0",
-    "@angular-eslint/schematics": "^18.0.0",
-    "@angular-eslint/template-parser": "^18.0.0",
-    "@angular/cli": "^19.1.6",
-    "@angular/compiler-cli": "^19.1.4",
-    "@angular/language-service": "^19.1.4",
+    "@angular-devkit/build-angular": "^20.0.4",
+    "@angular-devkit/core": "^20.0.4",
+    "@angular-devkit/schematics": "^20.0.4",
+    "@angular-eslint/builder": "^20.1.1",
+    "@angular-eslint/eslint-plugin": "^20.1.1",
+    "@angular-eslint/eslint-plugin-template": "^20.1.1",
+    "@angular-eslint/schematics": "^20.1.1",
+    "@angular-eslint/template-parser": "^20.1.1",
+    "@angular/cli": "^20.0.4",
+    "@angular/compiler-cli": "^20.0.5",
+    "@angular/language-service": "^20.0.5",
     "@swimlane/eslint-config": "^2.0.0",
     "@swimlane/prettier-config-swimlane": "^3.0.2",
     "@types/jasmine": "4.3.0",
@@ -87,24 +87,24 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
-    "ng-packagr": "^19.0.0",
+    "ng-packagr": "^20.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "2.7.1",
     "pretty-quick": "3.1.3",
     "protractor": "~7.0.0",
     "sass": "^1.77.6",
     "scss-bundle": "^3.1.1",
     "ts-node": "10.9.1",
-    "typescript": "5.7.3"
+    "typescript": "5.8.3"
   },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
   },
   "volta": {
-    "node": "20.14.0",
-    "yarn": "4.5.1"
+    "node": "22.16.0",
+    "yarn": "4.9.2"
   },
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.9.2"
 }

projects/swimlane/ngx-datatable/package.json

@@ -3,9 +3,9 @@
   "version": "21.1.0",
   "description": "ngx-datatable is an Angular table grid component for presenting large and complex data.",
   "peerDependencies": {
-    "@angular/common": "17.x || 18.x || 19.x",
-    "@angular/core": "17.x || 18.x || 19.x",
-    "@angular/platform-browser": "17.x || 18.x || 19.x",
+    "@angular/common": "18.x || 19.x || 20.x",
+    "@angular/core": "18.x || 19.x || 20.x",
+    "@angular/platform-browser": "18.x || 19.x || 20.x",
     "rxjs": "7.x"
   },
   "dependencies": {

projects/swimlane/ngx-datatable/src/lib/components/body/body-cell.component.scss

@@ -0,0 +1,11 @@
+@use '../shared';
+
+:host {
+  @include shared.cell-styles();
+}
+
+:host-context(ngx-datatable.fixed-row) :host {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

projects/swimlane/ngx-datatable/src/lib/components/body/body-cell.component.spec.ts

@@ -1,43 +1,24 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { numericIndexGetter } from '../../utils/column-prop-getters';
-import { setColumnDefaults } from '../../utils/column-helper';
-import { TableColumn } from '../../types/table-column.type';
+import { toInternalColumn } from '../../utils/column-helper';
 import { DataTableBodyCellComponent } from './body-cell.component';
 
 describe('DataTableBodyCellComponent', () => {
   let fixture: ComponentFixture<DataTableBodyCellComponent>;
   let component: DataTableBodyCellComponent;
 
-  // provide our implementations or mocks to the dependency injector
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [DataTableBodyCellComponent]
-    });
-  });
-
   beforeEach(waitForAsync(() => {
-    TestBed.compileComponents().then(() => {
-      fixture = TestBed.createComponent(DataTableBodyCellComponent);
-      component = fixture.componentInstance;
-    });
+    fixture = TestBed.createComponent(DataTableBodyCellComponent);
+    component = fixture.componentInstance;
   }));
 
-  describe('fixture', () => {
-    it('should have a component instance', () => {
-      expect(component).toBeTruthy();
-    });
-  });
-
   describe('prop tests', () => {
     // verify there wasn't a mistake where the falsey 0 value
     // resulted in a code path for missing column prop
     it('should get value from zero-index prop', () => {
       component.row = ['Hello'];
-      const columns: TableColumn[] = [{ name: 'First Column', prop: 0 }];
-      // users should never set columns on DataTableBodyCellComponent directly
-      // setColumnDefaults will be run on columns before they are set on BodyCellComponent
-      setColumnDefaults(columns);
+      const columns = toInternalColumn([{ name: 'First Column', prop: 0 }]);
       expect(columns[0].$$valueGetter).toBe(numericIndexGetter);
 
       component.column = columns[0];