From a2b2db6f8cb729d2b665d63f4fa67622935a7ac7 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 11:17:08 +0100 Subject: [PATCH 01/28] chore(angular): cleanup and migrate basic example with new angular coding style guide --- .../basic/.devcontainer/devcontainer.json | 4 -- examples/angular/basic/.gitignore | 4 +- examples/angular/basic/README.md | 52 ++++++++++++++---- examples/angular/basic/angular.json | 46 +++++++--------- examples/angular/basic/package.json | 15 ++--- .../angular/basic/{src => public}/favicon.ico | Bin examples/angular/basic/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 0 .../src/app/{app.component.ts => app.ts} | 6 +- examples/angular/basic/src/assets/.gitkeep | 0 examples/angular/basic/src/main.ts | 8 +-- .../basic/src/{styles.scss => styles.css} | 0 examples/angular/basic/tsconfig.app.json | 11 +++- examples/angular/basic/tsconfig.json | 15 ++--- examples/angular/basic/tsconfig.spec.json | 9 --- 15 files changed, 90 insertions(+), 83 deletions(-) delete mode 100644 examples/angular/basic/.devcontainer/devcontainer.json rename examples/angular/basic/{src => public}/favicon.ico (100%) rename examples/angular/basic/src/app/{app.component.html => app.html} (100%) rename examples/angular/basic/src/app/{app.component.ts => app.ts} (97%) delete mode 100644 examples/angular/basic/src/assets/.gitkeep rename examples/angular/basic/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/basic/tsconfig.spec.json diff --git a/examples/angular/basic/.devcontainer/devcontainer.json b/examples/angular/basic/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/basic/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/basic/.gitignore b/examples/angular/basic/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/basic/.gitignore +++ b/examples/angular/basic/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/basic/README.md b/examples/angular/basic/README.md index 5da97a87d1..7ba2b2ea74 100644 --- a/examples/angular/basic/README.md +++ b/examples/angular/basic/README.md @@ -1,27 +1,59 @@ -# Basic +# CustomPlugin -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/basic/angular.json b/examples/angular/basic/angular.json index 9bf6785160..a9b3440e1d 100644 --- a/examples/angular/basic/angular.json +++ b/examples/angular/basic/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "basic": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/basic", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "basic:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json index ef5eddd307..536c530098 100644 --- a/examples/angular/basic/package.json +++ b/examples/angular/basic/package.json @@ -5,30 +5,25 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "eslint ./src" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", "@angular/router": "^21.1.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "@types/jasmine": "~5.1.15", - "jasmine-core": "~5.13.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/basic/src/favicon.ico b/examples/angular/basic/public/favicon.ico similarity index 100% rename from examples/angular/basic/src/favicon.ico rename to examples/angular/basic/public/favicon.ico diff --git a/examples/angular/basic/src/app/app.config.ts b/examples/angular/basic/src/app/app.config.ts index 828af23571..00f6004def 100644 --- a/examples/angular/basic/src/app/app.config.ts +++ b/examples/angular/basic/src/app/app.config.ts @@ -1,7 +1,8 @@ import { provideRouter } from '@angular/router' +import { provideBrowserGlobalErrorListeners } from '@angular/core' import { routes } from './app.routes' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes)], + providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)], } diff --git a/examples/angular/basic/src/app/app.component.html b/examples/angular/basic/src/app/app.html similarity index 100% rename from examples/angular/basic/src/app/app.component.html rename to examples/angular/basic/src/app/app.html diff --git a/examples/angular/basic/src/app/app.component.ts b/examples/angular/basic/src/app/app.ts similarity index 97% rename from examples/angular/basic/src/app/app.component.ts rename to examples/angular/basic/src/app/app.ts index d8df23ad33..056f6982f7 100644 --- a/examples/angular/basic/src/app/app.component.ts +++ b/examples/angular/basic/src/app/app.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core' -import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table' import type { ColumnDef } from '@tanstack/angular-table' +import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table' // This example uses the classic standalone `injectTable` hook to create a table without the new `createTableHook` util. @@ -86,10 +86,10 @@ const defaultColumns: Array> = [ @Component({ selector: 'app-root', imports: [FlexRender], - templateUrl: './app.component.html', + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(defaultData) // 5. Create the table instance with required _features, columns, and data diff --git a/examples/angular/basic/src/assets/.gitkeep b/examples/angular/basic/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/basic/src/main.ts b/examples/angular/basic/src/main.ts index c3d8f9af99..190f3418d4 100644 --- a/examples/angular/basic/src/main.ts +++ b/examples/angular/basic/src/main.ts @@ -1,5 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser' -import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { App } from './app/app'; -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)); diff --git a/examples/angular/basic/src/styles.scss b/examples/angular/basic/src/styles.css similarity index 100% rename from examples/angular/basic/src/styles.scss rename to examples/angular/basic/src/styles.css diff --git a/examples/angular/basic/tsconfig.app.json b/examples/angular/basic/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/basic/tsconfig.app.json +++ b/examples/angular/basic/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/basic/tsconfig.json b/examples/angular/basic/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/basic/tsconfig.json +++ b/examples/angular/basic/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/basic/tsconfig.spec.json b/examples/angular/basic/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/basic/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From bcb27498b5d41e9d9d980d41ce41ba201fcb410f Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 11:17:17 +0100 Subject: [PATCH 02/28] chore(angular): cleanup and migrate basic-app-table example with new angular coding style guide --- .../.devcontainer/devcontainer.json | 4 -- .../angular/basic-app-table/.editorconfig | 16 ----- examples/angular/basic-app-table/.gitignore | 4 +- examples/angular/basic-app-table/AGENTS.md | 56 ++++++++++++++++++ examples/angular/basic-app-table/README.md | 52 ++++++++++++---- examples/angular/basic-app-table/angular.json | 46 ++++++-------- examples/angular/basic-app-table/package.json | 17 ++---- .../{src => public}/favicon.ico | Bin .../basic-app-table/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 0 .../src/app/{app.component.ts => app.ts} | 4 +- examples/angular/basic-app-table/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../angular/basic-app-table/tsconfig.app.json | 11 +++- .../angular/basic-app-table/tsconfig.json | 15 ++--- .../basic-app-table/tsconfig.spec.json | 9 --- 16 files changed, 144 insertions(+), 97 deletions(-) delete mode 100644 examples/angular/basic-app-table/.devcontainer/devcontainer.json delete mode 100644 examples/angular/basic-app-table/.editorconfig create mode 100644 examples/angular/basic-app-table/AGENTS.md rename examples/angular/basic-app-table/{src => public}/favicon.ico (100%) rename examples/angular/basic-app-table/src/app/{app.component.html => app.html} (100%) rename examples/angular/basic-app-table/src/app/{app.component.ts => app.ts} (98%) rename examples/angular/basic-app-table/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/basic-app-table/tsconfig.spec.json diff --git a/examples/angular/basic-app-table/.devcontainer/devcontainer.json b/examples/angular/basic-app-table/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/basic-app-table/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/basic-app-table/.editorconfig b/examples/angular/basic-app-table/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/basic-app-table/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/basic-app-table/.gitignore b/examples/angular/basic-app-table/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/basic-app-table/.gitignore +++ b/examples/angular/basic-app-table/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/basic-app-table/AGENTS.md b/examples/angular/basic-app-table/AGENTS.md new file mode 100644 index 0000000000..34c3b3601d --- /dev/null +++ b/examples/angular/basic-app-table/AGENTS.md @@ -0,0 +1,56 @@ + +You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices. + +## TypeScript Best Practices + +- Use strict type checking +- Prefer type inference when the type is obvious +- Avoid the `any` type; use `unknown` when type is uncertain + +## Angular Best Practices + +- Always use standalone components over NgModules +- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+. +- Use signals for state management +- Implement lazy loading for feature routes +- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead +- Use `NgOptimizedImage` for all static images. + - `NgOptimizedImage` does not work for inline base64 images. + +## Accessibility Requirements + +- It MUST pass all AXE checks. +- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes. + +### Components + +- Keep components small and focused on a single responsibility +- Use `input()` and `output()` functions instead of decorators +- Use `computed()` for derived state +- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator +- Prefer inline templates for small components +- Prefer Reactive forms instead of Template-driven ones +- Do NOT use `ngClass`, use `class` bindings instead +- Do NOT use `ngStyle`, use `style` bindings instead +- When using external templates/styles, use paths relative to the component TS file. + +## State Management + +- Use signals for local component state +- Use `computed()` for derived state +- Keep state transformations pure and predictable +- Do NOT use `mutate` on signals, use `update` or `set` instead + +## Templates + +- Keep templates simple and avoid complex logic +- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch` +- Use the async pipe to handle observables +- Do not assume globals like (`new Date()`) are available. +- Do not write arrow functions in templates (they are not supported). + +## Services + +- Design services around a single responsibility +- Use the `providedIn: 'root'` option for singleton services +- Use the `inject()` function instead of constructor injection diff --git a/examples/angular/basic-app-table/README.md b/examples/angular/basic-app-table/README.md index 5da97a87d1..7ba2b2ea74 100644 --- a/examples/angular/basic-app-table/README.md +++ b/examples/angular/basic-app-table/README.md @@ -1,27 +1,59 @@ -# Basic +# CustomPlugin -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/basic-app-table/angular.json b/examples/angular/basic-app-table/angular.json index b121ae5757..13f79bba70 100644 --- a/examples/angular/basic-app-table/angular.json +++ b/examples/angular/basic-app-table/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "basic-app-table": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/basic-app-table", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "basic-app-table:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/basic-app-table/package.json b/examples/angular/basic-app-table/package.json index 59ea96ff5e..1c1e13dca1 100644 --- a/examples/angular/basic-app-table/package.json +++ b/examples/angular/basic-app-table/package.json @@ -5,30 +5,25 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "eslint ./src" + "lint": "eslint ./src", + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", - "@angular/router": "^21.1.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "@types/jasmine": "~5.1.15", - "jasmine-core": "~5.13.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/basic-app-table/src/favicon.ico b/examples/angular/basic-app-table/public/favicon.ico similarity index 100% rename from examples/angular/basic-app-table/src/favicon.ico rename to examples/angular/basic-app-table/public/favicon.ico diff --git a/examples/angular/basic-app-table/src/app/app.config.ts b/examples/angular/basic-app-table/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/basic-app-table/src/app/app.config.ts +++ b/examples/angular/basic-app-table/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/basic-app-table/src/app/app.component.html b/examples/angular/basic-app-table/src/app/app.html similarity index 100% rename from examples/angular/basic-app-table/src/app/app.component.html rename to examples/angular/basic-app-table/src/app/app.html diff --git a/examples/angular/basic-app-table/src/app/app.component.ts b/examples/angular/basic-app-table/src/app/app.ts similarity index 98% rename from examples/angular/basic-app-table/src/app/app.component.ts rename to examples/angular/basic-app-table/src/app/app.ts index b1af1512db..efcab07c7c 100644 --- a/examples/angular/basic-app-table/src/app/app.component.ts +++ b/examples/angular/basic-app-table/src/app/app.ts @@ -99,10 +99,10 @@ const columns = columnHelper.columns([ @Component({ selector: 'app-root', imports: [FlexRender], - templateUrl: './app.component.html', + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(defaultData) // 6. Create the table instance with the required columns and data. diff --git a/examples/angular/basic-app-table/src/main.ts b/examples/angular/basic-app-table/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/basic-app-table/src/main.ts +++ b/examples/angular/basic-app-table/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/basic-app-table/src/styles.scss b/examples/angular/basic-app-table/src/styles.css similarity index 100% rename from examples/angular/basic-app-table/src/styles.scss rename to examples/angular/basic-app-table/src/styles.css diff --git a/examples/angular/basic-app-table/tsconfig.app.json b/examples/angular/basic-app-table/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/basic-app-table/tsconfig.app.json +++ b/examples/angular/basic-app-table/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/basic-app-table/tsconfig.json b/examples/angular/basic-app-table/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/basic-app-table/tsconfig.json +++ b/examples/angular/basic-app-table/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/basic-app-table/tsconfig.spec.json b/examples/angular/basic-app-table/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/basic-app-table/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 24fa0d36b69db8b750773bc44eeac3084cce20e5 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 11:17:37 +0100 Subject: [PATCH 03/28] chore(angular): cleanup and migrate column-ordering example with new angular coding style guide --- .../basic-app-table/src/assets/.gitkeep | 0 .../.devcontainer/devcontainer.json | 4 - .../angular/column-ordering/.editorconfig | 16 ---- examples/angular/column-ordering/.gitignore | 4 +- examples/angular/column-ordering/README.md | 52 ++++++++--- examples/angular/column-ordering/angular.json | 46 ++++------ examples/angular/column-ordering/package.json | 15 ++-- .../{src => public}/favicon.ico | Bin .../column-ordering/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 10 +-- .../src/app/{app.component.ts => app.ts} | 81 ++++++++---------- .../column-ordering/src/assets/.gitkeep | 0 examples/angular/column-ordering/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../angular/column-ordering/tsconfig.app.json | 11 ++- .../angular/column-ordering/tsconfig.json | 15 +--- .../column-ordering/tsconfig.spec.json | 9 -- 17 files changed, 127 insertions(+), 143 deletions(-) delete mode 100644 examples/angular/basic-app-table/src/assets/.gitkeep delete mode 100644 examples/angular/column-ordering/.devcontainer/devcontainer.json delete mode 100644 examples/angular/column-ordering/.editorconfig rename examples/angular/column-ordering/{src => public}/favicon.ico (100%) rename examples/angular/column-ordering/src/app/{app.component.html => app.html} (90%) rename examples/angular/column-ordering/src/app/{app.component.ts => app.ts} (75%) delete mode 100644 examples/angular/column-ordering/src/assets/.gitkeep rename examples/angular/column-ordering/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/column-ordering/tsconfig.spec.json diff --git a/examples/angular/basic-app-table/src/assets/.gitkeep b/examples/angular/basic-app-table/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/column-ordering/.devcontainer/devcontainer.json b/examples/angular/column-ordering/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/column-ordering/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/column-ordering/.editorconfig b/examples/angular/column-ordering/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/column-ordering/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/column-ordering/.gitignore b/examples/angular/column-ordering/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/column-ordering/.gitignore +++ b/examples/angular/column-ordering/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/column-ordering/README.md b/examples/angular/column-ordering/README.md index 5da97a87d1..7ba2b2ea74 100644 --- a/examples/angular/column-ordering/README.md +++ b/examples/angular/column-ordering/README.md @@ -1,27 +1,59 @@ -# Basic +# CustomPlugin -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/column-ordering/angular.json b/examples/angular/column-ordering/angular.json index 8a1504a87f..e193fc5da5 100644 --- a/examples/angular/column-ordering/angular.json +++ b/examples/angular/column-ordering/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "column-ordering": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/column-ordering", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "column-ordering:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/column-ordering/package.json b/examples/angular/column-ordering/package.json index d62886bd53..207a1e7528 100644 --- a/examples/angular/column-ordering/package.json +++ b/examples/angular/column-ordering/package.json @@ -5,27 +5,26 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "eslint ./src" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", + "@angular/router": "^21.1.0", + "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/column-ordering/src/favicon.ico b/examples/angular/column-ordering/public/favicon.ico similarity index 100% rename from examples/angular/column-ordering/src/favicon.ico rename to examples/angular/column-ordering/public/favicon.ico diff --git a/examples/angular/column-ordering/src/app/app.config.ts b/examples/angular/column-ordering/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/column-ordering/src/app/app.config.ts +++ b/examples/angular/column-ordering/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/column-ordering/src/app/app.component.html b/examples/angular/column-ordering/src/app/app.html similarity index 90% rename from examples/angular/column-ordering/src/app/app.component.html rename to examples/angular/column-ordering/src/app/app.html index fca57e650a..d0355965a7 100644 --- a/examples/angular/column-ordering/src/app/app.component.html +++ b/examples/angular/column-ordering/src/app/app.html @@ -28,9 +28,7 @@
- +
@@ -61,11 +59,7 @@ @for (cell of row.getVisibleCells(); track cell.id) { @for (cell of row.getVisibleCells(); track cell.id) { - +
@for (cell of row.getAllCells(); track cell.id) { -
+ } - + } diff --git a/examples/angular/column-resizing-performant/src/app/app.component.ts b/examples/angular/column-resizing-performant/src/app/app.ts similarity index 92% rename from examples/angular/column-resizing-performant/src/app/app.component.ts rename to examples/angular/column-resizing-performant/src/app/app.ts index 0c59cc3888..1c1c8ba284 100644 --- a/examples/angular/column-resizing-performant/src/app/app.component.ts +++ b/examples/angular/column-resizing-performant/src/app/app.ts @@ -6,14 +6,14 @@ import { untracked, } from '@angular/core' import { - FlexRenderDirective, + FlexRender, columnResizingFeature, columnSizingFeature, injectTable, tableFeatures, } from '@tanstack/angular-table' import { makeData } from './makeData' -import { TableResizableCell, TableResizableHeader } from './resizable-cell' +import { TableResizableCells } from './resizable-cell/resizable-cell' import type { Person } from './makeData' import type { ColumnDef, ColumnResizeMode } from '@tanstack/angular-table' @@ -71,11 +71,11 @@ const defaultColumns: Array> = [ @Component({ selector: 'app-root', - imports: [FlexRenderDirective, TableResizableCell, TableResizableHeader], - templateUrl: './app.component.html', + imports: [FlexRender, TableResizableCells], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(makeData(200)) readonly table = injectTable(() => ({ diff --git a/examples/angular/column-resizing-performant/src/app/resizable-cell.ts b/examples/angular/column-resizing-performant/src/app/resizable-cell/resizable-cell.ts similarity index 81% rename from examples/angular/column-resizing-performant/src/app/resizable-cell.ts rename to examples/angular/column-resizing-performant/src/app/resizable-cell/resizable-cell.ts index af40d01940..99647b4ebe 100644 --- a/examples/angular/column-resizing-performant/src/app/resizable-cell.ts +++ b/examples/angular/column-resizing-performant/src/app/resizable-cell/resizable-cell.ts @@ -1,4 +1,4 @@ -import { computed, Directive, input } from '@angular/core' +import { Directive, computed, input } from '@angular/core' @Directive({ selector: '[tableResizableHeader]', @@ -33,3 +33,8 @@ export class TableResizableCell { () => `calc(var(--col-${this.cellId()}-size) * 1px)`, ) } + +export const TableResizableCells = [ + TableResizableCell, + TableResizableHeader, +] as const diff --git a/examples/angular/column-resizing-performant/src/assets/.gitkeep b/examples/angular/column-resizing-performant/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/column-resizing-performant/src/main.ts b/examples/angular/column-resizing-performant/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/column-resizing-performant/src/main.ts +++ b/examples/angular/column-resizing-performant/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/column-resizing-performant/src/styles.scss b/examples/angular/column-resizing-performant/src/styles.css similarity index 100% rename from examples/angular/column-resizing-performant/src/styles.scss rename to examples/angular/column-resizing-performant/src/styles.css diff --git a/examples/angular/column-resizing-performant/tsconfig.app.json b/examples/angular/column-resizing-performant/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/column-resizing-performant/tsconfig.app.json +++ b/examples/angular/column-resizing-performant/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/column-resizing-performant/tsconfig.json b/examples/angular/column-resizing-performant/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/column-resizing-performant/tsconfig.json +++ b/examples/angular/column-resizing-performant/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/column-resizing-performant/tsconfig.spec.json b/examples/angular/column-resizing-performant/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/column-resizing-performant/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 61c434840e691c2bdf3d9226c00a07ca9137067a Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 11:40:22 +0100 Subject: [PATCH 07/28] chore(angular): cleanup and migrate column-visibility example with new angular coding style guide --- .../.devcontainer/devcontainer.json | 4 -- .../.devcontainer/devcontainer.json | 4 -- .../angular/column-visibility/.editorconfig | 16 ------ examples/angular/column-visibility/.gitignore | 4 +- examples/angular/column-visibility/README.md | 52 ++++++++++++++---- .../angular/column-visibility/angular.json | 46 +++++++--------- .../angular/column-visibility/package.json | 17 +++--- .../{src => public}/favicon.ico | Bin .../column-visibility/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 24 +------- .../src/app/{app.component.ts => app.ts} | 21 +++---- .../column-visibility/src/assets/.gitkeep | 0 .../angular/column-visibility/src/index.html | 2 +- .../angular/column-visibility/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../column-visibility/tsconfig.app.json | 11 +++- .../angular/column-visibility/tsconfig.json | 15 ++--- .../column-visibility/tsconfig.spec.json | 9 --- 18 files changed, 100 insertions(+), 132 deletions(-) delete mode 100644 examples/angular/column-resizing-performant/.devcontainer/devcontainer.json delete mode 100644 examples/angular/column-visibility/.devcontainer/devcontainer.json delete mode 100644 examples/angular/column-visibility/.editorconfig rename examples/angular/column-visibility/{src => public}/favicon.ico (100%) rename examples/angular/column-visibility/src/app/{app.component.html => app.html} (75%) rename examples/angular/column-visibility/src/app/{app.component.ts => app.ts} (88%) delete mode 100644 examples/angular/column-visibility/src/assets/.gitkeep rename examples/angular/column-visibility/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/column-visibility/tsconfig.spec.json diff --git a/examples/angular/column-resizing-performant/.devcontainer/devcontainer.json b/examples/angular/column-resizing-performant/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/column-resizing-performant/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/column-visibility/.devcontainer/devcontainer.json b/examples/angular/column-visibility/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/column-visibility/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/column-visibility/.editorconfig b/examples/angular/column-visibility/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/column-visibility/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/column-visibility/.gitignore b/examples/angular/column-visibility/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/column-visibility/.gitignore +++ b/examples/angular/column-visibility/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/column-visibility/README.md b/examples/angular/column-visibility/README.md index 5da97a87d1..935ca90835 100644 --- a/examples/angular/column-visibility/README.md +++ b/examples/angular/column-visibility/README.md @@ -1,27 +1,59 @@ -# Basic +# Column Resizing Performant -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/column-visibility/angular.json b/examples/angular/column-visibility/angular.json index 527fa62074..fb1aa6a527 100644 --- a/examples/angular/column-visibility/angular.json +++ b/examples/angular/column-visibility/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "column-visibility": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/column-visibility", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "column-visibility:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/column-visibility/package.json b/examples/angular/column-visibility/package.json index b773560ed6..3b31a8c395 100644 --- a/examples/angular/column-visibility/package.json +++ b/examples/angular/column-visibility/package.json @@ -1,31 +1,30 @@ { - "name": "tanstack-table-example-angular-column-visibility", + "name": "tanstack-table-example-angular-column-pinning", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "eslint ./src" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", + "@angular/router": "^21.1.0", + "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/column-visibility/src/favicon.ico b/examples/angular/column-visibility/public/favicon.ico similarity index 100% rename from examples/angular/column-visibility/src/favicon.ico rename to examples/angular/column-visibility/public/favicon.ico diff --git a/examples/angular/column-visibility/src/app/app.config.ts b/examples/angular/column-visibility/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/column-visibility/src/app/app.config.ts +++ b/examples/angular/column-visibility/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/column-visibility/src/app/app.component.html b/examples/angular/column-visibility/src/app/app.html similarity index 75% rename from examples/angular/column-visibility/src/app/app.component.html rename to examples/angular/column-visibility/src/app/app.html index 18b09bac31..50a1240ba6 100644 --- a/examples/angular/column-visibility/src/app/app.component.html +++ b/examples/angular/column-visibility/src/app/app.html @@ -34,13 +34,7 @@ @for (header of headerGroup.headers; track header.id) { @for (cell of row.getVisibleCells(); track cell.id) { @@ -74,13 +62,7 @@ @for (header of footerGroup.headers; track header.id) { @@ -26,13 +20,7 @@ @for (cell of row.getAllCells(); track cell.id) { @@ -45,13 +33,7 @@ @for (footer of footerGroup.headers; track footer.id) { @@ -100,7 +82,5 @@
- + diff --git a/examples/angular/editable/src/app/app.component.ts b/examples/angular/editable/src/app/app.ts similarity index 92% rename from examples/angular/editable/src/app/app.component.ts rename to examples/angular/editable/src/app/app.ts index 58e234f225..9556409877 100644 --- a/examples/angular/editable/src/app/app.component.ts +++ b/examples/angular/editable/src/app/app.ts @@ -7,14 +7,14 @@ import { signal, } from '@angular/core' import { - FlexRenderDirective, + FlexRender, createPaginatedRowModel, flexRenderComponent, injectTable, rowPaginationFeature, tableFeatures, } from '@tanstack/angular-table' -import { EditableCell } from './editable-cell' +import { EditableCell } from './editable-cell/editable-cell' import { makeData } from './makeData' import type { Person } from './makeData' import type { ColumnDef, RowData, TableFeatures } from '@tanstack/angular-table' @@ -38,7 +38,7 @@ const defaultColumn: Partial> = { value: initialValue, }, outputs: { - blur: (value) => { + change: (value) => { if (table.options.meta?.updateData) { table.options.meta.updateData(row.index, column.id, value) } @@ -83,11 +83,11 @@ const defaultColumns: Array> = [ @Component({ selector: 'app-root', - imports: [FlexRenderDirective], - templateUrl: './app.component.html', + imports: [FlexRender], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(makeData(10_000)) readonly injector = inject(Injector) @@ -98,7 +98,7 @@ export class AppComponent { columns: defaultColumns, _features, _rowModels: { - paginatedRowModel: createPaginatedRowModel() as any, + paginatedRowModel: createPaginatedRowModel(), }, defaultColumn: defaultColumn, debugTable: true, diff --git a/examples/angular/editable/src/app/editable-cell.ts b/examples/angular/editable/src/app/editable-cell.ts deleted file mode 100644 index 705244e902..0000000000 --- a/examples/angular/editable/src/app/editable-cell.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { - Component, - effect, - input, - output, - signal, - untracked, -} from '@angular/core' -import { FormsModule } from '@angular/forms' - -@Component({ - selector: 'editable-cell', - template: ` `, - imports: [FormsModule], -}) -export class EditableCell { - readonly modelValue = signal(undefined) - - readonly value = input() - - readonly blur = output() - - constructor() { - effect(() => { - const value = this.value() - untracked(() => this.modelValue.set(value)) - }) - } -} diff --git a/examples/angular/editable/src/app/editable-cell/editable-cell.ts b/examples/angular/editable/src/app/editable-cell/editable-cell.ts new file mode 100644 index 0000000000..7d2e1e131a --- /dev/null +++ b/examples/angular/editable/src/app/editable-cell/editable-cell.ts @@ -0,0 +1,19 @@ +import { Component, input, output } from '@angular/core' +import { FormsModule } from '@angular/forms' + +@Component({ + selector: 'editable-cell', + template: ` + + `, + imports: [FormsModule], +}) +export class EditableCell { + readonly value = input() + + readonly change = output() +} diff --git a/examples/angular/editable/src/assets/.gitkeep b/examples/angular/editable/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/editable/src/favicon.ico b/examples/angular/editable/src/favicon.ico deleted file mode 100644 index 57614f9c967596fad0a3989bec2b1deff33034f6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 zcmd^G33O9Omi+`8$@{|M-I6TH3wzF-p5CV8o}7f~KxR60LK+ApEFB<$bcciv%@SmA zV{n>g85YMFFeU*Uvl=i4v)C*qgnb;$GQ=3XTe9{Y%c`mO%su)noNCCQ*@t1WXn|B(hQ7i~ zrUK8|pUkD6#lNo!bt$6)jR!&C?`P5G(`e((P($RaLeq+o0Vd~f11;qB05kdbAOm?r zXv~GYr_sibQO9NGTCdT;+G(!{4Xs@4fPak8#L8PjgJwcs-Mm#nR_Z0s&u?nDX5^~@ z+A6?}g0|=4e_LoE69pPFO`yCD@BCjgKpzMH0O4Xs{Ahc?K3HC5;l=f zg>}alhBXX&);z$E-wai+9TTRtBX-bWYY@cl$@YN#gMd~tM_5lj6W%8ah4;uZ;jP@Q zVbuel1rPA?2@x9Y+u?e`l{Z4ngfG5q5BLH5QsEu4GVpt{KIp1?U)=3+KQ;%7ec8l* zdV=zZgN5>O3G(3L2fqj3;oBbZZw$Ij@`Juz@?+yy#OPw)>#wsTewVgTK9BGt5AbZ&?K&B3GVF&yu?@(Xj3fR3n+ZP0%+wo)D9_xp>Z$`A4 zfV>}NWjO#3lqumR0`gvnffd9Ka}JJMuHS&|55-*mCD#8e^anA<+sFZVaJe7{=p*oX zE_Uv?1>e~ga=seYzh{9P+n5<+7&9}&(kwqSaz;1aD|YM3HBiy<))4~QJSIryyqp| z8nGc(8>3(_nEI4n)n7j(&d4idW1tVLjZ7QbNLXg;LB ziHsS5pXHEjGJZb59KcvS~wv;uZR-+4qEqow`;JCfB*+b^UL^3!?;-^F%yt=VjU|v z39SSqKcRu_NVvz!zJzL0CceJaS6%!(eMshPv_0U5G`~!a#I$qI5Ic(>IONej@aH=f z)($TAT#1I{iCS4f{D2+ApS=$3E7}5=+y(rA9mM#;Cky%b*Gi0KfFA`ofKTzu`AV-9 znW|y@19rrZ*!N2AvDi<_ZeR3O2R{#dh1#3-d%$k${Rx42h+i&GZo5!C^dSL34*AKp z27mTd>k>?V&X;Nl%GZ(>0s`1UN~Hfyj>KPjtnc|)xM@{H_B9rNr~LuH`Gr5_am&Ep zTjZA8hljNj5H1Ipm-uD9rC}U{-vR!eay5&6x6FkfupdpT*84MVwGpdd(}ib)zZ3Ky z7C$pnjc82(W_y_F{PhYj?o!@3__UUvpX)v69aBSzYj3 zdi}YQkKs^SyXyFG2LTRz9{(w}y~!`{EuAaUr6G1M{*%c+kP1olW9z23dSH!G4_HSK zzae-DF$OGR{ofP*!$a(r^5Go>I3SObVI6FLY)N@o<*gl0&kLo-OT{Tl*7nCz>Iq=? zcigIDHtj|H;6sR?or8Wd_a4996GI*CXGU}o;D9`^FM!AT1pBY~?|4h^61BY#_yIfO zKO?E0 zJ{Pc`9rVEI&$xxXu`<5E)&+m(7zX^v0rqofLs&bnQT(1baQkAr^kEsk)15vlzAZ-l z@OO9RF<+IiJ*O@HE256gCt!bF=NM*vh|WVWmjVawcNoksRTMvR03H{p@cjwKh(CL4 z7_PB(dM=kO)!s4fW!1p0f93YN@?ZSG` z$B!JaAJCtW$B97}HNO9(x-t30&E}Mo1UPi@Av%uHj~?T|!4JLwV;KCx8xO#b9IlUW zI6+{a@Wj|<2Y=U;a@vXbxqZNngH8^}LleE_4*0&O7#3iGxfJ%Id>+sb;7{L=aIic8 z|EW|{{S)J-wr@;3PmlxRXU8!e2gm_%s|ReH!reFcY8%$Hl4M5>;6^UDUUae?kOy#h zk~6Ee_@ZAn48Bab__^bNmQ~+k=02jz)e0d9Z3>G?RGG!65?d1>9}7iG17?P*=GUV-#SbLRw)Hu{zx*azHxWkGNTWl@HeWjA?39Ia|sCi{e;!^`1Oec zb>Z|b65OM*;eC=ZLSy?_fg$&^2xI>qSLA2G*$nA3GEnp3$N-)46`|36m*sc#4%C|h zBN<2U;7k>&G_wL4=Ve5z`ubVD&*Hxi)r@{4RCDw7U_D`lbC(9&pG5C*z#W>8>HU)h z!h3g?2UL&sS!oY5$3?VlA0Me9W5e~V;2jds*fz^updz#AJ%G8w2V}AEE?E^=MK%Xt z__Bx1cr7+DQmuHmzn*|hh%~eEc9@m05@clWfpEFcr+06%0&dZJH&@8^&@*$qR@}o3 z@Tuuh2FsLz^zH+dN&T&?0G3I?MpmYJ;GP$J!EzjeM#YLJ!W$}MVNb0^HfOA>5Fe~UNn%Zk(PT@~9}1dt)1UQ zU*B5K?Dl#G74qmg|2>^>0WtLX#Jz{lO4NT`NYB*(L#D|5IpXr9v&7a@YsGp3vLR7L zHYGHZg7{ie6n~2p$6Yz>=^cEg7tEgk-1YRl%-s7^cbqFb(U7&Dp78+&ut5!Tn(hER z|Gp4Ed@CnOPeAe|N>U(dB;SZ?NU^AzoD^UAH_vamp6Ws}{|mSq`^+VP1g~2B{%N-!mWz<`)G)>V-<`9`L4?3dM%Qh6<@kba+m`JS{Ya@9Fq*m6$$ zA1%Ogc~VRH33|S9l%CNb4zM%k^EIpqY}@h{w(aBcJ9c05oiZx#SK9t->5lSI`=&l~ z+-Ic)a{FbBhXV$Xt!WRd`R#Jk-$+_Z52rS>?Vpt2IK<84|E-SBEoIw>cs=a{BlQ7O z-?{Fy_M&84&9|KM5wt~)*!~i~E=(6m8(uCO)I=)M?)&sRbzH$9Rovzd?ZEY}GqX+~ zFbEbLz`BZ49=2Yh-|<`waK-_4!7`ro@zlC|r&I4fc4oyb+m=|c8)8%tZ-z5FwhzDt zL5kB@u53`d@%nHl0Sp)Dw`(QU&>vujEn?GPEXUW!Wi<+4e%BORl&BIH+SwRcbS}X@ z01Pk|vA%OdJKAs17zSXtO55k!;%m9>1eW9LnyAX4uj7@${O6cfii`49qTNItzny5J zH&Gj`e}o}?xjQ}r?LrI%FjUd@xflT3|7LA|ka%Q3i}a8gVm<`HIWoJGH=$EGClX^C0lysQJ>UO(q&;`T#8txuoQ_{l^kEV9CAdXuU1Ghg8 zN_6hHFuy&1x24q5-(Z7;!poYdt*`UTdrQOIQ!2O7_+AHV2hgXaEz7)>$LEdG z<8vE^Tw$|YwZHZDPM!SNOAWG$?J)MdmEk{U!!$M#fp7*Wo}jJ$Q(=8>R`Ats?e|VU?Zt7Cdh%AdnfyN3MBWw{ z$OnREvPf7%z6`#2##_7id|H%Y{vV^vWXb?5d5?a_y&t3@p9t$ncHj-NBdo&X{wrfJ zamN)VMYROYh_SvjJ=Xd!Ga?PY_$;*L=SxFte!4O6%0HEh%iZ4=gvns7IWIyJHa|hT z2;1+e)`TvbNb3-0z&DD_)Jomsg-7p_Uh`wjGnU1urmv1_oVqRg#=C?e?!7DgtqojU zWoAB($&53;TsXu^@2;8M`#z{=rPy?JqgYM0CDf4v@z=ZD|ItJ&8%_7A#K?S{wjxgd z?xA6JdJojrWpB7fr2p_MSsU4(R7=XGS0+Eg#xR=j>`H@R9{XjwBmqAiOxOL` zt?XK-iTEOWV}f>Pz3H-s*>W z4~8C&Xq25UQ^xH6H9kY_RM1$ch+%YLF72AA7^b{~VNTG}Tj#qZltz5Q=qxR`&oIlW Nr__JTFzvMr^FKp4S3v*( diff --git a/examples/angular/editable/src/main.ts b/examples/angular/editable/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/editable/src/main.ts +++ b/examples/angular/editable/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/editable/src/styles.scss b/examples/angular/editable/src/styles.css similarity index 100% rename from examples/angular/editable/src/styles.scss rename to examples/angular/editable/src/styles.css diff --git a/examples/angular/editable/tsconfig.app.json b/examples/angular/editable/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/editable/tsconfig.app.json +++ b/examples/angular/editable/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/editable/tsconfig.json b/examples/angular/editable/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/editable/tsconfig.json +++ b/examples/angular/editable/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/editable/tsconfig.spec.json b/examples/angular/editable/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/editable/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From c3b9f75f43b6216ce5cd12298d9f8a9c1186b200 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:05:48 +0100 Subject: [PATCH 09/28] chore(angular): cleanup and migrate expanding example with new angular coding style guide --- .../expanding/.devcontainer/devcontainer.json | 4 - examples/angular/expanding/.editorconfig | 16 ---- examples/angular/expanding/.gitignore | 4 +- examples/angular/expanding/README.md | 52 +++++++++-- examples/angular/expanding/angular.json | 88 +++++++++++------- examples/angular/expanding/package.json | 15 ++- .../expanding/{src => public}/favicon.ico | Bin .../angular/expanding/src/app/app.config.ts | 5 +- .../src/app/{app.component.html => app.html} | 0 .../src/app/{app.component.ts => app.ts} | 19 ++-- .../{ => expandable-cell}/expandable-cell.ts | 41 ++------ .../angular/expanding/src/assets/.gitkeep | 0 examples/angular/expanding/src/main.ts | 4 +- .../expanding/src/{styles.scss => styles.css} | 0 examples/angular/expanding/tsconfig.app.json | 11 ++- examples/angular/expanding/tsconfig.json | 15 +-- examples/angular/expanding/tsconfig.spec.json | 9 -- 17 files changed, 141 insertions(+), 142 deletions(-) delete mode 100644 examples/angular/expanding/.devcontainer/devcontainer.json delete mode 100644 examples/angular/expanding/.editorconfig rename examples/angular/expanding/{src => public}/favicon.ico (100%) rename examples/angular/expanding/src/app/{app.component.html => app.html} (100%) rename examples/angular/expanding/src/app/{app.component.ts => app.ts} (87%) rename examples/angular/expanding/src/app/{ => expandable-cell}/expandable-cell.ts (66%) delete mode 100644 examples/angular/expanding/src/assets/.gitkeep rename examples/angular/expanding/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/expanding/tsconfig.spec.json diff --git a/examples/angular/expanding/.devcontainer/devcontainer.json b/examples/angular/expanding/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/expanding/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/expanding/.editorconfig b/examples/angular/expanding/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/expanding/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/expanding/.gitignore b/examples/angular/expanding/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/expanding/.gitignore +++ b/examples/angular/expanding/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/expanding/README.md b/examples/angular/expanding/README.md index 5da97a87d1..62711f7792 100644 --- a/examples/angular/expanding/README.md +++ b/examples/angular/expanding/README.md @@ -1,27 +1,59 @@ -# Basic +# Expanding -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/expanding/angular.json b/examples/angular/expanding/angular.json index afb55da75f..9743569091 100644 --- a/examples/angular/expanding/angular.json +++ b/examples/angular/expanding/angular.json @@ -1,18 +1,43 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "expanding": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { - "style": "scss" + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true } }, "root": "", @@ -20,21 +45,32 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:application", + "builder": "@angular/build:application", "options": { - "outputPath": "dist/expanding", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { - "budgets": [], + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], "outputHashing": "all" }, "development": { @@ -46,7 +82,7 @@ "defaultConfiguration": "production" }, "serve": { - "builder": "@angular-devkit/build-angular:dev-server", + "builder": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "expanding:build:production" @@ -56,28 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "expanding:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "polyfills": ["zone.js", "zone.js/testing"], - "tsConfig": "tsconfig.spec.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/expanding/package.json b/examples/angular/expanding/package.json index dfd8b54400..c7cf710217 100644 --- a/examples/angular/expanding/package.json +++ b/examples/angular/expanding/package.json @@ -5,29 +5,26 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { - "@angular/animations": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^21.1.0", + "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/expanding/src/favicon.ico b/examples/angular/expanding/public/favicon.ico similarity index 100% rename from examples/angular/expanding/src/favicon.ico rename to examples/angular/expanding/public/favicon.ico diff --git a/examples/angular/expanding/src/app/app.config.ts b/examples/angular/expanding/src/app/app.config.ts index f27099f33c..cbb47d366c 100644 --- a/examples/angular/expanding/src/app/app.config.ts +++ b/examples/angular/expanding/src/app/app.config.ts @@ -1,5 +1,6 @@ -import { ApplicationConfig } from '@angular/core' +import { provideBrowserGlobalErrorListeners } from '@angular/core' +import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/expanding/src/app/app.component.html b/examples/angular/expanding/src/app/app.html similarity index 100% rename from examples/angular/expanding/src/app/app.component.html rename to examples/angular/expanding/src/app/app.html diff --git a/examples/angular/expanding/src/app/app.component.ts b/examples/angular/expanding/src/app/app.ts similarity index 87% rename from examples/angular/expanding/src/app/app.component.ts rename to examples/angular/expanding/src/app/app.ts index a3cc29eb4e..9d238163d2 100644 --- a/examples/angular/expanding/src/app/app.component.ts +++ b/examples/angular/expanding/src/app/app.ts @@ -5,7 +5,7 @@ import { signal, } from '@angular/core' import { - FlexRenderDirective, + FlexRender, createExpandedRowModel, createPaginatedRowModel, flexRenderComponent, @@ -17,11 +17,14 @@ import { } from '@tanstack/angular-table' import { ReactiveFormsModule } from '@angular/forms' import { makeData } from './makeData' -import { ExpandableCell, ExpandableHeaderCell } from './expandable-cell' +import { + ExpandableCell, + ExpandableHeaderCell, +} from './expandable-cell/expandable-cell' import type { Person } from './makeData' import type { ColumnDef, ExpandedState } from '@tanstack/angular-table' -const _features = tableFeatures({ +export const _features = tableFeatures({ rowExpandingFeature: rowExpandingFeature, rowPaginationFeature: rowPaginationFeature, rowSelectionFeature: rowSelectionFeature, @@ -69,19 +72,19 @@ const defaultColumns: Array> = [ @Component({ selector: 'app-root', - imports: [FlexRenderDirective, ReactiveFormsModule], - templateUrl: './app.component.html', + imports: [FlexRender, ReactiveFormsModule], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(makeData(100, 5, 3)) readonly expanded = signal({}) readonly table = injectTable(() => ({ _features, _rowModels: { - paginatedRowModel: createPaginatedRowModel(), - expandedRowModel: createExpandedRowModel(), + paginatedRowModel: createPaginatedRowModel(), + expandedRowModel: createExpandedRowModel(), }, data: this.data(), columns: defaultColumns, diff --git a/examples/angular/expanding/src/app/expandable-cell.ts b/examples/angular/expanding/src/app/expandable-cell/expandable-cell.ts similarity index 66% rename from examples/angular/expanding/src/app/expandable-cell.ts rename to examples/angular/expanding/src/app/expandable-cell/expandable-cell.ts index 6c7dad3a8d..281edc92d4 100644 --- a/examples/angular/expanding/src/app/expandable-cell.ts +++ b/examples/angular/expanding/src/app/expandable-cell/expandable-cell.ts @@ -1,13 +1,10 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core' import { - type HeaderContext, - injectFlexRenderContext, - type Table, - CellContext, - rowExpandingFeature, - RowData, - rowSelectionFeature, + injectTableCellContext, + injectTableHeaderContext, } from '@tanstack/angular-table' +import type { RowData } from '@tanstack/angular-table' +import type { _features } from '../app' @Component({ standalone: true, @@ -21,7 +18,7 @@ import { {{ ' ' }} {{ label() }} @@ -29,21 +26,12 @@ import { changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExpandableHeaderCell { - readonly context = injectFlexRenderContext< - HeaderContext< - { - rowExpandingFeature: typeof rowExpandingFeature - rowSelectionFeature: typeof rowSelectionFeature - }, - T, - unknown - > - >() + readonly context = injectTableHeaderContext() readonly label = input.required() get table() { - return this.context.table + return this.context().table } } @@ -69,7 +57,7 @@ export class ExpandableHeaderCell { } {{ ' ' }} - {{ context.getValue() }} + {{ context().getValue() }} `, @@ -83,18 +71,9 @@ export class ExpandableHeaderCell { `, }) export class ExpandableCell { - readonly context = injectFlexRenderContext< - CellContext< - { - rowExpandingFeature: typeof rowExpandingFeature - rowSelectionFeature: typeof rowSelectionFeature - }, - T, - unknown - > - >() + readonly context = injectTableCellContext() get row() { - return this.context.row + return this.context().row } } diff --git a/examples/angular/expanding/src/assets/.gitkeep b/examples/angular/expanding/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/expanding/src/main.ts b/examples/angular/expanding/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/expanding/src/main.ts +++ b/examples/angular/expanding/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/expanding/src/styles.scss b/examples/angular/expanding/src/styles.css similarity index 100% rename from examples/angular/expanding/src/styles.scss rename to examples/angular/expanding/src/styles.css diff --git a/examples/angular/expanding/tsconfig.app.json b/examples/angular/expanding/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/expanding/tsconfig.app.json +++ b/examples/angular/expanding/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/expanding/tsconfig.json b/examples/angular/expanding/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/expanding/tsconfig.json +++ b/examples/angular/expanding/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/expanding/tsconfig.spec.json b/examples/angular/expanding/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/expanding/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 1b15e1d1cb110b969ea88e70ac75911c6d062ca6 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:14:44 +0100 Subject: [PATCH 10/28] chore(angular): cleanup and migrate filters example with new angular coding style guide --- .../filters/.devcontainer/devcontainer.json | 4 - examples/angular/filters/.editorconfig | 16 -- examples/angular/filters/.gitignore | 4 +- examples/angular/filters/README.md | 52 ++++-- examples/angular/filters/angular.json | 46 +++--- examples/angular/filters/package.json | 16 +- .../filters/{src => public}/favicon.ico | Bin .../angular/filters/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 38 +---- .../src/app/{app.component.ts => app.ts} | 16 +- .../debounced-input.ts} | 15 +- .../filters/src/app/table-filter.component.ts | 146 ----------------- .../src/app/table-filter/table-filter.ts | 150 ++++++++++++++++++ examples/angular/filters/src/assets/.gitkeep | 0 examples/angular/filters/src/main.ts | 4 +- .../filters/src/{styles.scss => styles.css} | 0 examples/angular/filters/tsconfig.app.json | 11 +- examples/angular/filters/tsconfig.json | 14 +- examples/angular/filters/tsconfig.spec.json | 9 -- 19 files changed, 252 insertions(+), 292 deletions(-) delete mode 100644 examples/angular/filters/.devcontainer/devcontainer.json delete mode 100644 examples/angular/filters/.editorconfig rename examples/angular/filters/{src => public}/favicon.ico (100%) rename examples/angular/filters/src/app/{app.component.html => app.html} (73%) rename examples/angular/filters/src/app/{app.component.ts => app.ts} (89%) rename examples/angular/filters/src/app/{debounced-input.directive.ts => debounced-input/debounced-input.ts} (58%) delete mode 100644 examples/angular/filters/src/app/table-filter.component.ts create mode 100644 examples/angular/filters/src/app/table-filter/table-filter.ts delete mode 100644 examples/angular/filters/src/assets/.gitkeep rename examples/angular/filters/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/filters/tsconfig.spec.json diff --git a/examples/angular/filters/.devcontainer/devcontainer.json b/examples/angular/filters/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/filters/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/filters/.editorconfig b/examples/angular/filters/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/filters/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/filters/.gitignore b/examples/angular/filters/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/filters/.gitignore +++ b/examples/angular/filters/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/filters/README.md b/examples/angular/filters/README.md index 73a201f1eb..82235139a6 100644 --- a/examples/angular/filters/README.md +++ b/examples/angular/filters/README.md @@ -1,27 +1,59 @@ -# Selection +# Filters -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/filters/angular.json b/examples/angular/filters/angular.json index d85470334a..01aaea497d 100644 --- a/examples/angular/filters/angular.json +++ b/examples/angular/filters/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "filters": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/filters", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "filters:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/filters/package.json b/examples/angular/filters/package.json index 0ef72862d2..c7cf710217 100644 --- a/examples/angular/filters/package.json +++ b/examples/angular/filters/package.json @@ -1,32 +1,30 @@ { - "name": "tanstack-table-example-angular-filters", + "name": "tanstack-table-example-angular-expanding", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "eslint ./src" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", + "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "tslib": "^2.8.1", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/filters/src/favicon.ico b/examples/angular/filters/public/favicon.ico similarity index 100% rename from examples/angular/filters/src/favicon.ico rename to examples/angular/filters/public/favicon.ico diff --git a/examples/angular/filters/src/app/app.config.ts b/examples/angular/filters/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/filters/src/app/app.config.ts +++ b/examples/angular/filters/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/filters/src/app/app.component.html b/examples/angular/filters/src/app/app.html similarity index 73% rename from examples/angular/filters/src/app/app.component.html rename to examples/angular/filters/src/app/app.html index 3b32a4007c..dce73065aa 100644 --- a/examples/angular/filters/src/app/app.component.html +++ b/examples/angular/filters/src/app/app.html @@ -9,17 +9,10 @@ @for (cell of row.getAllCells(); track cell.id) { @@ -113,10 +97,7 @@ /> - @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) { } @@ -124,15 +105,10 @@
{{ table.getPrePaginatedRowModel().rows.length }} Rows
- + 
{{ stringifiedFilters() }}
- - Age 🥳 - diff --git a/examples/angular/filters/src/app/app.component.ts b/examples/angular/filters/src/app/app.ts similarity index 89% rename from examples/angular/filters/src/app/app.component.ts rename to examples/angular/filters/src/app/app.ts index 227f8e188a..4c46bda2e9 100644 --- a/examples/angular/filters/src/app/app.component.ts +++ b/examples/angular/filters/src/app/app.ts @@ -5,7 +5,7 @@ import { signal, } from '@angular/core' import { - FlexRenderDirective, + FlexRender, columnFacetingFeature, columnFilteringFeature, createFacetedMinMaxValues, @@ -22,14 +22,12 @@ import { sortFns, tableFeatures, } from '@tanstack/angular-table' -import { FormsModule } from '@angular/forms' -import { NgClass } from '@angular/common' -import { FilterComponent } from './table-filter.component' import { makeData } from './makeData' +import { TableFilter } from './table-filter/table-filter' import type { ColumnFiltersState, Updater } from '@tanstack/angular-table' import type { Person } from './makeData' -const _features = tableFeatures({ +export const _features = tableFeatures({ columnFilteringFeature, columnFacetingFeature, rowPaginationFeature, @@ -88,15 +86,13 @@ const columns = columnHelper.columns([ }), ]) -export { _features } - @Component({ selector: 'app-root', - imports: [FilterComponent, FlexRenderDirective, FormsModule, NgClass], - templateUrl: './app.component.html', + imports: [TableFilter, FlexRender], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly columnFilters = signal([]) readonly data = signal(makeData(5000)) diff --git a/examples/angular/filters/src/app/debounced-input.directive.ts b/examples/angular/filters/src/app/debounced-input/debounced-input.ts similarity index 58% rename from examples/angular/filters/src/app/debounced-input.directive.ts rename to examples/angular/filters/src/app/debounced-input/debounced-input.ts index 161636e14c..e9e82d8346 100644 --- a/examples/angular/filters/src/app/debounced-input.directive.ts +++ b/examples/angular/filters/src/app/debounced-input/debounced-input.ts @@ -1,23 +1,12 @@ import { Directive, ElementRef, inject, input } from '@angular/core' -import { Observable, debounceTime, fromEvent, switchMap } from 'rxjs' +import { debounceTime, fromEvent, switchMap } from 'rxjs' import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop' -import type { MonoTypeOperatorFunction } from 'rxjs' -import type { NgZone } from '@angular/core' - -export function runOutsideAngular( - zone: NgZone, -): MonoTypeOperatorFunction { - return (source) => - new Observable((subscriber) => - zone.runOutsideAngular(() => source.subscribe(subscriber)), - ) -} @Directive({ standalone: true, selector: 'input[debouncedInput]', }) -export class DebouncedInputDirective { +export class DebouncedInput { #ref = inject(ElementRef).nativeElement as HTMLInputElement readonly debounce = input(500) diff --git a/examples/angular/filters/src/app/table-filter.component.ts b/examples/angular/filters/src/app/table-filter.component.ts deleted file mode 100644 index 275d519036..0000000000 --- a/examples/angular/filters/src/app/table-filter.component.ts +++ /dev/null @@ -1,146 +0,0 @@ -import { Component, computed, input } from '@angular/core' -import { DebouncedInputDirective } from './debounced-input.directive' -import type { _features } from './app.component' -import type { Person } from './makeData' -import type { - CellData, - Column, - RowData, - Table, - TableFeatures, -} from '@tanstack/angular-table' - -declare module '@tanstack/angular-table' { - // allows us to define custom properties for our columns - interface ColumnMeta< - TFeatures extends TableFeatures, - TData extends RowData, - TValue extends CellData = CellData, - > { - filterVariant?: 'text' | 'range' | 'select' - } -} - -@Component({ - selector: 'app-table-filter', - template: ` - @if (filterVariant() === 'range') { -
-
- - - -
-
-
- } @else if (filterVariant() === 'select') { - - } @else { - - @for (value of sortedUniqueValues(); track value) { - - } - - -
- } - `, - imports: [DebouncedInputDirective], -}) -export class FilterComponent { - column = input.required>() - - table = input.required>() - - readonly filterVariant = computed(() => { - return (this.column().columnDef.meta ?? {}).filterVariant - }) - - readonly columnFilterValue = computed(() => - this.column().getFilterValue(), - ) - - readonly minRangePlaceholder = computed(() => { - return `Min ${ - this.column().getFacetedMinMaxValues()?.[0] !== undefined - ? `(${this.column().getFacetedMinMaxValues()?.[0]})` - : '' - }` - }) - - readonly maxRangePlaceholder = computed(() => { - return `Max ${ - this.column().getFacetedMinMaxValues()?.[1] - ? `(${this.column().getFacetedMinMaxValues()?.[1]})` - : '' - }` - }) - - readonly sortedUniqueValues = computed(() => { - const filterVariant = this.filterVariant() - const column = this.column() - if (filterVariant === 'range') { - return [] - } - return Array.from(column.getFacetedUniqueValues().keys()) - .sort() - .slice(0, 5000) - }) - - readonly changeMinRangeValue = (event: Event) => { - const value = (event.target as HTMLInputElement).value - this.column().setFilterValue((old: [number, number]) => { - return [value, old[1]] - }) - } - - readonly changeMaxRangeValue = (event: Event) => { - const value = (event.target as HTMLInputElement).value - this.column().setFilterValue((old: [number, number]) => { - return [old[0], value] - }) - } -} diff --git a/examples/angular/filters/src/app/table-filter/table-filter.ts b/examples/angular/filters/src/app/table-filter/table-filter.ts new file mode 100644 index 0000000000..5d3da96011 --- /dev/null +++ b/examples/angular/filters/src/app/table-filter/table-filter.ts @@ -0,0 +1,150 @@ +import { Component, computed, input } from '@angular/core' +import { DebouncedInput } from '../debounced-input/debounced-input' +import type { _features } from '../app' +import type { Person } from '../makeData' +import type { + CellData, + Column, + RowData, + Table, + TableFeatures, +} from '@tanstack/angular-table' + +declare module '@tanstack/angular-table' { + // allows us to define custom properties for our columns + interface ColumnMeta< + TFeatures extends TableFeatures, + TData extends RowData, + TValue extends CellData = CellData, + > { + filterVariant?: 'text' | 'range' | 'select' + } +} + +@Component({ + selector: 'app-table-filter', + template: ` + @switch (filterVariant()) { + @case ('range') { +
+
+ + + +
+
+
+ } + @case ('select') { + + } + @default { + + @for (value of sortedUniqueValues(); track value) { + + } + + +
+ } + } + `, + imports: [DebouncedInput], +}) +export class TableFilter { + readonly column = input.required>() + + readonly table = input.required>() + + readonly filterVariant = computed(() => { + return (this.column().columnDef.meta ?? {}).filterVariant + }) + + readonly columnFilterValue = computed( + () => this.column().getFilterValue() as any, + ) + + readonly minRangePlaceholder = computed(() => { + return `Min ${ + this.column().getFacetedMinMaxValues()?.[0] !== undefined + ? `(${this.column().getFacetedMinMaxValues()?.[0]})` + : '' + }` + }) + + readonly maxRangePlaceholder = computed(() => { + return `Max ${ + this.column().getFacetedMinMaxValues()?.[1] + ? `(${this.column().getFacetedMinMaxValues()?.[1]})` + : '' + }` + }) + + readonly sortedUniqueValues = computed(() => { + const filterVariant = this.filterVariant() + const column = this.column() + if (filterVariant === 'range') { + return [] + } + return Array.from(column.getFacetedUniqueValues().keys()) + .sort() + .slice(0, 5000) + }) + + readonly changeMinRangeValue = (event: Event) => { + const value = (event.target as HTMLInputElement).value + this.column().setFilterValue((old?: [number, number]) => { + return [value, old?.[1]] + }) + } + + readonly changeMaxRangeValue = (event: Event) => { + const value = (event.target as HTMLInputElement).value + this.column().setFilterValue((old?: [number, number]) => { + return [old?.[0], value] + }) + } +} diff --git a/examples/angular/filters/src/assets/.gitkeep b/examples/angular/filters/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/filters/src/main.ts b/examples/angular/filters/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/filters/src/main.ts +++ b/examples/angular/filters/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/filters/src/styles.scss b/examples/angular/filters/src/styles.css similarity index 100% rename from examples/angular/filters/src/styles.scss rename to examples/angular/filters/src/styles.css diff --git a/examples/angular/filters/tsconfig.app.json b/examples/angular/filters/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/filters/tsconfig.app.json +++ b/examples/angular/filters/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/filters/tsconfig.json b/examples/angular/filters/tsconfig.json index 71bf477e16..593e98476d 100644 --- a/examples/angular/filters/tsconfig.json +++ b/examples/angular/filters/tsconfig.json @@ -1,25 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "bundler", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/filters/tsconfig.spec.json b/examples/angular/filters/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/filters/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 73cc61af6ede7e684995c9969a9cee4b25af9905 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:19:48 +0100 Subject: [PATCH 11/28] chore(angular): cleanup and migrate grouping example with new angular coding style guide --- examples/angular/filters/package.json | 2 +- .../grouping/.devcontainer/devcontainer.json | 4 -- examples/angular/grouping/.editorconfig | 16 ------ examples/angular/grouping/.gitignore | 4 +- examples/angular/grouping/README.md | 50 ++++++++++++++---- examples/angular/grouping/angular.json | 46 +++++++--------- examples/angular/grouping/package.json | 11 ++-- .../grouping/{src => public}/favicon.ico | Bin .../angular/grouping/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 34 +++--------- .../src/app/{app.component.ts => app.ts} | 10 ++-- examples/angular/grouping/src/assets/.gitkeep | 0 examples/angular/grouping/src/main.ts | 4 +- .../grouping/src/{styles.scss => styles.css} | 0 examples/angular/grouping/tsconfig.app.json | 11 ++-- examples/angular/grouping/tsconfig.json | 13 ++--- examples/angular/grouping/tsconfig.spec.json | 9 ---- 17 files changed, 95 insertions(+), 122 deletions(-) delete mode 100644 examples/angular/grouping/.devcontainer/devcontainer.json delete mode 100644 examples/angular/grouping/.editorconfig rename examples/angular/grouping/{src => public}/favicon.ico (100%) rename examples/angular/grouping/src/app/{app.component.html => app.html} (81%) rename examples/angular/grouping/src/app/{app.component.ts => app.ts} (83%) delete mode 100644 examples/angular/grouping/src/assets/.gitkeep rename examples/angular/grouping/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/grouping/tsconfig.spec.json diff --git a/examples/angular/filters/package.json b/examples/angular/filters/package.json index c7cf710217..d0e2143191 100644 --- a/examples/angular/filters/package.json +++ b/examples/angular/filters/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-expanding", + "name": "tanstack-table-example-angular-filters", "version": "0.0.0", "scripts": { "ng": "ng", diff --git a/examples/angular/grouping/.devcontainer/devcontainer.json b/examples/angular/grouping/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/grouping/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/grouping/.editorconfig b/examples/angular/grouping/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/grouping/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/grouping/.gitignore b/examples/angular/grouping/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/grouping/.gitignore +++ b/examples/angular/grouping/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/grouping/README.md b/examples/angular/grouping/README.md index 8f0c2d4c12..b68f9301ee 100644 --- a/examples/angular/grouping/README.md +++ b/examples/angular/grouping/README.md @@ -1,27 +1,59 @@ # Grouping -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/grouping/angular.json b/examples/angular/grouping/angular.json index 42e83b5e2c..d12da8df78 100644 --- a/examples/angular/grouping/angular.json +++ b/examples/angular/grouping/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "grouping": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/grouping", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "grouping:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/grouping/package.json b/examples/angular/grouping/package.json index e32b594436..bdf39dc181 100644 --- a/examples/angular/grouping/package.json +++ b/examples/angular/grouping/package.json @@ -6,27 +6,26 @@ "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", - "test": "ng test", "lint": "eslint ./src" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", + "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/grouping/src/favicon.ico b/examples/angular/grouping/public/favicon.ico similarity index 100% rename from examples/angular/grouping/src/favicon.ico rename to examples/angular/grouping/public/favicon.ico diff --git a/examples/angular/grouping/src/app/app.config.ts b/examples/angular/grouping/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/grouping/src/app/app.config.ts +++ b/examples/angular/grouping/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/grouping/src/app/app.component.html b/examples/angular/grouping/src/app/app.html similarity index 81% rename from examples/angular/grouping/src/app/app.component.html rename to examples/angular/grouping/src/app/app.html index c80bd252a1..f66e3c78f8 100644 --- a/examples/angular/grouping/src/app/app.component.html +++ b/examples/angular/grouping/src/app/app.html @@ -12,10 +12,7 @@
@if (header.column.getCanGroup()) { - } - + {{ header }}
@@ -63,11 +54,7 @@ {{ row.getIsExpanded() ? '👇 ' : '👉' }} {{ cell }} @@ -77,8 +64,7 @@ } @else if (cell.getIsPlaceholder()) { - } @else { {{ cell }} @@ -154,10 +135,7 @@ /> - @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) { } diff --git a/examples/angular/grouping/src/app/app.component.ts b/examples/angular/grouping/src/app/app.ts similarity index 83% rename from examples/angular/grouping/src/app/app.component.ts rename to examples/angular/grouping/src/app/app.ts index 6adfbfc3d1..26541ca371 100644 --- a/examples/angular/grouping/src/app/app.component.ts +++ b/examples/angular/grouping/src/app/app.ts @@ -1,11 +1,10 @@ -import { CommonModule } from '@angular/common' import { ChangeDetectionStrategy, Component, computed, signal, } from '@angular/core' -import { FlexRenderDirective, isFunction } from '@tanstack/angular-table' +import { FlexRender, isFunction } from '@tanstack/angular-table' import { columns, injectTable } from './columns' import { makeData } from './makeData' import type { GroupingState, Updater } from '@tanstack/angular-table' @@ -13,12 +12,11 @@ import type { GroupingState, Updater } from '@tanstack/angular-table' @Component({ selector: 'app-root', standalone: true, - imports: [FlexRenderDirective, CommonModule], - templateUrl: './app.component.html', + imports: [FlexRender], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { - title = 'grouping' +export class App { readonly data = signal(makeData(10000)) readonly grouping = signal([]) diff --git a/examples/angular/grouping/src/assets/.gitkeep b/examples/angular/grouping/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/grouping/src/main.ts b/examples/angular/grouping/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/grouping/src/main.ts +++ b/examples/angular/grouping/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/grouping/src/styles.scss b/examples/angular/grouping/src/styles.css similarity index 100% rename from examples/angular/grouping/src/styles.scss rename to examples/angular/grouping/src/styles.css diff --git a/examples/angular/grouping/tsconfig.app.json b/examples/angular/grouping/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/grouping/tsconfig.app.json +++ b/examples/angular/grouping/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/grouping/tsconfig.json b/examples/angular/grouping/tsconfig.json index 82c63d482a..593e98476d 100644 --- a/examples/angular/grouping/tsconfig.json +++ b/examples/angular/grouping/tsconfig.json @@ -1,24 +1,19 @@ +/* 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", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/grouping/tsconfig.spec.json b/examples/angular/grouping/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/grouping/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 1929f853c64071dfb7fce0ddf06e0b69e0da7a1e Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:23:22 +0100 Subject: [PATCH 12/28] chore(angular): cleanup and migrate remote-data example with new angular coding style guide --- .../remote-data/.devcontainer/devcontainer.json | 4 ---- examples/angular/remote-data/.editorconfig | 16 ---------------- examples/angular/remote-data/angular.json | 2 +- examples/angular/remote-data/package.json | 4 +--- .../src/app/{app.component.html => app.html} | 0 .../src/app/{app.component.ts => app.ts} | 4 ++-- examples/angular/remote-data/src/assets/.gitkeep | 0 examples/angular/remote-data/src/main.server.ts | 4 ++-- examples/angular/remote-data/src/main.ts | 4 ++-- examples/angular/remote-data/tsconfig.spec.json | 9 --------- 10 files changed, 8 insertions(+), 39 deletions(-) delete mode 100644 examples/angular/remote-data/.devcontainer/devcontainer.json delete mode 100644 examples/angular/remote-data/.editorconfig rename examples/angular/remote-data/src/app/{app.component.html => app.html} (100%) rename examples/angular/remote-data/src/app/{app.component.ts => app.ts} (98%) delete mode 100644 examples/angular/remote-data/src/assets/.gitkeep delete mode 100644 examples/angular/remote-data/tsconfig.spec.json diff --git a/examples/angular/remote-data/.devcontainer/devcontainer.json b/examples/angular/remote-data/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/remote-data/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/remote-data/.editorconfig b/examples/angular/remote-data/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/remote-data/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/remote-data/angular.json b/examples/angular/remote-data/angular.json index 19698544c7..0f7ed50634 100644 --- a/examples/angular/remote-data/angular.json +++ b/examples/angular/remote-data/angular.json @@ -25,7 +25,7 @@ "outputPath": "dist/remote-data", "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], + "polyfills": [], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets"], diff --git a/examples/angular/remote-data/package.json b/examples/angular/remote-data/package.json index bdcc8abaa4..fbc2b80049 100644 --- a/examples/angular/remote-data/package.json +++ b/examples/angular/remote-data/package.json @@ -12,7 +12,6 @@ }, "private": true, "dependencies": { - "@angular/animations": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", @@ -24,8 +23,7 @@ "@angular/ssr": "^21.1.0", "@tanstack/angular-table": "^9.0.0-alpha.10", "express": "^5.2.1", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.2" }, "devDependencies": { "@angular-devkit/build-angular": "^21.1.0", diff --git a/examples/angular/remote-data/src/app/app.component.html b/examples/angular/remote-data/src/app/app.html similarity index 100% rename from examples/angular/remote-data/src/app/app.component.html rename to examples/angular/remote-data/src/app/app.html diff --git a/examples/angular/remote-data/src/app/app.component.ts b/examples/angular/remote-data/src/app/app.ts similarity index 98% rename from examples/angular/remote-data/src/app/app.component.ts rename to examples/angular/remote-data/src/app/app.ts index 0ebdf5aa9c..13b01e1456 100644 --- a/examples/angular/remote-data/src/app/app.component.ts +++ b/examples/angular/remote-data/src/app/app.ts @@ -45,10 +45,10 @@ type TodoResponse = { items: Array; totalCount: number } @Component({ selector: 'app-root', imports: [FlexRender, ReactiveFormsModule], - templateUrl: './app.component.html', + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly client = inject(HttpClient) readonly pagination = signal({ pageSize: 10, diff --git a/examples/angular/remote-data/src/assets/.gitkeep b/examples/angular/remote-data/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/remote-data/src/main.server.ts b/examples/angular/remote-data/src/main.server.ts index 7375235154..bd72130039 100644 --- a/examples/angular/remote-data/src/main.server.ts +++ b/examples/angular/remote-data/src/main.server.ts @@ -1,9 +1,9 @@ import { bootstrapApplication } from '@angular/platform-browser' import { config } from './app/app.config.server' -import { AppComponent } from './app/app.component' +import { App } from './app/app' import type { BootstrapContext } from '@angular/platform-browser' const bootstrap = (context: BootstrapContext) => - bootstrapApplication(AppComponent, config, context) + bootstrapApplication(App, config, context) export default bootstrap diff --git a/examples/angular/remote-data/src/main.ts b/examples/angular/remote-data/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/remote-data/src/main.ts +++ b/examples/angular/remote-data/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/remote-data/tsconfig.spec.json b/examples/angular/remote-data/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/remote-data/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 5af539ab7aa8547ed6891ff88a6563a5dbad4d98 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:26:22 +0100 Subject: [PATCH 13/28] chore(angular): cleanup and migrate row-dnd example with new angular coding style guide --- .../row-dnd/.devcontainer/devcontainer.json | 4 - examples/angular/row-dnd/.editorconfig | 16 --- examples/angular/row-dnd/.gitignore | 4 +- examples/angular/row-dnd/README.md | 52 ++++++++-- examples/angular/row-dnd/angular.json | 94 ++++++++++-------- examples/angular/row-dnd/package.json | 23 ++--- .../row-dnd/{src => public}/favicon.ico | Bin .../angular/row-dnd/src/app/app.config.ts | 5 +- .../src/app/{app.component.css => app.css} | 0 .../src/app/{app.component.html => app.html} | 22 +--- .../src/app/{app.component.ts => app.ts} | 12 +-- .../drag-handle-cell.ts | 13 +-- examples/angular/row-dnd/src/assets/.gitkeep | 0 examples/angular/row-dnd/src/main.ts | 4 +- .../row-dnd/src/{styles.scss => styles.css} | 0 examples/angular/row-dnd/tsconfig.app.json | 11 +- examples/angular/row-dnd/tsconfig.json | 15 +-- examples/angular/row-dnd/tsconfig.spec.json | 9 -- 18 files changed, 135 insertions(+), 149 deletions(-) delete mode 100644 examples/angular/row-dnd/.devcontainer/devcontainer.json delete mode 100644 examples/angular/row-dnd/.editorconfig rename examples/angular/row-dnd/{src => public}/favicon.ico (100%) rename examples/angular/row-dnd/src/app/{app.component.css => app.css} (100%) rename examples/angular/row-dnd/src/app/{app.component.html => app.html} (62%) rename examples/angular/row-dnd/src/app/{app.component.ts => app.ts} (89%) rename examples/angular/row-dnd/src/app/{ => drag-handle-cell}/drag-handle-cell.ts (54%) delete mode 100644 examples/angular/row-dnd/src/assets/.gitkeep rename examples/angular/row-dnd/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/row-dnd/tsconfig.spec.json diff --git a/examples/angular/row-dnd/.devcontainer/devcontainer.json b/examples/angular/row-dnd/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/row-dnd/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/row-dnd/.editorconfig b/examples/angular/row-dnd/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/row-dnd/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/row-dnd/.gitignore b/examples/angular/row-dnd/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/row-dnd/.gitignore +++ b/examples/angular/row-dnd/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/row-dnd/README.md b/examples/angular/row-dnd/README.md index 8494f725e3..12c5edf377 100644 --- a/examples/angular/row-dnd/README.md +++ b/examples/angular/row-dnd/README.md @@ -1,27 +1,59 @@ -# Row Dnd +# Row Drag and Drop -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/row-dnd/angular.json b/examples/angular/row-dnd/angular.json index 0a6c896860..346ef51c96 100644 --- a/examples/angular/row-dnd/angular.json +++ b/examples/angular/row-dnd/angular.json @@ -1,18 +1,43 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { - "editable": { - "cli": { - "cache": { - "enabled": false - } - }, + "row-dnd": { "projectType": "application", "schematics": { "@schematics/angular:component": { - "style": "scss" + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true } }, "root": "", @@ -20,21 +45,32 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:application", + "builder": "@angular/build:application", "options": { - "outputPath": "dist/editable", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { - "budgets": [], + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], "outputHashing": "all" }, "development": { @@ -46,38 +82,18 @@ "defaultConfiguration": "production" }, "serve": { - "builder": "@angular-devkit/build-angular:dev-server", + "builder": "@angular/build:dev-server", "configurations": { "production": { - "buildTarget": "editable:build:production" + "buildTarget": "row-dnd:build:production" }, "development": { - "buildTarget": "editable:build:development" + "buildTarget": "row-dnd:build:development" } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "editable:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "polyfills": ["zone.js", "zone.js/testing"], - "tsConfig": "tsconfig.spec.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/row-dnd/package.json b/examples/angular/row-dnd/package.json index 3b4d639e04..273aa212d3 100644 --- a/examples/angular/row-dnd/package.json +++ b/examples/angular/row-dnd/package.json @@ -1,41 +1,32 @@ { - "name": "tanstack-table-example-angular-row-dnd", + "name": "tanstack-table-example-angular-grouping", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", - "test": "ng test" + "lint": "eslint ./src" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { - "@angular/animations": "^21.1.0", "@angular/cdk": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^21.1.0", + "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "@types/jasmine": "~5.1.15", - "jasmine-core": "~5.13.0", - "karma": "~6.4.4", - "karma-chrome-launcher": "~3.2.0", - "karma-coverage": "~2.2.1", - "karma-jasmine": "~5.1.0", - "karma-jasmine-html-reporter": "~2.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/row-dnd/src/favicon.ico b/examples/angular/row-dnd/public/favicon.ico similarity index 100% rename from examples/angular/row-dnd/src/favicon.ico rename to examples/angular/row-dnd/public/favicon.ico diff --git a/examples/angular/row-dnd/src/app/app.config.ts b/examples/angular/row-dnd/src/app/app.config.ts index f27099f33c..cbb47d366c 100644 --- a/examples/angular/row-dnd/src/app/app.config.ts +++ b/examples/angular/row-dnd/src/app/app.config.ts @@ -1,5 +1,6 @@ -import { ApplicationConfig } from '@angular/core' +import { provideBrowserGlobalErrorListeners } from '@angular/core' +import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/row-dnd/src/app/app.component.css b/examples/angular/row-dnd/src/app/app.css similarity index 100% rename from examples/angular/row-dnd/src/app/app.component.css rename to examples/angular/row-dnd/src/app/app.css diff --git a/examples/angular/row-dnd/src/app/app.component.html b/examples/angular/row-dnd/src/app/app.html similarity index 62% rename from examples/angular/row-dnd/src/app/app.component.html rename to examples/angular/row-dnd/src/app/app.html index b680eaf212..96736e5dac 100644 --- a/examples/angular/row-dnd/src/app/app.component.html +++ b/examples/angular/row-dnd/src/app/app.html @@ -6,13 +6,7 @@ @for (header of headerGroup.headers; track header.id) { @if (!header.isPlaceholder) { @@ -28,20 +22,10 @@ (cdkDropListDropped)="drop($event)" > @for (row of table.getRowModel().rows; track row.id) { - + @for (cell of row.getVisibleCells(); track cell.id) { diff --git a/examples/angular/row-dnd/src/app/app.component.ts b/examples/angular/row-dnd/src/app/app.ts similarity index 89% rename from examples/angular/row-dnd/src/app/app.component.ts rename to examples/angular/row-dnd/src/app/app.ts index 69ef4f9fa8..423c39790d 100644 --- a/examples/angular/row-dnd/src/app/app.component.ts +++ b/examples/angular/row-dnd/src/app/app.ts @@ -5,7 +5,7 @@ import { signal, } from '@angular/core' import { - FlexRenderDirective, + FlexRender, columnSizingFeature, columnVisibilityFeature, flexRenderComponent, @@ -15,7 +15,7 @@ import { } from '@tanstack/angular-table' import { CdkDrag, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop' import { JsonPipe } from '@angular/common' -import { DragHandleCell } from './drag-handle-cell' +import { DragHandleCell } from './drag-handle-cell/drag-handle-cell' import { makeData } from './makeData' import type { Person } from './makeData' import type { CdkDragDrop } from '@angular/cdk/drag-drop' @@ -64,12 +64,12 @@ const defaultColumns: Array> = [ @Component({ selector: 'app-root', - imports: [FlexRenderDirective, CdkDropList, CdkDrag, JsonPipe], - templateUrl: './app.component.html', - styleUrl: './app.component.css', + imports: [FlexRender, CdkDropList, CdkDrag, JsonPipe], + templateUrl: './app.html', + styleUrl: './app.css', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(makeData(20)) readonly table = injectTable(() => { diff --git a/examples/angular/row-dnd/src/app/drag-handle-cell.ts b/examples/angular/row-dnd/src/app/drag-handle-cell/drag-handle-cell.ts similarity index 54% rename from examples/angular/row-dnd/src/app/drag-handle-cell.ts rename to examples/angular/row-dnd/src/app/drag-handle-cell/drag-handle-cell.ts index caadf4167a..3ce976bcad 100644 --- a/examples/angular/row-dnd/src/app/drag-handle-cell.ts +++ b/examples/angular/row-dnd/src/app/drag-handle-cell/drag-handle-cell.ts @@ -1,17 +1,8 @@ -import { - ChangeDetectionStrategy, - Component, - effect, - input, - output, - signal, - untracked, -} from '@angular/core' -import { FormsModule } from '@angular/forms' +import { ChangeDetectionStrategy, Component } from '@angular/core' import { CdkDragHandle } from '@angular/cdk/drag-drop' @Component({ - selector: 'editable-cell', + selector: 'drag-handle-cell', template: ` `, imports: [CdkDragHandle], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/examples/angular/row-dnd/src/assets/.gitkeep b/examples/angular/row-dnd/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/row-dnd/src/main.ts b/examples/angular/row-dnd/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/row-dnd/src/main.ts +++ b/examples/angular/row-dnd/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/row-dnd/src/styles.scss b/examples/angular/row-dnd/src/styles.css similarity index 100% rename from examples/angular/row-dnd/src/styles.scss rename to examples/angular/row-dnd/src/styles.css diff --git a/examples/angular/row-dnd/tsconfig.app.json b/examples/angular/row-dnd/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/row-dnd/tsconfig.app.json +++ b/examples/angular/row-dnd/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/row-dnd/tsconfig.json b/examples/angular/row-dnd/tsconfig.json index eb0dd3b6d5..593e98476d 100644 --- a/examples/angular/row-dnd/tsconfig.json +++ b/examples/angular/row-dnd/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "bundler", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/row-dnd/tsconfig.spec.json b/examples/angular/row-dnd/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/row-dnd/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From d8852c5764612f017f0c9fc4ae35c16f8c17f2e1 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:48:27 +0100 Subject: [PATCH 14/28] chore(angular): cleanup and migrate row-selection example with new angular coding style guide --- .../.devcontainer/devcontainer.json | 4 -- examples/angular/row-selection/.editorconfig | 16 ------ examples/angular/row-selection/.gitignore | 4 +- examples/angular/row-selection/README.md | 52 +++++++++++++---- examples/angular/row-selection/angular.json | 46 ++++++--------- examples/angular/row-selection/package.json | 14 ++--- .../row-selection/{src => public}/favicon.ico | Bin .../row-selection/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 31 +++------- .../src/app/{app.component.ts => app.ts} | 54 ++++++------------ .../selection-column.ts} | 27 +++------ .../table-filter.ts} | 31 +++++----- .../angular/row-selection/src/app/table.ts | 31 ++++++++++ .../angular/row-selection/src/assets/.gitkeep | 0 examples/angular/row-selection/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../angular/row-selection/tsconfig.app.json | 11 +++- examples/angular/row-selection/tsconfig.json | 14 ++--- .../angular/row-selection/tsconfig.spec.json | 9 --- 19 files changed, 167 insertions(+), 184 deletions(-) delete mode 100644 examples/angular/row-selection/.devcontainer/devcontainer.json delete mode 100644 examples/angular/row-selection/.editorconfig rename examples/angular/row-selection/{src => public}/favicon.ico (100%) rename examples/angular/row-selection/src/app/{app.component.html => app.html} (79%) rename examples/angular/row-selection/src/app/{app.component.ts => app.ts} (74%) rename examples/angular/row-selection/src/app/{selection-column.component.ts => selection-column/selection-column.ts} (61%) rename examples/angular/row-selection/src/app/{filter.ts => table-filter/table-filter.ts} (69%) create mode 100644 examples/angular/row-selection/src/app/table.ts delete mode 100644 examples/angular/row-selection/src/assets/.gitkeep rename examples/angular/row-selection/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/row-selection/tsconfig.spec.json diff --git a/examples/angular/row-selection/.devcontainer/devcontainer.json b/examples/angular/row-selection/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/row-selection/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/row-selection/.editorconfig b/examples/angular/row-selection/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/row-selection/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/row-selection/.gitignore b/examples/angular/row-selection/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/row-selection/.gitignore +++ b/examples/angular/row-selection/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/row-selection/README.md b/examples/angular/row-selection/README.md index 73a201f1eb..d8f580e1fa 100644 --- a/examples/angular/row-selection/README.md +++ b/examples/angular/row-selection/README.md @@ -1,27 +1,59 @@ -# Selection +# Row Selection -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/row-selection/angular.json b/examples/angular/row-selection/angular.json index 6d49f0e78d..c1bb1272f7 100644 --- a/examples/angular/row-selection/angular.json +++ b/examples/angular/row-selection/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "row-selection": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/row-selection", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "row-selection:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/row-selection/package.json b/examples/angular/row-selection/package.json index 7fab17d360..273aa212d3 100644 --- a/examples/angular/row-selection/package.json +++ b/examples/angular/row-selection/package.json @@ -1,32 +1,32 @@ { - "name": "tanstack-table-example-angular-row-selection", + "name": "tanstack-table-example-angular-grouping", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", - "test": "ng test", "lint": "eslint ./src" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { + "@angular/cdk": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", + "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "tslib": "^2.8.1", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/row-selection/src/favicon.ico b/examples/angular/row-selection/public/favicon.ico similarity index 100% rename from examples/angular/row-selection/src/favicon.ico rename to examples/angular/row-selection/public/favicon.ico diff --git a/examples/angular/row-selection/src/app/app.config.ts b/examples/angular/row-selection/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/row-selection/src/app/app.config.ts +++ b/examples/angular/row-selection/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/row-selection/src/app/app.component.html b/examples/angular/row-selection/src/app/app.html similarity index 79% rename from examples/angular/row-selection/src/app/app.component.html rename to examples/angular/row-selection/src/app/app.html index b2929372c8..a5fe656cd5 100644 --- a/examples/angular/row-selection/src/app/app.component.html +++ b/examples/angular/row-selection/src/app/app.html @@ -1,7 +1,7 @@
-
{{ cell }} diff --git a/examples/angular/column-ordering/src/app/app.component.ts b/examples/angular/column-ordering/src/app/app.ts similarity index 75% rename from examples/angular/column-ordering/src/app/app.component.ts rename to examples/angular/column-ordering/src/app/app.ts index 66220503fa..e55462b8be 100644 --- a/examples/angular/column-ordering/src/app/app.component.ts +++ b/examples/angular/column-ordering/src/app/app.ts @@ -5,9 +5,10 @@ import { signal, } from '@angular/core' import { - FlexRenderDirective, + FlexRender, columnOrderingFeature, columnVisibilityFeature, + createColumnHelper, injectTable, tableFeatures, } from '@tanstack/angular-table' @@ -15,75 +16,69 @@ import { faker } from '@faker-js/faker' import { makeData } from './makeData' import type { Person } from './makeData' import type { - ColumnDef, ColumnOrderState, ColumnVisibilityState, } from '@tanstack/angular-table' -const defaultColumns: Array> = [ - { +const _features = tableFeatures({ + columnVisibilityFeature, + columnOrderingFeature, +}) + +const columnHelper = createColumnHelper() + +const defaultColumns = columnHelper.columns([ + columnHelper.group({ header: 'Name', footer: (props) => props.column.id, - columns: [ - { - accessorKey: 'firstName', + columns: columnHelper.columns([ + columnHelper.accessor('firstName', { cell: (info) => info.getValue(), footer: (props) => props.column.id, - }, - { - accessorFn: (row) => row.lastName, - id: 'lastName', + }), + columnHelper.accessor('lastName', { cell: (info) => info.getValue(), header: () => 'Last Name', footer: (props) => props.column.id, - }, - ], - }, - { + }), + ]), + }), + columnHelper.group({ header: 'Info', footer: (props) => props.column.id, - columns: [ - { - accessorKey: 'age', + columns: columnHelper.columns([ + columnHelper.accessor('age', { header: () => 'Age', footer: (props) => props.column.id, - }, - { + }), + columnHelper.group({ header: 'More Info', - columns: [ - { - accessorKey: 'visits', + columns: columnHelper.columns([ + columnHelper.accessor('visits', { header: () => 'Visits', footer: (props) => props.column.id, - }, - { - accessorKey: 'status', + }), + columnHelper.accessor('status', { header: 'Status', footer: (props) => props.column.id, - }, - { - accessorKey: 'progress', + }), + columnHelper.accessor('progress', { header: 'Profile Progress', footer: (props) => props.column.id, - }, - ], - }, - ], - }, -] - -const _features = tableFeatures({ - columnVisibilityFeature, - columnOrderingFeature, -}) + }), + ]), + }), + ]), + }), +]) @Component({ selector: 'app-root', - imports: [FlexRenderDirective], - templateUrl: './app.component.html', + imports: [FlexRender], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(makeData(20)) readonly columnVisibility = signal({}) readonly columnOrder = signal([]) diff --git a/examples/angular/column-ordering/src/assets/.gitkeep b/examples/angular/column-ordering/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/column-ordering/src/main.ts b/examples/angular/column-ordering/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/column-ordering/src/main.ts +++ b/examples/angular/column-ordering/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/column-ordering/src/styles.scss b/examples/angular/column-ordering/src/styles.css similarity index 100% rename from examples/angular/column-ordering/src/styles.scss rename to examples/angular/column-ordering/src/styles.css diff --git a/examples/angular/column-ordering/tsconfig.app.json b/examples/angular/column-ordering/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/column-ordering/tsconfig.app.json +++ b/examples/angular/column-ordering/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/column-ordering/tsconfig.json b/examples/angular/column-ordering/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/column-ordering/tsconfig.json +++ b/examples/angular/column-ordering/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/column-ordering/tsconfig.spec.json b/examples/angular/column-ordering/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/column-ordering/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 3ba02f224527dd725be1cde9d5bbbd9e058f6a8b Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 11:22:29 +0100 Subject: [PATCH 04/28] chore(angular): cleanup and migrate column-pinning example with new angular coding style guide --- .../.devcontainer/devcontainer.json | 4 -- examples/angular/column-pinning/.editorconfig | 16 ------ examples/angular/column-pinning/.gitignore | 4 +- examples/angular/column-pinning/README.md | 52 ++++++++++++++---- examples/angular/column-pinning/angular.json | 46 +++++++--------- examples/angular/column-pinning/package.json | 15 ++--- .../{src => public}/favicon.ico | Bin .../column-pinning/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 0 .../src/app/{app.component.ts => app.ts} | 14 +---- .../column-pinning/src/assets/.gitkeep | 0 examples/angular/column-pinning/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../angular/column-pinning/tsconfig.app.json | 11 +++- examples/angular/column-pinning/tsconfig.json | 15 ++--- .../angular/column-pinning/tsconfig.spec.json | 9 --- 16 files changed, 89 insertions(+), 104 deletions(-) delete mode 100644 examples/angular/column-pinning/.devcontainer/devcontainer.json delete mode 100644 examples/angular/column-pinning/.editorconfig rename examples/angular/column-pinning/{src => public}/favicon.ico (100%) rename examples/angular/column-pinning/src/app/{app.component.html => app.html} (100%) rename examples/angular/column-pinning/src/app/{app.component.ts => app.ts} (94%) delete mode 100644 examples/angular/column-pinning/src/assets/.gitkeep rename examples/angular/column-pinning/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/column-pinning/tsconfig.spec.json diff --git a/examples/angular/column-pinning/.devcontainer/devcontainer.json b/examples/angular/column-pinning/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/column-pinning/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/column-pinning/.editorconfig b/examples/angular/column-pinning/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/column-pinning/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/column-pinning/.gitignore b/examples/angular/column-pinning/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/column-pinning/.gitignore +++ b/examples/angular/column-pinning/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/column-pinning/README.md b/examples/angular/column-pinning/README.md index 5da97a87d1..d6011dbf13 100644 --- a/examples/angular/column-pinning/README.md +++ b/examples/angular/column-pinning/README.md @@ -1,27 +1,59 @@ -# Basic +# Column Pinning -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/column-pinning/angular.json b/examples/angular/column-pinning/angular.json index 883af7e0b3..006f7a7b9e 100644 --- a/examples/angular/column-pinning/angular.json +++ b/examples/angular/column-pinning/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "column-pinning": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/column-pinning", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "column-pinning:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/column-pinning/package.json b/examples/angular/column-pinning/package.json index cf7f799c07..3b31a8c395 100644 --- a/examples/angular/column-pinning/package.json +++ b/examples/angular/column-pinning/package.json @@ -5,29 +5,26 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "eslint ./src" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { - "@angular/animations": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", + "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/column-pinning/src/favicon.ico b/examples/angular/column-pinning/public/favicon.ico similarity index 100% rename from examples/angular/column-pinning/src/favicon.ico rename to examples/angular/column-pinning/public/favicon.ico diff --git a/examples/angular/column-pinning/src/app/app.config.ts b/examples/angular/column-pinning/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/column-pinning/src/app/app.config.ts +++ b/examples/angular/column-pinning/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/column-pinning/src/app/app.component.html b/examples/angular/column-pinning/src/app/app.html similarity index 100% rename from examples/angular/column-pinning/src/app/app.component.html rename to examples/angular/column-pinning/src/app/app.html diff --git a/examples/angular/column-pinning/src/app/app.component.ts b/examples/angular/column-pinning/src/app/app.ts similarity index 94% rename from examples/angular/column-pinning/src/app/app.component.ts rename to examples/angular/column-pinning/src/app/app.ts index c01ed66eeb..6fc7dda305 100644 --- a/examples/angular/column-pinning/src/app/app.component.ts +++ b/examples/angular/column-pinning/src/app/app.ts @@ -15,6 +15,7 @@ import { import { faker } from '@faker-js/faker' import { NgTemplateOutlet, SlicePipe } from '@angular/common' import { makeData } from './makeData' +import type { Person } from './makeData' import type { ColumnDef, ColumnOrderState, @@ -22,15 +23,6 @@ import type { ColumnVisibilityState, } from '@tanstack/angular-table' -type Person = { - firstName: string - lastName: string - age: number - visits: number - status: string - progress: number -} - const _features = tableFeatures({ columnPinningFeature, columnOrderingFeature, @@ -92,10 +84,10 @@ const defaultColumns: Array> = [ @Component({ selector: 'app-root', imports: [FlexRenderDirective, SlicePipe, NgTemplateOutlet], - templateUrl: './app.component.html', + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(makeData(5000)) readonly columnVisibility = signal({}) readonly columnOrder = signal([]) diff --git a/examples/angular/column-pinning/src/assets/.gitkeep b/examples/angular/column-pinning/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/column-pinning/src/main.ts b/examples/angular/column-pinning/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/column-pinning/src/main.ts +++ b/examples/angular/column-pinning/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/column-pinning/src/styles.scss b/examples/angular/column-pinning/src/styles.css similarity index 100% rename from examples/angular/column-pinning/src/styles.scss rename to examples/angular/column-pinning/src/styles.css diff --git a/examples/angular/column-pinning/tsconfig.app.json b/examples/angular/column-pinning/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/column-pinning/tsconfig.app.json +++ b/examples/angular/column-pinning/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/column-pinning/tsconfig.json b/examples/angular/column-pinning/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/column-pinning/tsconfig.json +++ b/examples/angular/column-pinning/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/column-pinning/tsconfig.spec.json b/examples/angular/column-pinning/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/column-pinning/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From bfd1e41235a3471e9cd38d3dda21e04a13c2d0dd Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 11:29:54 +0100 Subject: [PATCH 05/28] chore(angular): cleanup and migrate column-pinning-sticky example with new angular coding style guide --- .../.devcontainer/devcontainer.json | 4 -- .../column-pinning-sticky/.editorconfig | 16 ----- .../angular/column-pinning-sticky/.gitignore | 4 +- .../angular/column-pinning-sticky/README.md | 52 ++++++++++++--- .../column-pinning-sticky/angular.json | 46 ++++++-------- .../column-pinning-sticky/package.json | 16 +++-- .../{src => public}/favicon.ico | Bin .../src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 4 +- .../src/app/{app.component.ts => app.ts} | 59 +++++++----------- .../column-pinning-sticky/src/assets/.gitkeep | 0 .../column-pinning-sticky/src/index.html | 2 +- .../angular/column-pinning-sticky/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../column-pinning-sticky/tsconfig.app.json | 11 +++- .../column-pinning-sticky/tsconfig.json | 15 ++--- .../column-pinning-sticky/tsconfig.spec.json | 9 --- 17 files changed, 113 insertions(+), 132 deletions(-) delete mode 100644 examples/angular/column-pinning-sticky/.devcontainer/devcontainer.json delete mode 100644 examples/angular/column-pinning-sticky/.editorconfig rename examples/angular/column-pinning-sticky/{src => public}/favicon.ico (100%) rename examples/angular/column-pinning-sticky/src/app/{app.component.html => app.html} (96%) rename examples/angular/column-pinning-sticky/src/app/{app.component.ts => app.ts} (82%) delete mode 100644 examples/angular/column-pinning-sticky/src/assets/.gitkeep rename examples/angular/column-pinning-sticky/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/column-pinning-sticky/tsconfig.spec.json diff --git a/examples/angular/column-pinning-sticky/.devcontainer/devcontainer.json b/examples/angular/column-pinning-sticky/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/column-pinning-sticky/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/column-pinning-sticky/.editorconfig b/examples/angular/column-pinning-sticky/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/column-pinning-sticky/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/column-pinning-sticky/.gitignore b/examples/angular/column-pinning-sticky/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/column-pinning-sticky/.gitignore +++ b/examples/angular/column-pinning-sticky/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/column-pinning-sticky/README.md b/examples/angular/column-pinning-sticky/README.md index 5da97a87d1..ac9222e534 100644 --- a/examples/angular/column-pinning-sticky/README.md +++ b/examples/angular/column-pinning-sticky/README.md @@ -1,27 +1,59 @@ -# Basic +# Column Pinning Sticky -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/column-pinning-sticky/angular.json b/examples/angular/column-pinning-sticky/angular.json index c28dffc22c..1afab3f56f 100644 --- a/examples/angular/column-pinning-sticky/angular.json +++ b/examples/angular/column-pinning-sticky/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "column-pinning-sticky": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/column-pinning-sticky", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "column-pinning-sticky:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/column-pinning-sticky/package.json b/examples/angular/column-pinning-sticky/package.json index 6e979f5c14..3b31a8c395 100644 --- a/examples/angular/column-pinning-sticky/package.json +++ b/examples/angular/column-pinning-sticky/package.json @@ -1,32 +1,30 @@ { - "name": "tanstack-table-example-angular-column-pinning-sticky", + "name": "tanstack-table-example-angular-column-pinning", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "eslint ./src" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", + "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/column-pinning-sticky/src/favicon.ico b/examples/angular/column-pinning-sticky/public/favicon.ico similarity index 100% rename from examples/angular/column-pinning-sticky/src/favicon.ico rename to examples/angular/column-pinning-sticky/public/favicon.ico diff --git a/examples/angular/column-pinning-sticky/src/app/app.config.ts b/examples/angular/column-pinning-sticky/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/column-pinning-sticky/src/app/app.config.ts +++ b/examples/angular/column-pinning-sticky/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/column-pinning-sticky/src/app/app.component.html b/examples/angular/column-pinning-sticky/src/app/app.html similarity index 96% rename from examples/angular/column-pinning-sticky/src/app/app.component.html rename to examples/angular/column-pinning-sticky/src/app/app.html index 141fce97c0..7b2e6eaa06 100644 --- a/examples/angular/column-pinning-sticky/src/app/app.component.html +++ b/examples/angular/column-pinning-sticky/src/app/app.html @@ -44,7 +44,7 @@
@if (!header.isPlaceholder) { @@ -114,7 +114,7 @@ @for (row of table.getRowModel().rows; track row.id) {
+ - Basic + Column Pinning Sticky diff --git a/examples/angular/column-pinning-sticky/src/main.ts b/examples/angular/column-pinning-sticky/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/column-pinning-sticky/src/main.ts +++ b/examples/angular/column-pinning-sticky/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/column-pinning-sticky/src/styles.scss b/examples/angular/column-pinning-sticky/src/styles.css similarity index 100% rename from examples/angular/column-pinning-sticky/src/styles.scss rename to examples/angular/column-pinning-sticky/src/styles.css diff --git a/examples/angular/column-pinning-sticky/tsconfig.app.json b/examples/angular/column-pinning-sticky/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/column-pinning-sticky/tsconfig.app.json +++ b/examples/angular/column-pinning-sticky/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/column-pinning-sticky/tsconfig.json b/examples/angular/column-pinning-sticky/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/column-pinning-sticky/tsconfig.json +++ b/examples/angular/column-pinning-sticky/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/column-pinning-sticky/tsconfig.spec.json b/examples/angular/column-pinning-sticky/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/column-pinning-sticky/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From b6de280727c0a510ef9139756351e4f51175f673 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 11:35:39 +0100 Subject: [PATCH 06/28] chore(angular): cleanup and migrate table-resizable-cell example with new angular coding style guide --- .../column-resizing-performant/.editorconfig | 16 --- .../column-resizing-performant/.gitignore | 4 +- .../column-resizing-performant/README.md | 52 ++++++++-- .../column-resizing-performant/angular.json | 94 ++++++++++-------- .../column-resizing-performant/package.json | 24 ++--- .../{src => public}/favicon.ico | Bin .../src/app/app.config.ts | 5 +- .../src/app/{app.component.html => app.html} | 30 ++---- .../src/app/{app.component.ts => app.ts} | 10 +- .../{ => resizable-cell}/resizable-cell.ts | 7 +- .../src/assets/.gitkeep | 0 .../column-resizing-performant/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../tsconfig.app.json | 11 +- .../column-resizing-performant/tsconfig.json | 15 +-- .../tsconfig.spec.json | 9 -- 16 files changed, 142 insertions(+), 139 deletions(-) delete mode 100644 examples/angular/column-resizing-performant/.editorconfig rename examples/angular/column-resizing-performant/{src => public}/favicon.ico (100%) rename examples/angular/column-resizing-performant/src/app/{app.component.html => app.html} (65%) rename examples/angular/column-resizing-performant/src/app/{app.component.ts => app.ts} (92%) rename examples/angular/column-resizing-performant/src/app/{ => resizable-cell}/resizable-cell.ts (81%) delete mode 100644 examples/angular/column-resizing-performant/src/assets/.gitkeep rename examples/angular/column-resizing-performant/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/column-resizing-performant/tsconfig.spec.json diff --git a/examples/angular/column-resizing-performant/.editorconfig b/examples/angular/column-resizing-performant/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/column-resizing-performant/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/column-resizing-performant/.gitignore b/examples/angular/column-resizing-performant/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/column-resizing-performant/.gitignore +++ b/examples/angular/column-resizing-performant/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/column-resizing-performant/README.md b/examples/angular/column-resizing-performant/README.md index 5da97a87d1..935ca90835 100644 --- a/examples/angular/column-resizing-performant/README.md +++ b/examples/angular/column-resizing-performant/README.md @@ -1,27 +1,59 @@ -# Basic +# Column Resizing Performant -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/column-resizing-performant/angular.json b/examples/angular/column-resizing-performant/angular.json index f74e8d69b9..1afab3f56f 100644 --- a/examples/angular/column-resizing-performant/angular.json +++ b/examples/angular/column-resizing-performant/angular.json @@ -1,18 +1,43 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { - "column-resizing-performant": { - "cli": { - "cache": { - "enabled": false - } - }, + "column-pinning-sticky": { "projectType": "application", "schematics": { "@schematics/angular:component": { - "style": "scss" + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true } }, "root": "", @@ -20,21 +45,32 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:application", + "builder": "@angular/build:application", "options": { - "outputPath": "dist/column-resizing-performant", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { - "budgets": [], + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], "outputHashing": "all" }, "development": { @@ -46,38 +82,18 @@ "defaultConfiguration": "production" }, "serve": { - "builder": "@angular-devkit/build-angular:dev-server", + "builder": "@angular/build:dev-server", "configurations": { "production": { - "buildTarget": "column-resizing-performant:build:production" + "buildTarget": "column-pinning-sticky:build:production" }, "development": { - "buildTarget": "column-resizing-performant:build:development" + "buildTarget": "column-pinning-sticky:build:development" } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "column-resizing-performant:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "polyfills": ["zone.js", "zone.js/testing"], - "tsConfig": "tsconfig.spec.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/column-resizing-performant/package.json b/examples/angular/column-resizing-performant/package.json index e3addb7e5f..3b31a8c395 100644 --- a/examples/angular/column-resizing-performant/package.json +++ b/examples/angular/column-resizing-performant/package.json @@ -1,40 +1,30 @@ { - "name": "tanstack-table-example-angular-column-resizing-performant", + "name": "tanstack-table-example-angular-column-pinning", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { - "@angular/animations": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^21.1.0", + "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "@types/jasmine": "~5.1.15", - "jasmine-core": "~5.13.0", - "karma": "~6.4.4", - "karma-chrome-launcher": "~3.2.0", - "karma-coverage": "~2.2.1", - "karma-jasmine": "~5.1.0", - "karma-jasmine-html-reporter": "~2.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/column-resizing-performant/src/favicon.ico b/examples/angular/column-resizing-performant/public/favicon.ico similarity index 100% rename from examples/angular/column-resizing-performant/src/favicon.ico rename to examples/angular/column-resizing-performant/public/favicon.ico diff --git a/examples/angular/column-resizing-performant/src/app/app.config.ts b/examples/angular/column-resizing-performant/src/app/app.config.ts index f27099f33c..cbb47d366c 100644 --- a/examples/angular/column-resizing-performant/src/app/app.config.ts +++ b/examples/angular/column-resizing-performant/src/app/app.config.ts @@ -1,5 +1,6 @@ -import { ApplicationConfig } from '@angular/core' +import { provideBrowserGlobalErrorListeners } from '@angular/core' +import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/column-resizing-performant/src/app/app.component.html b/examples/angular/column-resizing-performant/src/app/app.html similarity index 65% rename from examples/angular/column-resizing-performant/src/app/app.component.html rename to examples/angular/column-resizing-performant/src/app/app.html index 553fd7b246..bf3067cf2c 100644 --- a/examples/angular/column-resizing-performant/src/app/app.component.html +++ b/examples/angular/column-resizing-performant/src/app/app.html @@ -8,24 +8,14 @@ ({{ data().length }} rows)
-
+
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
@for (header of headerGroup.headers; track header.id) {
@if (!header.isPlaceholder) { - +
} @@ -44,21 +34,15 @@
@for (row of table.getRowModel().rows; track row.id) { -
- +
+
-
@if (!header.isPlaceholder) { - + {{ header }} } @@ -54,13 +48,7 @@
- + {{ cell }} @if (!header.isPlaceholder) { - + {{ header }} } diff --git a/examples/angular/column-visibility/src/app/app.component.ts b/examples/angular/column-visibility/src/app/app.ts similarity index 88% rename from examples/angular/column-visibility/src/app/app.component.ts rename to examples/angular/column-visibility/src/app/app.ts index 999ac11538..784d02f9de 100644 --- a/examples/angular/column-visibility/src/app/app.component.ts +++ b/examples/angular/column-visibility/src/app/app.ts @@ -5,13 +5,12 @@ import { signal, } from '@angular/core' import { - FlexRenderDirective, + FlexRender, columnVisibilityFeature, injectTable, isFunction, tableFeatures, } from '@tanstack/angular-table' -import type { OnInit } from '@angular/core' import type { ColumnDef, ColumnVisibilityState } from '@tanstack/angular-table' type Person = { @@ -108,15 +107,15 @@ const defaultColumns: Array> = [ @Component({ selector: 'app-root', - imports: [FlexRenderDirective], - templateUrl: './app.component.html', + imports: [FlexRender], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent implements OnInit { - data = signal>([]) +export class App { + readonly data = signal>(defaultData) readonly columnVisibility = signal({}) - table = injectTable(() => ({ + readonly table = injectTable(() => ({ _features, columns: defaultColumns, data: this.data(), @@ -134,15 +133,11 @@ export class AppComponent implements OnInit { debugColumns: true, })) - stringifiedColumnVisibility = computed(() => { + readonly stringifiedColumnVisibility = computed(() => { return JSON.stringify(this.table.state().columnVisibility) }) - ngOnInit() { - this.data.set(defaultData) - } - rerender() { - this.data.set(defaultData) + this.data.update((data) => [...data.reverse()]) } } diff --git a/examples/angular/column-visibility/src/assets/.gitkeep b/examples/angular/column-visibility/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/column-visibility/src/index.html b/examples/angular/column-visibility/src/index.html index a4bb987648..310b1f308d 100644 --- a/examples/angular/column-visibility/src/index.html +++ b/examples/angular/column-visibility/src/index.html @@ -2,7 +2,7 @@ - Basic + Column Visibility diff --git a/examples/angular/column-visibility/src/main.ts b/examples/angular/column-visibility/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/column-visibility/src/main.ts +++ b/examples/angular/column-visibility/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/column-visibility/src/styles.scss b/examples/angular/column-visibility/src/styles.css similarity index 100% rename from examples/angular/column-visibility/src/styles.scss rename to examples/angular/column-visibility/src/styles.css diff --git a/examples/angular/column-visibility/tsconfig.app.json b/examples/angular/column-visibility/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/column-visibility/tsconfig.app.json +++ b/examples/angular/column-visibility/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/column-visibility/tsconfig.json b/examples/angular/column-visibility/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/column-visibility/tsconfig.json +++ b/examples/angular/column-visibility/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/column-visibility/tsconfig.spec.json b/examples/angular/column-visibility/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/column-visibility/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 595a09aa97071e84ce05db7a2af3ab350b408ee3 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 11:59:22 +0100 Subject: [PATCH 08/28] chore(angular): cleanup and migrate editable-data example with new angular coding style guide --- .../column-pinning-sticky/package.json | 2 +- .../column-resizing-performant/package.json | 2 +- examples/angular/column-visibility/README.md | 2 +- .../angular/column-visibility/package.json | 2 +- .../.devcontainer/devcontainer.json | 4 - .../angular/composable-tables/.editorconfig | 16 --- examples/angular/composable-tables/.gitignore | 4 +- examples/angular/composable-tables/README.md | 52 ++++++++-- .../angular/composable-tables/angular.json | 52 ++++------ .../angular/composable-tables/package.json | 17 ++-- .../src/app/app.component.html | 11 -- .../composable-tables/src/app/app.config.ts | 5 +- .../composable-tables/src/app/app.routes.ts | 3 - .../src/app/{app.component.ts => app.ts} | 17 +++- .../src/app/components/cell-components.ts | 3 + .../composable-tables/src/assets/.gitkeep | 0 .../angular/composable-tables/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../composable-tables/tsconfig.app.json | 11 +- .../angular/composable-tables/tsconfig.json | 15 +-- .../editable/.devcontainer/devcontainer.json | 4 - examples/angular/editable/.editorconfig | 16 --- examples/angular/editable/.gitignore | 4 +- examples/angular/editable/README.md | 52 ++++++++-- examples/angular/editable/angular.json | 94 ++++++++++-------- examples/angular/editable/package.json | 22 ++-- .../src => editable/public}/favicon.ico | Bin .../angular/editable/src/app/app.config.ts | 5 +- .../src/app/{app.component.html => app.html} | 28 +----- .../src/app/{app.component.ts => app.ts} | 14 +-- .../angular/editable/src/app/editable-cell.ts | 29 ------ .../src/app/editable-cell/editable-cell.ts | 19 ++++ examples/angular/editable/src/assets/.gitkeep | 0 examples/angular/editable/src/favicon.ico | Bin 15086 -> 0 bytes examples/angular/editable/src/main.ts | 4 +- .../editable/src/{styles.scss => styles.css} | 0 examples/angular/editable/tsconfig.app.json | 11 +- examples/angular/editable/tsconfig.json | 15 +-- examples/angular/editable/tsconfig.spec.json | 9 -- 39 files changed, 265 insertions(+), 283 deletions(-) delete mode 100644 examples/angular/composable-tables/.devcontainer/devcontainer.json delete mode 100644 examples/angular/composable-tables/.editorconfig delete mode 100644 examples/angular/composable-tables/src/app/app.component.html delete mode 100644 examples/angular/composable-tables/src/app/app.routes.ts rename examples/angular/composable-tables/src/app/{app.component.ts => app.ts} (50%) delete mode 100644 examples/angular/composable-tables/src/assets/.gitkeep rename examples/angular/composable-tables/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/editable/.devcontainer/devcontainer.json delete mode 100644 examples/angular/editable/.editorconfig rename examples/angular/{composable-tables/src => editable/public}/favicon.ico (100%) rename examples/angular/editable/src/app/{app.component.html => app.html} (72%) rename examples/angular/editable/src/app/{app.component.ts => app.ts} (92%) delete mode 100644 examples/angular/editable/src/app/editable-cell.ts create mode 100644 examples/angular/editable/src/app/editable-cell/editable-cell.ts delete mode 100644 examples/angular/editable/src/assets/.gitkeep delete mode 100644 examples/angular/editable/src/favicon.ico rename examples/angular/editable/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/editable/tsconfig.spec.json diff --git a/examples/angular/column-pinning-sticky/package.json b/examples/angular/column-pinning-sticky/package.json index 3b31a8c395..f8cb65a53e 100644 --- a/examples/angular/column-pinning-sticky/package.json +++ b/examples/angular/column-pinning-sticky/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-column-pinning", + "name": "tanstack-table-example-angular-column-pinning-sticky", "version": "0.0.0", "scripts": { "ng": "ng", diff --git a/examples/angular/column-resizing-performant/package.json b/examples/angular/column-resizing-performant/package.json index 3b31a8c395..677b5452f4 100644 --- a/examples/angular/column-resizing-performant/package.json +++ b/examples/angular/column-resizing-performant/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-column-pinning", + "name": "tanstack-table-example-angular-column-resizing-performant", "version": "0.0.0", "scripts": { "ng": "ng", diff --git a/examples/angular/column-visibility/README.md b/examples/angular/column-visibility/README.md index 935ca90835..ce3f144d0b 100644 --- a/examples/angular/column-visibility/README.md +++ b/examples/angular/column-visibility/README.md @@ -1,4 +1,4 @@ -# Column Resizing Performant +# Column Visibility This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. diff --git a/examples/angular/column-visibility/package.json b/examples/angular/column-visibility/package.json index 3b31a8c395..8b9d473ae5 100644 --- a/examples/angular/column-visibility/package.json +++ b/examples/angular/column-visibility/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-column-pinning", + "name": "tanstack-table-example-angular-column-visibility", "version": "0.0.0", "scripts": { "ng": "ng", diff --git a/examples/angular/composable-tables/.devcontainer/devcontainer.json b/examples/angular/composable-tables/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/composable-tables/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/composable-tables/.editorconfig b/examples/angular/composable-tables/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/composable-tables/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/composable-tables/.gitignore b/examples/angular/composable-tables/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/composable-tables/.gitignore +++ b/examples/angular/composable-tables/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/composable-tables/README.md b/examples/angular/composable-tables/README.md index 5da97a87d1..5f48d0ac42 100644 --- a/examples/angular/composable-tables/README.md +++ b/examples/angular/composable-tables/README.md @@ -1,27 +1,59 @@ -# Basic +# Composable Tables -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/composable-tables/angular.json b/examples/angular/composable-tables/angular.json index 7d88b1324b..0ac9fcc7cc 100644 --- a/examples/angular/composable-tables/angular.json +++ b/examples/angular/composable-tables/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { - "composable": { - "cli": { - "cache": { - "enabled": false - } - }, + "composable-tables": { "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/composable", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -84,24 +85,15 @@ "builder": "@angular/build:dev-server", "configurations": { "production": { - "buildTarget": "composable:build:production" + "buildTarget": "composable-tables:build:production" }, "development": { - "buildTarget": "composable:build:development" + "buildTarget": "composable-tables:build:development" } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "composable:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/composable-tables/package.json b/examples/angular/composable-tables/package.json index 30d8c0c086..1cb23470cb 100644 --- a/examples/angular/composable-tables/package.json +++ b/examples/angular/composable-tables/package.json @@ -5,30 +5,27 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test", - "lint": "eslint ./src" + "lint": "eslint ./src", + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", "@angular/router": "^21.1.0", + "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "@types/jasmine": "~5.1.15", - "jasmine-core": "~5.13.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/composable-tables/src/app/app.component.html b/examples/angular/composable-tables/src/app/app.component.html deleted file mode 100644 index a55e45ad8b..0000000000 --- a/examples/angular/composable-tables/src/app/app.component.html +++ /dev/null @@ -1,11 +0,0 @@ -

Composable Tables Example

-

- Both tables below use the same injectAppTable function and - shareable components, but with different data types and column configurations. -

- - - -
- - diff --git a/examples/angular/composable-tables/src/app/app.config.ts b/examples/angular/composable-tables/src/app/app.config.ts index 828af23571..cbb47d366c 100644 --- a/examples/angular/composable-tables/src/app/app.config.ts +++ b/examples/angular/composable-tables/src/app/app.config.ts @@ -1,7 +1,6 @@ -import { provideRouter } from '@angular/router' -import { routes } from './app.routes' +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes)], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/composable-tables/src/app/app.routes.ts b/examples/angular/composable-tables/src/app/app.routes.ts deleted file mode 100644 index 9a884b1131..0000000000 --- a/examples/angular/composable-tables/src/app/app.routes.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { Routes } from '@angular/router' - -export const routes: Routes = [] diff --git a/examples/angular/composable-tables/src/app/app.component.ts b/examples/angular/composable-tables/src/app/app.ts similarity index 50% rename from examples/angular/composable-tables/src/app/app.component.ts rename to examples/angular/composable-tables/src/app/app.ts index a4ac466576..02e8765d9c 100644 --- a/examples/angular/composable-tables/src/app/app.component.ts +++ b/examples/angular/composable-tables/src/app/app.ts @@ -8,7 +8,20 @@ import { ProductsTable } from './components/products-table/products-table' host: { class: 'app', }, - templateUrl: './app.component.html', + template: ` +

Composable Tables Example

+

+ Both tables below use the same injectAppTable function and + shareable components, but with different data types and column + configurations. +

+ + + +
+ + + `, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent {} +export class App {} diff --git a/examples/angular/composable-tables/src/app/components/cell-components.ts b/examples/angular/composable-tables/src/app/components/cell-components.ts index cf539bda14..3cca4ec1d2 100644 --- a/examples/angular/composable-tables/src/app/components/cell-components.ts +++ b/examples/angular/composable-tables/src/app/components/cell-components.ts @@ -6,6 +6,9 @@ import type { CellContext, TableFeatures } from '@tanstack/angular-table' import type { Person } from '../makeData' @Component({ + // Using dynamic components with Angular, we can just put a simple selector + // that will be rendered, but we need to specify an unique host property + // that will identify this component selector: 'span', host: { 'tanstack-table-text-cell': '', diff --git a/examples/angular/composable-tables/src/assets/.gitkeep b/examples/angular/composable-tables/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/composable-tables/src/main.ts b/examples/angular/composable-tables/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/composable-tables/src/main.ts +++ b/examples/angular/composable-tables/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/composable-tables/src/styles.scss b/examples/angular/composable-tables/src/styles.css similarity index 100% rename from examples/angular/composable-tables/src/styles.scss rename to examples/angular/composable-tables/src/styles.css diff --git a/examples/angular/composable-tables/tsconfig.app.json b/examples/angular/composable-tables/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/composable-tables/tsconfig.app.json +++ b/examples/angular/composable-tables/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/composable-tables/tsconfig.json b/examples/angular/composable-tables/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/composable-tables/tsconfig.json +++ b/examples/angular/composable-tables/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/editable/.devcontainer/devcontainer.json b/examples/angular/editable/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/editable/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/editable/.editorconfig b/examples/angular/editable/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/editable/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/editable/.gitignore b/examples/angular/editable/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/editable/.gitignore +++ b/examples/angular/editable/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/editable/README.md b/examples/angular/editable/README.md index 5da97a87d1..6235b17f36 100644 --- a/examples/angular/editable/README.md +++ b/examples/angular/editable/README.md @@ -1,27 +1,59 @@ -# Basic +# Editable Data -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/editable/angular.json b/examples/angular/editable/angular.json index 0a6c896860..13d3dd0545 100644 --- a/examples/angular/editable/angular.json +++ b/examples/angular/editable/angular.json @@ -1,18 +1,43 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { - "editable": { - "cli": { - "cache": { - "enabled": false - } - }, + "editable-data": { "projectType": "application", "schematics": { "@schematics/angular:component": { - "style": "scss" + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true } }, "root": "", @@ -20,21 +45,32 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:application", + "builder": "@angular/build:application", "options": { - "outputPath": "dist/editable", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { - "budgets": [], + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], "outputHashing": "all" }, "development": { @@ -46,38 +82,18 @@ "defaultConfiguration": "production" }, "serve": { - "builder": "@angular-devkit/build-angular:dev-server", + "builder": "@angular/build:dev-server", "configurations": { "production": { - "buildTarget": "editable:build:production" + "buildTarget": "editable-data:build:production" }, "development": { - "buildTarget": "editable:build:development" + "buildTarget": "editable-data:build:development" } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "editable:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "polyfills": ["zone.js", "zone.js/testing"], - "tsConfig": "tsconfig.spec.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/editable/package.json b/examples/angular/editable/package.json index 31b81334cb..521057e11a 100644 --- a/examples/angular/editable/package.json +++ b/examples/angular/editable/package.json @@ -5,36 +5,26 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development", - "test": "ng test" + "watch": "ng build --watch --configuration development" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { - "@angular/animations": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^21.1.0", + "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "@types/jasmine": "~5.1.15", - "jasmine-core": "~5.13.0", - "karma": "~6.4.4", - "karma-chrome-launcher": "~3.2.0", - "karma-coverage": "~2.2.1", - "karma-jasmine": "~5.1.0", - "karma-jasmine-html-reporter": "~2.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/composable-tables/src/favicon.ico b/examples/angular/editable/public/favicon.ico similarity index 100% rename from examples/angular/composable-tables/src/favicon.ico rename to examples/angular/editable/public/favicon.ico diff --git a/examples/angular/editable/src/app/app.config.ts b/examples/angular/editable/src/app/app.config.ts index f27099f33c..cbb47d366c 100644 --- a/examples/angular/editable/src/app/app.config.ts +++ b/examples/angular/editable/src/app/app.config.ts @@ -1,5 +1,6 @@ -import { ApplicationConfig } from '@angular/core' +import { provideBrowserGlobalErrorListeners } from '@angular/core' +import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/editable/src/app/app.component.html b/examples/angular/editable/src/app/app.html similarity index 72% rename from examples/angular/editable/src/app/app.component.html rename to examples/angular/editable/src/app/app.html index d8cff86033..335b95f6a1 100644 --- a/examples/angular/editable/src/app/app.component.html +++ b/examples/angular/editable/src/app/app.html @@ -6,13 +6,7 @@ @for (header of headerGroup.headers; track header.id) { @if (!header.isPlaceholder) { 		- +
- +
- + {{ footer }} @if (!header.isPlaceholder) {
- + {{ headerCell }} @@ -33,10 +26,7 @@ @if (header.column.getCanFilter()) {
- +
} } @@ -50,13 +40,7 @@
- + {{ renderCell }} - +
- +
+
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) { @@ -14,11 +14,7 @@ @if (header.column.getCanFilter()) {
- - +
} } @@ -50,9 +46,7 @@ (change)="table.toggleAllPageRowsSelected()" /> - +
- Page Rows ({{ table.getRowModel().rows.length }}) - Page Rows ({{ table.getRowModel().rows.length }})
@@ -90,7 +84,7 @@
Page
- {{ table.store.state.pagination.pageIndex + 1 }} of + {{ paginationState().pageIndex + 1 }} of {{ table.getPageCount() }} @@ -98,16 +92,13 @@ | Go to page: - @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) { } @@ -115,15 +106,12 @@
- {{ rowSelectionLength() }} of - {{ table.getPreFilteredRowModel().rows.length }} Total Rows + {{ rowSelectionLength() }} of {{ table.getPreFilteredRowModel().rows.length }} Total Rows

- +
- - Age 🥳 - diff --git a/examples/angular/row-selection/src/app/app.component.ts b/examples/angular/row-selection/src/app/app.ts similarity index 74% rename from examples/angular/row-selection/src/app/app.component.ts rename to examples/angular/row-selection/src/app/app.ts index 78daf36173..756ab56f20 100644 --- a/examples/angular/row-selection/src/app/app.component.ts +++ b/examples/angular/row-selection/src/app/app.ts @@ -3,65 +3,41 @@ import { Component, computed, signal, - viewChild, } from '@angular/core' import { FlexRender, - columnFilteringFeature, - createFilteredRowModel, - createPaginatedRowModel, - createTableHook, - filterFns, + TanStackTable, flexRenderComponent, - rowPaginationFeature, - rowSelectionFeature, } from '@tanstack/angular-table' -import { FormsModule } from '@angular/forms' -import { FilterComponent } from './filter' +import { TableFilter } from './table-filter/table-filter' import { makeData } from './makeData' import { - TableHeadSelectionComponent, - TableRowSelectionComponent, -} from './selection-column.component' -import type { TemplateRef } from '@angular/core' + TableHeaderSelection, + TableRowSelection, +} from './selection-column/selection-column' +import { createAppColumnHelper, injectTable } from './table' import type { Person } from './makeData' import type { RowSelectionState } from '@tanstack/angular-table' -const { injectAppTable: injectTable, createAppColumnHelper } = createTableHook({ - _features: { - columnFilteringFeature, - rowPaginationFeature, - rowSelectionFeature, - }, - _rowModels: { - filteredRowModel: createFilteredRowModel(filterFns), - paginatedRowModel: createPaginatedRowModel(), - }, - debugTable: true, -}) - const columnHelper = createAppColumnHelper() @Component({ selector: 'app-root', standalone: true, - imports: [FilterComponent, FlexRender, FormsModule], - templateUrl: './app.component.html', + imports: [TableFilter, FlexRender, TanStackTable], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { private readonly rowSelection = signal({}) readonly globalFilter = signal('') readonly data = signal(makeData(10_000)) - readonly ageHeaderCell = - viewChild.required>('ageHeaderCell') - readonly columns = columnHelper.columns([ columnHelper.display({ id: 'select', - header: () => flexRenderComponent(TableHeadSelectionComponent), - cell: () => flexRenderComponent(TableRowSelectionComponent), + header: () => flexRenderComponent(TableHeaderSelection), + cell: () => flexRenderComponent(TableRowSelection), }), columnHelper.group({ header: 'Name', @@ -84,7 +60,7 @@ export class AppComponent { footer: (props) => props.column.id, columns: columnHelper.columns([ columnHelper.accessor('age', { - header: () => this.ageHeaderCell(), + header: () => `Age 🥳`, footer: (props) => props.column.id, }), columnHelper.group({ @@ -111,7 +87,7 @@ export class AppComponent { }), ]) - table = injectTable(() => ({ + readonly table = injectTable(() => ({ data: this.data(), columns: this.columns, state: { @@ -128,6 +104,10 @@ export class AppComponent { }, })) + readonly paginationState = this.table.Subscribe({ + selector: (state) => state.pagination, + }) + readonly stringifiedRowSelection = computed(() => JSON.stringify(this.rowSelection(), null, 2), ) diff --git a/examples/angular/row-selection/src/app/selection-column.component.ts b/examples/angular/row-selection/src/app/selection-column/selection-column.ts similarity index 61% rename from examples/angular/row-selection/src/app/selection-column.component.ts rename to examples/angular/row-selection/src/app/selection-column/selection-column.ts index d3ac18aeaa..5be2238e13 100644 --- a/examples/angular/row-selection/src/app/selection-column.component.ts +++ b/examples/angular/row-selection/src/app/selection-column/selection-column.ts @@ -1,13 +1,9 @@ -import { - injectFlexRenderContext, - injectTableCellContext, -} from '@tanstack/angular-table' +import { injectTableCellContext } from '@tanstack/angular-table' import { ChangeDetectionStrategy, Component, computed } from '@angular/core' -import type { - CellContext, - HeaderContext, - RowData, -} from '@tanstack/angular-table' +import { + injectFlexRenderCellContext, + injectFlexRenderHeaderContext, +} from '../table' @Component({ template: ` @@ -24,11 +20,8 @@ import type { standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TableHeadSelectionComponent { - context = - injectFlexRenderContext< - HeaderContext<{ rowSelectionFeature: {} }, T, unknown> - >() +export class TableHeaderSelection { + context = injectFlexRenderHeaderContext() } @Component({ @@ -45,10 +38,8 @@ export class TableHeadSelectionComponent { standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TableRowSelectionComponent { +export class TableRowSelection { readonly cell = injectTableCellContext() readonly row = computed(() => this.cell().row) - context = - // @ts-expect-error TODO: Should fix types - injectFlexRenderContext>() + readonly context = injectFlexRenderCellContext() } diff --git a/examples/angular/row-selection/src/app/filter.ts b/examples/angular/row-selection/src/app/table-filter/table-filter.ts similarity index 69% rename from examples/angular/row-selection/src/app/filter.ts rename to examples/angular/row-selection/src/app/table-filter/table-filter.ts index f8b79d3f9b..cbebfb999c 100644 --- a/examples/angular/row-selection/src/app/filter.ts +++ b/examples/angular/row-selection/src/app/table-filter/table-filter.ts @@ -1,10 +1,12 @@ -import { Component, input } from '@angular/core' -import type { OnInit } from '@angular/core' -import type { Column, Table } from '@tanstack/angular-table' +import { Component, computed, input } from '@angular/core' +import { injectTableContext } from '../table' +import type { Column } from '@tanstack/angular-table' @Component({ selector: 'app-table-filter', - template: ` @if (columnType) { + template: ` + @let columnType = this.columnType(); + @if (columnType == 'number') {
} - }`, + `, standalone: true, }) -export class FilterComponent implements OnInit { - column = input.required>() - // @ts-expect-error TODO: Should fix types - table = input.required>() - - columnType!: string +export class TableFilter { + readonly column = input.required>() + readonly table = injectTableContext() - ngOnInit() { - this.columnType = typeof this.table() + readonly columnType = computed(() => { + return typeof this.table() .getPreFilteredRowModel() .flatRows[0]?.getValue(this.column().id) - } + }) getMinValue() { - const minValue = this.column().getFilterValue() as any + const minValue = this.column().getFilterValue() return (minValue?.[0] ?? '') as string } getMaxValue() { - const maxValue = this.column().getFilterValue() as any + const maxValue = this.column().getFilterValue() return (maxValue?.[1] ?? '') as string } diff --git a/examples/angular/row-selection/src/app/table.ts b/examples/angular/row-selection/src/app/table.ts new file mode 100644 index 0000000000..3810a042ad --- /dev/null +++ b/examples/angular/row-selection/src/app/table.ts @@ -0,0 +1,31 @@ +import { + columnFilteringFeature, + createFilteredRowModel, + createPaginatedRowModel, + createTableHook, + filterFns, + rowPaginationFeature, + rowSelectionFeature, + tableFeatures, +} from '@tanstack/angular-table' + +const _features = tableFeatures({ + columnFilteringFeature, + rowPaginationFeature, + rowSelectionFeature, +}) + +export const { + injectAppTable: injectTable, + injectTableContext, + createAppColumnHelper, + injectFlexRenderCellContext, + injectFlexRenderHeaderContext, +} = createTableHook({ + _features, + _rowModels: { + filteredRowModel: createFilteredRowModel(filterFns), + paginatedRowModel: createPaginatedRowModel(), + }, + debugTable: true, +}) diff --git a/examples/angular/row-selection/src/assets/.gitkeep b/examples/angular/row-selection/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/row-selection/src/main.ts b/examples/angular/row-selection/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/row-selection/src/main.ts +++ b/examples/angular/row-selection/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/row-selection/src/styles.scss b/examples/angular/row-selection/src/styles.css similarity index 100% rename from examples/angular/row-selection/src/styles.scss rename to examples/angular/row-selection/src/styles.css diff --git a/examples/angular/row-selection/tsconfig.app.json b/examples/angular/row-selection/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/row-selection/tsconfig.app.json +++ b/examples/angular/row-selection/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/row-selection/tsconfig.json b/examples/angular/row-selection/tsconfig.json index fd2d87ac26..593e98476d 100644 --- a/examples/angular/row-selection/tsconfig.json +++ b/examples/angular/row-selection/tsconfig.json @@ -1,25 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/row-selection/tsconfig.spec.json b/examples/angular/row-selection/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/row-selection/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From af3b3ebe5991c05ff7abab4719159d2cf69571cc Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:48:45 +0100 Subject: [PATCH 15/28] fix(angular): fix createTableHook injectAppTable return types --- packages/angular-table/src/helpers/createTableHook.ts | 2 +- packages/angular-table/src/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/angular-table/src/helpers/createTableHook.ts b/packages/angular-table/src/helpers/createTableHook.ts index 03c6fddf94..09c7920094 100644 --- a/packages/angular-table/src/helpers/createTableHook.ts +++ b/packages/angular-table/src/helpers/createTableHook.ts @@ -333,7 +333,7 @@ export type CreateTableHookResult< TData extends RowData, TValue extends CellData, >() => CellContext - injectAppTable: ( + injectAppTable: >( tableOptions: () => Omit< TableOptions, '_features' | '_rowModels' diff --git a/packages/angular-table/src/index.ts b/packages/angular-table/src/index.ts index 1e799ae7c9..1bf12e89bb 100644 --- a/packages/angular-table/src/index.ts +++ b/packages/angular-table/src/index.ts @@ -3,7 +3,7 @@ import { FlexRenderDirective } from './flexRender' export * from '@tanstack/table-core' -// export * from './angularReactivityFeature' +export * from './angularReactivityFeature' export * from './flexRender' export * from './injectTable' // export * from './lazySignalInitializer' From 433087f9c38de4d153fe5ef81d290a9bb6053f5e Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:49:11 +0100 Subject: [PATCH 16/28] chore: update prettier config for angular examples --- prettier.config.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/prettier.config.js b/prettier.config.js index dbb08b1110..bb8fad68e6 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -6,7 +6,16 @@ const config = { singleQuote: true, trailingComma: 'all', plugins: ['prettier-plugin-svelte'], - overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }], + overrides: [ + { files: '*.svelte', options: { parser: 'svelte' } }, + { + files: ['examples/angular/**/*.html'], + options: { + printWidth: 100, + parser: 'angular', + }, + }, + ], } export default config From 0a4eb17b585461664c84a05c7e6c0d519c4d73ea Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 12:54:32 +0100 Subject: [PATCH 17/28] chore(angular): cleanup and migrate signal-input example with new angular coding style guide --- examples/angular/row-selection/package.json | 2 +- .../.devcontainer/devcontainer.json | 4 -- examples/angular/signal-input/.editorconfig | 16 ------ examples/angular/signal-input/.gitignore | 4 +- examples/angular/signal-input/README.md | 52 ++++++++++++++---- examples/angular/signal-input/angular.json | 46 +++++++--------- examples/angular/signal-input/package.json | 13 +++-- .../signal-input/{src => public}/favicon.ico | Bin .../signal-input/src/app/app.config.ts | 3 +- .../src/app/{app.component.html => app.html} | 0 .../src/app/{app.component.ts => app.ts} | 8 +-- ...table.component.html => person-table.html} | 0 ...son-table.component.ts => person-table.ts} | 12 ++-- .../angular/signal-input/src/assets/.gitkeep | 0 examples/angular/signal-input/src/index.html | 2 +- examples/angular/signal-input/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../angular/signal-input/tsconfig.app.json | 11 +++- examples/angular/signal-input/tsconfig.json | 13 ++--- .../angular/signal-input/tsconfig.spec.json | 9 --- 20 files changed, 101 insertions(+), 98 deletions(-) delete mode 100644 examples/angular/signal-input/.devcontainer/devcontainer.json delete mode 100644 examples/angular/signal-input/.editorconfig rename examples/angular/signal-input/{src => public}/favicon.ico (100%) rename examples/angular/signal-input/src/app/{app.component.html => app.html} (100%) rename examples/angular/signal-input/src/app/{app.component.ts => app.ts} (80%) rename examples/angular/signal-input/src/app/person-table/{person-table.component.html => person-table.html} (100%) rename examples/angular/signal-input/src/app/person-table/{person-table.component.ts => person-table.ts} (87%) delete mode 100644 examples/angular/signal-input/src/assets/.gitkeep rename examples/angular/signal-input/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/signal-input/tsconfig.spec.json diff --git a/examples/angular/row-selection/package.json b/examples/angular/row-selection/package.json index 273aa212d3..f65d2c4444 100644 --- a/examples/angular/row-selection/package.json +++ b/examples/angular/row-selection/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-grouping", + "name": "tanstack-table-example-angular-row-selection", "version": "0.0.0", "scripts": { "ng": "ng", diff --git a/examples/angular/signal-input/.devcontainer/devcontainer.json b/examples/angular/signal-input/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/signal-input/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/signal-input/.editorconfig b/examples/angular/signal-input/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/signal-input/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/signal-input/.gitignore b/examples/angular/signal-input/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/signal-input/.gitignore +++ b/examples/angular/signal-input/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/signal-input/README.md b/examples/angular/signal-input/README.md index 8f0c2d4c12..c255261608 100644 --- a/examples/angular/signal-input/README.md +++ b/examples/angular/signal-input/README.md @@ -1,27 +1,59 @@ -# Grouping +# Signal Input -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/signal-input/angular.json b/examples/angular/signal-input/angular.json index 054d010446..df64e1bd17 100644 --- a/examples/angular/signal-input/angular.json +++ b/examples/angular/signal-input/angular.json @@ -1,21 +1,22 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "signal-input": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { "inlineTemplate": true, "inlineStyle": true, - "skipTests": true, - "style": "scss" + "skipTests": true }, "@schematics/angular:class": { "skipTests": true @@ -46,28 +47,28 @@ "build": { "builder": "@angular/build:application", "options": { - "outputPath": "dist/signal-input", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "500kB", + "maximumError": "1MB" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "4kB", + "maximumError": "8kB" } ], "outputHashing": "all" @@ -91,17 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular/build:extract-i18n", - "options": { - "buildTarget": "signal-input:build" - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/signal-input/package.json b/examples/angular/signal-input/package.json index af9fa12990..6e968d5ac2 100644 --- a/examples/angular/signal-input/package.json +++ b/examples/angular/signal-input/package.json @@ -6,26 +6,27 @@ "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", - "test": "ng test", "lint": "eslint ./src" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { + "@angular/cdk": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", + "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", + "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/signal-input/src/favicon.ico b/examples/angular/signal-input/public/favicon.ico similarity index 100% rename from examples/angular/signal-input/src/favicon.ico rename to examples/angular/signal-input/public/favicon.ico diff --git a/examples/angular/signal-input/src/app/app.config.ts b/examples/angular/signal-input/src/app/app.config.ts index f997e614ac..cbb47d366c 100644 --- a/examples/angular/signal-input/src/app/app.config.ts +++ b/examples/angular/signal-input/src/app/app.config.ts @@ -1,5 +1,6 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { - providers: [], + providers: [provideBrowserGlobalErrorListeners()], } diff --git a/examples/angular/signal-input/src/app/app.component.html b/examples/angular/signal-input/src/app/app.html similarity index 100% rename from examples/angular/signal-input/src/app/app.component.html rename to examples/angular/signal-input/src/app/app.html diff --git a/examples/angular/signal-input/src/app/app.component.ts b/examples/angular/signal-input/src/app/app.ts similarity index 80% rename from examples/angular/signal-input/src/app/app.component.ts rename to examples/angular/signal-input/src/app/app.ts index 77ca8713c9..a2d28c7a29 100644 --- a/examples/angular/signal-input/src/app/app.component.ts +++ b/examples/angular/signal-input/src/app/app.ts @@ -1,15 +1,15 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core' import { makeData } from './makeData' -import { PersonTableComponent } from './person-table/person-table.component' +import { PersonTable } from './person-table/person-table' import type { PaginationState } from '@tanstack/angular-table' @Component({ selector: 'app-root', - imports: [PersonTableComponent], - templateUrl: './app.component.html', + imports: [PersonTable], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { data = signal(makeData(10000)) pagination = signal({ pageIndex: 0, diff --git a/examples/angular/signal-input/src/app/person-table/person-table.component.html b/examples/angular/signal-input/src/app/person-table/person-table.html similarity index 100% rename from examples/angular/signal-input/src/app/person-table/person-table.component.html rename to examples/angular/signal-input/src/app/person-table/person-table.html diff --git a/examples/angular/signal-input/src/app/person-table/person-table.component.ts b/examples/angular/signal-input/src/app/person-table/person-table.ts similarity index 87% rename from examples/angular/signal-input/src/app/person-table/person-table.component.ts rename to examples/angular/signal-input/src/app/person-table/person-table.ts index e5ebc1c5bf..dfdc308161 100644 --- a/examples/angular/signal-input/src/app/person-table/person-table.component.ts +++ b/examples/angular/signal-input/src/app/person-table/person-table.ts @@ -1,7 +1,8 @@ import { ChangeDetectionStrategy, Component, input, model } from '@angular/core' import { - FlexRenderDirective, + FlexRender, columnVisibilityFeature, + createPaginatedRowModel, injectTable, rowPaginationFeature, tableFeatures, @@ -16,11 +17,11 @@ const _features = tableFeatures({ @Component({ selector: 'app-person-table', - templateUrl: 'person-table.component.html', + templateUrl: 'person-table.html', changeDetection: ChangeDetectionStrategy.OnPush, - imports: [FlexRenderDirective], + imports: [FlexRender], }) -export class PersonTableComponent { +export class PersonTable { readonly data = input.required>() readonly pagination = model.required() @@ -42,6 +43,9 @@ export class PersonTableComponent { readonly table = injectTable(() => { return { _features, + _rowModels: { + paginatedRowModel: createPaginatedRowModel(), + }, data: this.data(), columns: this.columns, state: { diff --git a/examples/angular/signal-input/src/assets/.gitkeep b/examples/angular/signal-input/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/signal-input/src/index.html b/examples/angular/signal-input/src/index.html index af6a41707a..462fb62e4c 100644 --- a/examples/angular/signal-input/src/index.html +++ b/examples/angular/signal-input/src/index.html @@ -2,7 +2,7 @@ - Grouping + Signal Input diff --git a/examples/angular/signal-input/src/main.ts b/examples/angular/signal-input/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/signal-input/src/main.ts +++ b/examples/angular/signal-input/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/signal-input/src/styles.scss b/examples/angular/signal-input/src/styles.css similarity index 100% rename from examples/angular/signal-input/src/styles.scss rename to examples/angular/signal-input/src/styles.css diff --git a/examples/angular/signal-input/tsconfig.app.json b/examples/angular/signal-input/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/signal-input/tsconfig.app.json +++ b/examples/angular/signal-input/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/signal-input/tsconfig.json b/examples/angular/signal-input/tsconfig.json index 82c63d482a..593e98476d 100644 --- a/examples/angular/signal-input/tsconfig.json +++ b/examples/angular/signal-input/tsconfig.json @@ -1,24 +1,19 @@ +/* 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", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/signal-input/tsconfig.spec.json b/examples/angular/signal-input/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/signal-input/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From b3c5e179388108801b611002428987508d197274 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 13:01:48 +0100 Subject: [PATCH 18/28] chore(angular): cleanup and migrate sub-components example with new angular coding style guide --- .../.devcontainer/devcontainer.json | 4 - examples/angular/sub-components/.editorconfig | 16 ---- examples/angular/sub-components/.gitignore | 4 +- examples/angular/sub-components/README.md | 52 +++++++++-- examples/angular/sub-components/angular.json | 88 +++++++++++------- examples/angular/sub-components/package.json | 14 ++- .../{src => public}/favicon.ico | Bin .../src/app/{app.component.html => app.html} | 21 +---- .../src/app/{app.component.ts => app.ts} | 18 ++-- .../src/app/sub-component/sub-component.ts | 18 ++++ .../sub-components/src/assets/.gitkeep | 0 .../angular/sub-components/src/index.html | 2 +- examples/angular/sub-components/src/main.ts | 4 +- .../src/{styles.scss => styles.css} | 0 .../angular/sub-components/tsconfig.app.json | 11 ++- examples/angular/sub-components/tsconfig.json | 15 +-- .../angular/sub-components/tsconfig.spec.json | 9 -- 17 files changed, 146 insertions(+), 130 deletions(-) delete mode 100644 examples/angular/sub-components/.devcontainer/devcontainer.json delete mode 100644 examples/angular/sub-components/.editorconfig rename examples/angular/sub-components/{src => public}/favicon.ico (100%) rename examples/angular/sub-components/src/app/{app.component.html => app.html} (68%) rename examples/angular/sub-components/src/app/{app.component.ts => app.ts} (90%) create mode 100644 examples/angular/sub-components/src/app/sub-component/sub-component.ts delete mode 100644 examples/angular/sub-components/src/assets/.gitkeep rename examples/angular/sub-components/src/{styles.scss => styles.css} (100%) delete mode 100644 examples/angular/sub-components/tsconfig.spec.json diff --git a/examples/angular/sub-components/.devcontainer/devcontainer.json b/examples/angular/sub-components/.devcontainer/devcontainer.json deleted file mode 100644 index 36f47d8762..0000000000 --- a/examples/angular/sub-components/.devcontainer/devcontainer.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "Node.js", - "image": "mcr.microsoft.com/devcontainers/javascript-node:18" -} diff --git a/examples/angular/sub-components/.editorconfig b/examples/angular/sub-components/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/sub-components/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/sub-components/.gitignore b/examples/angular/sub-components/.gitignore index 0711527ef9..854acd5fc0 100644 --- a/examples/angular/sub-components/.gitignore +++ b/examples/angular/sub-components/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -26,6 +26,7 @@ yarn-error.log !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +!.vscode/mcp.json .history/* # Miscellaneous @@ -36,6 +37,7 @@ yarn-error.log /libpeerconnection.log testem.log /typings +__screenshots__/ # System files .DS_Store diff --git a/examples/angular/sub-components/README.md b/examples/angular/sub-components/README.md index 5da97a87d1..f0ab62065d 100644 --- a/examples/angular/sub-components/README.md +++ b/examples/angular/sub-components/README.md @@ -1,27 +1,59 @@ -# Basic +# Sub components -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +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 +``` -## Build +## Building -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: + +```bash +ng test +``` ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +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. -## Further help +## Additional Resources -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +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. diff --git a/examples/angular/sub-components/angular.json b/examples/angular/sub-components/angular.json index 6327dd784f..c2bdcab341 100644 --- a/examples/angular/sub-components/angular.json +++ b/examples/angular/sub-components/angular.json @@ -1,18 +1,43 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, "newProjectRoot": "projects", "projects": { "sub-components": { - "cli": { - "cache": { - "enabled": false - } - }, "projectType": "application", "schematics": { "@schematics/angular:component": { - "style": "scss" + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true } }, "root": "", @@ -20,21 +45,32 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:application", + "builder": "@angular/build:application", "options": { - "outputPath": "dist/sub-components", - "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] }, "configurations": { "production": { - "budgets": [], + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], "outputHashing": "all" }, "development": { @@ -46,7 +82,7 @@ "defaultConfiguration": "production" }, "serve": { - "builder": "@angular-devkit/build-angular:dev-server", + "builder": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "sub-components:build:production" @@ -56,28 +92,8 @@ } }, "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "sub-components:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "polyfills": ["zone.js", "zone.js/testing"], - "tsConfig": "tsconfig.spec.json", - "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], - "scripts": [] - } } } } - }, - "cli": { - "analytics": false } } diff --git a/examples/angular/sub-components/package.json b/examples/angular/sub-components/package.json index 0dca75b2f4..4c5022c880 100644 --- a/examples/angular/sub-components/package.json +++ b/examples/angular/sub-components/package.json @@ -6,28 +6,26 @@ "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", - "test": "ng test" + "lint": "eslint ./src" }, "private": true, + "packageManager": "pnpm@9.15.0", "dependencies": { - "@angular/animations": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", - "@angular/platform-browser-dynamic": "^21.1.0", "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "rxjs": "~7.8.0", + "tslib": "^2.3.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^21.1.0", + "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "tslib": "^2.8.1", - "typescript": "5.9.3" + "typescript": "~5.9.2" } } diff --git a/examples/angular/sub-components/src/favicon.ico b/examples/angular/sub-components/public/favicon.ico similarity index 100% rename from examples/angular/sub-components/src/favicon.ico rename to examples/angular/sub-components/public/favicon.ico diff --git a/examples/angular/sub-components/src/app/app.component.html b/examples/angular/sub-components/src/app/app.html similarity index 68% rename from examples/angular/sub-components/src/app/app.component.html rename to examples/angular/sub-components/src/app/app.html index b2c63ba226..1dae2ee1a4 100644 --- a/examples/angular/sub-components/src/app/app.component.html +++ b/examples/angular/sub-components/src/app/app.html @@ -7,13 +7,7 @@ @for (header of headerGroup.headers; track header.id) { @if (!header.isPlaceholder) { - +
} @@ -29,11 +23,7 @@ @for (cell of row.getVisibleCells(); track cell.id) {
@@ -45,12 +35,7 @@ - + } diff --git a/examples/angular/sub-components/src/app/app.component.ts b/examples/angular/sub-components/src/app/app.ts similarity index 90% rename from examples/angular/sub-components/src/app/app.component.ts rename to examples/angular/sub-components/src/app/app.ts index 54d60f1543..d167610a14 100644 --- a/examples/angular/sub-components/src/app/app.component.ts +++ b/examples/angular/sub-components/src/app/app.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core' import { - FlexRenderDirective, + FlexRender, columnVisibilityFeature, createExpandedRowModel, flexRenderComponent, @@ -9,9 +9,10 @@ import { tableFeatures, } from '@tanstack/angular-table' import { ReactiveFormsModule } from '@angular/forms' -import { JsonPipe, NgTemplateOutlet } from '@angular/common' +import { JsonPipe } from '@angular/common' import { makeData } from './makeData' import { ExpandableCell, ExpanderCell } from './expandable-cell' +import { SubComponent } from './sub-component/sub-component' import type { Person } from './makeData' import type { ColumnDef, ExpandedState } from '@tanstack/angular-table' @@ -92,23 +93,18 @@ const columns: Array> = [ @Component({ selector: 'app-root', - imports: [ - FlexRenderDirective, - ReactiveFormsModule, - JsonPipe, - NgTemplateOutlet, - ], - templateUrl: './app.component.html', + imports: [FlexRender, ReactiveFormsModule, JsonPipe, SubComponent], + templateUrl: './app.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { +export class App { readonly data = signal>(makeData(10)) readonly expanded = signal({}) readonly table = injectTable(() => ({ _features, _rowModels: { - expandedRowModel: createExpandedRowModel(), + expandedRowModel: createExpandedRowModel(), }, data: this.data(), columns, diff --git a/examples/angular/sub-components/src/app/sub-component/sub-component.ts b/examples/angular/sub-components/src/app/sub-component/sub-component.ts new file mode 100644 index 0000000000..21da89f509 --- /dev/null +++ b/examples/angular/sub-components/src/app/sub-component/sub-component.ts @@ -0,0 +1,18 @@ +import { Component, input } from '@angular/core' +import { JsonPipe } from '@angular/common' +import type { Row } from '@tanstack/angular-table' + +@Component({ + selector: 'app-sub', + template: ` + 
+    
+      {{ row().original | json }}
+    
+
+ `, + imports: [JsonPipe], +}) +export class SubComponent { + readonly row = input.required>() +} diff --git a/examples/angular/sub-components/src/assets/.gitkeep b/examples/angular/sub-components/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/sub-components/src/index.html b/examples/angular/sub-components/src/index.html index bd21f08bcc..bd4f2ddaa5 100644 --- a/examples/angular/sub-components/src/index.html +++ b/examples/angular/sub-components/src/index.html @@ -2,7 +2,7 @@ - Expanding + Sub componentss diff --git a/examples/angular/sub-components/src/main.ts b/examples/angular/sub-components/src/main.ts index c3d8f9af99..8192dca694 100644 --- a/examples/angular/sub-components/src/main.ts +++ b/examples/angular/sub-components/src/main.ts @@ -1,5 +1,5 @@ import { bootstrapApplication } from '@angular/platform-browser' import { appConfig } from './app/app.config' -import { AppComponent } from './app/app.component' +import { App } from './app/app' -bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err)) +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/sub-components/src/styles.scss b/examples/angular/sub-components/src/styles.css similarity index 100% rename from examples/angular/sub-components/src/styles.scss rename to examples/angular/sub-components/src/styles.css diff --git a/examples/angular/sub-components/tsconfig.app.json b/examples/angular/sub-components/tsconfig.app.json index 84f1f992d2..264f459bf8 100644 --- a/examples/angular/sub-components/tsconfig.app.json +++ b/examples/angular/sub-components/tsconfig.app.json @@ -1,10 +1,15 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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"] + "include": [ + "src/**/*.ts" + ], + "exclude": [ + "src/**/*.spec.ts" + ] } diff --git a/examples/angular/sub-components/tsconfig.json b/examples/angular/sub-components/tsconfig.json index b58d3efc71..593e98476d 100644 --- a/examples/angular/sub-components/tsconfig.json +++ b/examples/angular/sub-components/tsconfig.json @@ -1,26 +1,19 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ +/* 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": { - "baseUrl": "src", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, - "esModuleInterop": true, - "sourceMap": true, - "declaration": false, + "isolatedModules": true, "experimentalDecorators": true, - "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": ["ES2022", "dom"] + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/examples/angular/sub-components/tsconfig.spec.json b/examples/angular/sub-components/tsconfig.spec.json deleted file mode 100644 index 47e3dd7551..0000000000 --- a/examples/angular/sub-components/tsconfig.spec.json +++ /dev/null @@ -1,9 +0,0 @@ -/* To learn more about this file see: https://angular.io/config/tsconfig. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": ["jasmine"] - }, - "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] -} From 3de833fc07aa341ea7b05f42a8733f4bdcf8aac5 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 13:04:21 +0100 Subject: [PATCH 19/28] chore(angular): removed zone.js and fix typescript version --- examples/angular/basic-app-table/package.json | 2 +- examples/angular/basic/package.json | 2 +- examples/angular/column-ordering/package.json | 2 +- .../column-pinning-sticky/package.json | 2 +- examples/angular/column-pinning/package.json | 2 +- .../column-resizing-performant/package.json | 2 +- .../angular/column-visibility/package.json | 2 +- .../angular/composable-tables/package.json | 2 +- examples/angular/editable/package.json | 2 +- examples/angular/expanding/package.json | 2 +- examples/angular/filters/package.json | 2 +- examples/angular/grouping/package.json | 2 +- examples/angular/remote-data/angular.json | 2 +- examples/angular/row-dnd/package.json | 2 +- .../angular/row-selection-signal/angular.json | 2 +- .../angular/row-selection-signal/package.json | 3 +- examples/angular/row-selection/package.json | 2 +- examples/angular/signal-input/package.json | 2 +- examples/angular/sub-components/package.json | 2 +- pnpm-lock.yaml | 606 ++++++------------ 20 files changed, 221 insertions(+), 424 deletions(-) diff --git a/examples/angular/basic-app-table/package.json b/examples/angular/basic-app-table/package.json index 1c1e13dca1..2144dd8d26 100644 --- a/examples/angular/basic-app-table/package.json +++ b/examples/angular/basic-app-table/package.json @@ -24,6 +24,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json index 536c530098..4531da83dd 100644 --- a/examples/angular/basic/package.json +++ b/examples/angular/basic/package.json @@ -24,6 +24,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/column-ordering/package.json b/examples/angular/column-ordering/package.json index 207a1e7528..04f8e92678 100644 --- a/examples/angular/column-ordering/package.json +++ b/examples/angular/column-ordering/package.json @@ -25,6 +25,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/column-pinning-sticky/package.json b/examples/angular/column-pinning-sticky/package.json index f8cb65a53e..f8cfa0754f 100644 --- a/examples/angular/column-pinning-sticky/package.json +++ b/examples/angular/column-pinning-sticky/package.json @@ -25,6 +25,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/column-pinning/package.json b/examples/angular/column-pinning/package.json index 3b31a8c395..21af59854d 100644 --- a/examples/angular/column-pinning/package.json +++ b/examples/angular/column-pinning/package.json @@ -25,6 +25,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/column-resizing-performant/package.json b/examples/angular/column-resizing-performant/package.json index 677b5452f4..82b819ac90 100644 --- a/examples/angular/column-resizing-performant/package.json +++ b/examples/angular/column-resizing-performant/package.json @@ -25,6 +25,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/column-visibility/package.json b/examples/angular/column-visibility/package.json index 8b9d473ae5..749a327bf3 100644 --- a/examples/angular/column-visibility/package.json +++ b/examples/angular/column-visibility/package.json @@ -25,6 +25,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/composable-tables/package.json b/examples/angular/composable-tables/package.json index 1cb23470cb..9a01b7170a 100644 --- a/examples/angular/composable-tables/package.json +++ b/examples/angular/composable-tables/package.json @@ -26,6 +26,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/editable/package.json b/examples/angular/editable/package.json index 521057e11a..f97400e52f 100644 --- a/examples/angular/editable/package.json +++ b/examples/angular/editable/package.json @@ -25,6 +25,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/expanding/package.json b/examples/angular/expanding/package.json index c7cf710217..d30032a786 100644 --- a/examples/angular/expanding/package.json +++ b/examples/angular/expanding/package.json @@ -25,6 +25,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/filters/package.json b/examples/angular/filters/package.json index d0e2143191..df371c95d9 100644 --- a/examples/angular/filters/package.json +++ b/examples/angular/filters/package.json @@ -25,6 +25,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/grouping/package.json b/examples/angular/grouping/package.json index bdf39dc181..c0111bbf58 100644 --- a/examples/angular/grouping/package.json +++ b/examples/angular/grouping/package.json @@ -26,6 +26,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/remote-data/angular.json b/examples/angular/remote-data/angular.json index 0f7ed50634..39afd34914 100644 --- a/examples/angular/remote-data/angular.json +++ b/examples/angular/remote-data/angular.json @@ -85,7 +85,7 @@ "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "polyfills": ["zone.js", "zone.js/testing"], + "polyfills": [], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets"], diff --git a/examples/angular/row-dnd/package.json b/examples/angular/row-dnd/package.json index 273aa212d3..3b5839bfe0 100644 --- a/examples/angular/row-dnd/package.json +++ b/examples/angular/row-dnd/package.json @@ -27,6 +27,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/row-selection-signal/angular.json b/examples/angular/row-selection-signal/angular.json index 106a174e63..426e8915dc 100644 --- a/examples/angular/row-selection-signal/angular.json +++ b/examples/angular/row-selection-signal/angular.json @@ -49,7 +49,7 @@ "outputPath": "dist/row-selection-signal", "index": "src/index.html", "browser": "src/main.ts", - "polyfills": ["zone.js"], + "polyfills": [], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets"], diff --git a/examples/angular/row-selection-signal/package.json b/examples/angular/row-selection-signal/package.json index 5889b832f4..24e9408f9d 100644 --- a/examples/angular/row-selection-signal/package.json +++ b/examples/angular/row-selection-signal/package.json @@ -21,8 +21,7 @@ "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", "rxjs": "~7.8.2", - "tslib": "^2.8.1", - "zone.js": "~0.16.0" + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/row-selection/package.json b/examples/angular/row-selection/package.json index f65d2c4444..35372b8ee7 100644 --- a/examples/angular/row-selection/package.json +++ b/examples/angular/row-selection/package.json @@ -27,6 +27,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/signal-input/package.json b/examples/angular/signal-input/package.json index 6e968d5ac2..cf4004e23a 100644 --- a/examples/angular/signal-input/package.json +++ b/examples/angular/signal-input/package.json @@ -27,6 +27,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/examples/angular/sub-components/package.json b/examples/angular/sub-components/package.json index 4c5022c880..e2ec4d7721 100644 --- a/examples/angular/sub-components/package.json +++ b/examples/angular/sub-components/package.json @@ -26,6 +26,6 @@ "@angular/build": "^21.1.0", "@angular/cli": "^21.1.0", "@angular/compiler-cli": "^21.1.0", - "typescript": "~5.9.2" + "typescript": "5.9.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e97528134e..89d7b3c917 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -83,9 +83,6 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) '@angular/router': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) @@ -93,11 +90,11 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -108,15 +105,6 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - '@types/jasmine': - specifier: ~5.1.15 - version: 5.1.15 - jasmine-core: - specifier: ~5.13.0 - version: 5.13.0 - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 @@ -138,21 +126,15 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) - '@angular/router': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@tanstack/angular-table': specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -163,15 +145,6 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - '@types/jasmine': - specifier: ~5.1.15 - version: 5.1.15 - jasmine-core: - specifier: ~5.13.0 - version: 5.13.0 - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 @@ -193,18 +166,21 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': + '@angular/router': specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) + '@faker-js/faker': + specifier: ^10.2.0 + version: 10.2.0 '@tanstack/angular-table': specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -215,18 +191,12 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 examples/angular/column-pinning: dependencies: - '@angular/animations': - specifier: ^21.1.0 - version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) '@angular/common': specifier: ^21.1.0 version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) @@ -242,9 +212,9 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': + '@angular/router': specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@faker-js/faker': specifier: ^10.2.0 version: 10.2.0 @@ -252,11 +222,11 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -267,9 +237,6 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 @@ -291,9 +258,9 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': + '@angular/router': specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@faker-js/faker': specifier: ^10.2.0 version: 10.2.0 @@ -301,11 +268,11 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -316,18 +283,12 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 examples/angular/column-resizing-performant: dependencies: - '@angular/animations': - specifier: ^21.1.0 - version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) '@angular/common': specifier: ^21.1.0 version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) @@ -343,9 +304,6 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) '@angular/router': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) @@ -356,45 +314,21 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: - '@angular-devkit/build-angular': + '@angular/build': specifier: ^21.1.0 - version: 21.1.0(o7rzouikonehkutpqdmokioixy) + version: 21.1.0(dj7h5xzia22xlznqbc3rvvqtrq) '@angular/cli': specifier: ^21.1.0 version: 21.1.0(@types/node@25.0.9)(chokidar@5.0.0)(hono@4.11.4) '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - '@types/jasmine': - specifier: ~5.1.15 - version: 5.1.15 - jasmine-core: - specifier: ~5.13.0 - version: 5.13.0 - karma: - specifier: ~6.4.4 - version: 6.4.4 - karma-chrome-launcher: - specifier: ~3.2.0 - version: 3.2.0 - karma-coverage: - specifier: ~2.2.1 - version: 2.2.1 - karma-jasmine: - specifier: ~5.1.0 - version: 5.1.0(karma@6.4.4) - karma-jasmine-html-reporter: - specifier: ~2.1.0 - version: 2.1.0(jasmine-core@5.13.0)(karma-jasmine@5.1.0(karma@6.4.4))(karma@6.4.4) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 @@ -416,18 +350,21 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': + '@angular/router': specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) + '@faker-js/faker': + specifier: ^10.2.0 + version: 10.2.0 '@tanstack/angular-table': specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -438,9 +375,6 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 @@ -462,21 +396,21 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) '@angular/router': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) + '@faker-js/faker': + specifier: ^10.2.0 + version: 10.2.0 '@tanstack/angular-table': specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -487,24 +421,52 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - '@types/jasmine': - specifier: ~5.1.15 - version: 5.1.15 - jasmine-core: - specifier: ~5.13.0 - version: 5.13.0 + typescript: + specifier: 5.9.3 + version: 5.9.3 + + examples/angular/custom-plugin: + dependencies: + '@angular/common': + specifier: ^21.1.0 + version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) + '@angular/compiler': + specifier: ^21.1.0 + version: 21.1.0 + '@angular/core': + specifier: ^21.1.0 + version: 21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0) + '@angular/forms': + specifier: ^21.1.0 + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) + '@angular/platform-browser': + specifier: ^21.1.0 + version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) + '@angular/router': + specifier: ^21.1.0 + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) + rxjs: + specifier: ~7.8.0 + version: 7.8.2 tslib: - specifier: ^2.8.1 + specifier: ^2.3.0 version: 2.8.1 + devDependencies: + '@angular/build': + specifier: ^21.1.0 + version: 21.1.0(dj7h5xzia22xlznqbc3rvvqtrq) + '@angular/cli': + specifier: ^21.1.0 + version: 21.1.0(@types/node@25.0.9)(chokidar@5.0.0)(hono@4.11.4) + '@angular/compiler-cli': + specifier: ^21.1.0 + version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) typescript: specifier: 5.9.3 version: 5.9.3 examples/angular/editable: dependencies: - '@angular/animations': - specifier: ^21.1.0 - version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) '@angular/common': specifier: ^21.1.0 version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) @@ -520,9 +482,6 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) '@angular/router': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) @@ -533,54 +492,27 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: - '@angular-devkit/build-angular': + '@angular/build': specifier: ^21.1.0 - version: 21.1.0(o7rzouikonehkutpqdmokioixy) + version: 21.1.0(dj7h5xzia22xlznqbc3rvvqtrq) '@angular/cli': specifier: ^21.1.0 version: 21.1.0(@types/node@25.0.9)(chokidar@5.0.0)(hono@4.11.4) '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - '@types/jasmine': - specifier: ~5.1.15 - version: 5.1.15 - jasmine-core: - specifier: ~5.13.0 - version: 5.13.0 - karma: - specifier: ~6.4.4 - version: 6.4.4 - karma-chrome-launcher: - specifier: ~3.2.0 - version: 3.2.0 - karma-coverage: - specifier: ~2.2.1 - version: 2.2.1 - karma-jasmine: - specifier: ~5.1.0 - version: 5.1.0(karma@6.4.4) - karma-jasmine-html-reporter: - specifier: ~2.1.0 - version: 2.1.0(jasmine-core@5.13.0)(karma-jasmine@5.1.0(karma@6.4.4))(karma@6.4.4) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 examples/angular/expanding: dependencies: - '@angular/animations': - specifier: ^21.1.0 - version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) '@angular/common': specifier: ^21.1.0 version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) @@ -596,9 +528,6 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) '@angular/router': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) @@ -609,24 +538,21 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: - '@angular-devkit/build-angular': + '@angular/build': specifier: ^21.1.0 - version: 21.1.0(o7rzouikonehkutpqdmokioixy) + version: 21.1.0(dj7h5xzia22xlznqbc3rvvqtrq) '@angular/cli': specifier: ^21.1.0 version: 21.1.0(@types/node@25.0.9)(chokidar@5.0.0)(hono@4.11.4) '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 @@ -648,9 +574,9 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': + '@angular/router': specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@faker-js/faker': specifier: ^10.2.0 version: 10.2.0 @@ -658,14 +584,11 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 tslib: - specifier: ^2.8.1 + specifier: ^2.3.0 version: 2.8.1 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -697,9 +620,9 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': + '@angular/router': specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@faker-js/faker': specifier: ^10.2.0 version: 10.2.0 @@ -707,11 +630,11 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -722,18 +645,12 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 examples/angular/remote-data: dependencies: - '@angular/animations': - specifier: ^21.1.0 - version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) '@angular/common': specifier: ^21.1.0 version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) @@ -770,9 +687,6 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 devDependencies: '@angular-devkit/build-angular': specifier: ^21.1.0 @@ -798,9 +712,6 @@ importers: examples/angular/row-dnd: dependencies: - '@angular/animations': - specifier: ^21.1.0 - version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) '@angular/cdk': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) @@ -819,9 +730,6 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) '@angular/router': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) @@ -832,51 +740,30 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: - '@angular-devkit/build-angular': + '@angular/build': specifier: ^21.1.0 - version: 21.1.0(o7rzouikonehkutpqdmokioixy) + version: 21.1.0(dj7h5xzia22xlznqbc3rvvqtrq) '@angular/cli': specifier: ^21.1.0 version: 21.1.0(@types/node@25.0.9)(chokidar@5.0.0)(hono@4.11.4) '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - '@types/jasmine': - specifier: ~5.1.15 - version: 5.1.15 - jasmine-core: - specifier: ~5.13.0 - version: 5.13.0 - karma: - specifier: ~6.4.4 - version: 6.4.4 - karma-chrome-launcher: - specifier: ~3.2.0 - version: 3.2.0 - karma-coverage: - specifier: ~2.2.1 - version: 2.2.1 - karma-jasmine: - specifier: ~5.1.0 - version: 5.1.0(karma@6.4.4) - karma-jasmine-html-reporter: - specifier: ~2.1.0 - version: 2.1.0(jasmine-core@5.13.0)(karma-jasmine@5.1.0(karma@6.4.4))(karma@6.4.4) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 examples/angular/row-selection: dependencies: + '@angular/cdk': + specifier: ^21.1.0 + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@angular/common': specifier: ^21.1.0 version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) @@ -892,9 +779,9 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': + '@angular/router': specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@faker-js/faker': specifier: ^10.2.0 version: 10.2.0 @@ -902,14 +789,11 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 tslib: - specifier: ^2.8.1 + specifier: ^2.3.0 version: 2.8.1 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -959,9 +843,6 @@ importers: tslib: specifier: ^2.8.1 version: 2.8.1 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -978,6 +859,9 @@ importers: examples/angular/signal-input: dependencies: + '@angular/cdk': + specifier: ^21.1.0 + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@angular/common': specifier: ^21.1.0 version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) @@ -987,12 +871,15 @@ importers: '@angular/core': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0) + '@angular/forms': + specifier: ^21.1.0 + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': + '@angular/router': specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) + version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) '@faker-js/faker': specifier: ^10.2.0 version: 10.2.0 @@ -1000,11 +887,11 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -1015,18 +902,12 @@ importers: '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 examples/angular/sub-components: dependencies: - '@angular/animations': - specifier: ^21.1.0 - version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) '@angular/common': specifier: ^21.1.0 version: 21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2) @@ -1042,9 +923,6 @@ importers: '@angular/platform-browser': specifier: ^21.1.0 version: 21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)) - '@angular/platform-browser-dynamic': - specifier: ^21.1.0 - version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/compiler@21.1.0)(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))) '@angular/router': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) @@ -1055,24 +933,21 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.2 + specifier: ~7.8.0 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.3.0 + version: 2.8.1 devDependencies: - '@angular-devkit/build-angular': + '@angular/build': specifier: ^21.1.0 - version: 21.1.0(o7rzouikonehkutpqdmokioixy) + version: 21.1.0(dj7h5xzia22xlznqbc3rvvqtrq) '@angular/cli': specifier: ^21.1.0 version: 21.1.0(@types/node@25.0.9)(chokidar@5.0.0)(hono@4.11.4) '@angular/compiler-cli': specifier: ^21.1.0 version: 21.1.0(@angular/compiler@21.1.0)(typescript@5.9.3) - tslib: - specifier: ^2.8.1 - version: 2.8.1 typescript: specifier: 5.9.3 version: 5.9.3 @@ -7028,6 +6903,7 @@ packages: '@tanstack/config@0.14.2': resolution: {integrity: sha512-C431mIFMWgsnQKvmwjysfUbkqGWGtNgXqIcS14h/0QUvwSCx+ctC1UrsvGY08FrNouo/iAExRoOqUbD6cNagPg==} engines: {node: '>=18'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. hasBin: true '@tanstack/devtools-event-client@0.4.0': @@ -7306,9 +7182,6 @@ packages: '@types/http-proxy@1.17.15': resolution: {integrity: sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==} - '@types/jasmine@5.1.15': - resolution: {integrity: sha512-ZAC8KjmV2MJxbNTrwXFN+HKeajpXQZp6KpPiR6Aa4XvaEnjP6qh23lL/Rqb7AYzlp3h/rcwDrQ7Gg7q28cQTQg==} - '@types/json-schema@7.0.15': resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} @@ -9177,9 +9050,6 @@ packages: html-entities@2.3.3: resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==} - html-escaper@2.0.2: - resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} - htmlparser2@10.0.0: resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==} @@ -9507,32 +9377,10 @@ packages: resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==} engines: {node: '>=8'} - istanbul-lib-instrument@5.2.1: - resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==} - engines: {node: '>=8'} - istanbul-lib-instrument@6.0.3: resolution: {integrity: sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==} engines: {node: '>=10'} - istanbul-lib-report@3.0.1: - resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==} - engines: {node: '>=10'} - - istanbul-lib-source-maps@4.0.1: - resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==} - engines: {node: '>=10'} - - istanbul-reports@3.1.7: - resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==} - engines: {node: '>=8'} - - jasmine-core@4.6.1: - resolution: {integrity: sha512-VYz/BjjmC3klLJlLwA4Kw8ytk0zDSmbbDLNs794VnWmkcCB7I9aAL/D48VNQtmITyPvea2C3jdUMfc3kAoy0PQ==} - - jasmine-core@5.13.0: - resolution: {integrity: sha512-vsYjfh7lyqvZX5QgqKc4YH8phs7g96Z8bsdIFNEU3VqXhlHaq+vov/Fgn/sr6MiUczdZkyXRC3TX369Ll4Nzbw==} - jest-diff@30.2.0: resolution: {integrity: sha512-dQHFo3Pt4/NLlG5z4PxZ/3yZTZ1C7s9hveiOj+GCN+uT109NC2QgsoVZsVOAvbJ3RgKkvyLGXZV9+piDpWbm6A==} engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0} @@ -9622,26 +9470,6 @@ packages: resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==} engines: {'0': node >= 0.2.0} - karma-chrome-launcher@3.2.0: - resolution: {integrity: sha512-rE9RkUPI7I9mAxByQWkGJFXfFD6lE4gC5nPuZdobf/QdTEJI6EU4yIay/cfU/xV4ZxlM5JiTv7zWYgA64NpS5Q==} - - karma-coverage@2.2.1: - resolution: {integrity: sha512-yj7hbequkQP2qOSb20GuNSIyE//PgJWHwC2IydLE6XRtsnaflv+/OSGNssPjobYUlhVVagy99TQpqUt3vAUG7A==} - engines: {node: '>=10.0.0'} - - karma-jasmine-html-reporter@2.1.0: - resolution: {integrity: sha512-sPQE1+nlsn6Hwb5t+HHwyy0A1FNCVKuL1192b+XNauMYWThz2kweiBVW1DqloRpVvZIJkIoHVB7XRpK78n1xbQ==} - peerDependencies: - jasmine-core: ^4.0.0 || ^5.0.0 - karma: ^6.0.0 - karma-jasmine: ^5.0.0 - - karma-jasmine@5.1.0: - resolution: {integrity: sha512-i/zQLFrfEpRyQoJF9fsCdTMOF5c2dK7C7OmsuKg2D0YSsuZSfQDiLuaiktbuio6F2wiCsZSnSnieIQ0ant/uzQ==} - engines: {node: '>=12'} - peerDependencies: - karma: ^6.0.0 - karma-source-map-support@1.4.0: resolution: {integrity: sha512-RsBECncGO17KAoJCYXjv+ckIz+Ii9NCi+9enk+rq6XC81ezYkb4/RHE6CTXdA7IOJqoF3wcaLfVG0CPmE5ca6A==} @@ -9901,10 +9729,6 @@ packages: resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==} engines: {node: '>=6'} - make-dir@4.0.0: - resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==} - engines: {node: '>=10'} - make-fetch-happen@15.0.3: resolution: {integrity: sha512-iyyEpDty1mwW3dGlYXAJqC/azFn5PPvgKVwXayOGBSmKLxhKZ9fg4qIan2ePpp1vJIwfFiO34LAPZgq9SZW9Aw==} engines: {node: ^20.17.0 || >=22.9.0} @@ -13494,7 +13318,8 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.28.5 - '@colors/colors@1.5.0': {} + '@colors/colors@1.5.0': + optional: true '@commitlint/parse@19.5.0': dependencies: @@ -15340,7 +15165,8 @@ snapshots: '@size-limit/file': 12.0.0(size-limit@12.0.0(jiti@2.6.1)) size-limit: 12.0.0(jiti@2.6.1) - '@socket.io/component-emitter@3.1.2': {} + '@socket.io/component-emitter@3.1.2': + optional: true '@solid-primitives/scheduled@1.5.2(solid-js@1.9.10)': dependencies: @@ -15772,6 +15598,7 @@ snapshots: '@types/cors@2.8.17': dependencies: '@types/node': 25.0.9 + optional: true '@types/deep-eql@4.0.2': {} @@ -15830,8 +15657,6 @@ snapshots: dependencies: '@types/node': 25.0.9 - '@types/jasmine@5.1.15': {} - '@types/json-schema@7.0.15': {} '@types/mime@1.3.5': {} @@ -16594,7 +16419,8 @@ snapshots: base64-js@1.5.1: {} - base64id@2.0.0: {} + base64id@2.0.0: + optional: true baseline-browser-mapping@2.9.6: {} @@ -16796,6 +16622,7 @@ snapshots: string-width: 4.2.3 strip-ansi: 6.0.1 wrap-ansi: 7.0.0 + optional: true cliui@8.0.1: dependencies: @@ -16892,6 +16719,7 @@ snapshots: utils-merge: 1.0.1 transitivePeerDependencies: - supports-color + optional: true content-disposition@0.5.4: dependencies: @@ -17031,7 +16859,8 @@ snapshots: execa: 0.6.3 is-git-repository: 1.1.1 - custom-event@1.0.1: {} + custom-event@1.0.1: + optional: true data-urls@6.0.0: dependencies: @@ -17042,7 +16871,8 @@ snapshots: date-fns@4.1.0: {} - date-format@4.0.14: {} + date-format@4.0.14: + optional: true de-indent@1.0.2: {} @@ -17057,6 +16887,7 @@ snapshots: debug@4.3.6: dependencies: ms: 2.1.2 + optional: true debug@4.4.0: dependencies: @@ -17117,7 +16948,8 @@ snapshots: devalue@5.6.2: {} - di@0.0.1: {} + di@0.0.1: + optional: true diff@8.0.2: {} @@ -17137,6 +16969,7 @@ snapshots: ent: 2.2.2 extend: 3.0.2 void-elements: 2.0.1 + optional: true dom-serializer@2.0.0: dependencies: @@ -17195,7 +17028,8 @@ snapshots: dependencies: once: 1.4.0 - engine.io-parser@5.2.3: {} + engine.io-parser@5.2.3: + optional: true engine.io@6.6.4: dependencies: @@ -17212,6 +17046,7 @@ snapshots: - bufferutil - supports-color - utf-8-validate + optional: true enhanced-resolve@5.18.0: dependencies: @@ -17233,6 +17068,7 @@ snapshots: es-errors: 1.3.0 punycode: 1.4.1 safe-regex-test: 1.1.0 + optional: true entities@4.5.0: {} @@ -17851,6 +17687,7 @@ snapshots: unpipe: 1.0.0 transitivePeerDependencies: - supports-color + optional: true finalhandler@1.3.1: dependencies: @@ -17960,12 +17797,14 @@ snapshots: graceful-fs: 4.2.11 jsonfile: 4.0.0 universalify: 0.1.2 + optional: true fs-minipass@3.0.3: dependencies: minipass: 7.1.2 - fs.realpath@1.0.0: {} + fs.realpath@1.0.0: + optional: true fsevents@2.3.3: optional: true @@ -18036,6 +17875,7 @@ snapshots: minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 + optional: true global-modules@1.0.0: dependencies: @@ -18114,8 +17954,6 @@ snapshots: html-entities@2.3.3: {} - html-escaper@2.0.2: {} - htmlparser2@10.0.0: dependencies: domelementtype: 2.3.0 @@ -18247,6 +18085,7 @@ snapshots: dependencies: once: 1.4.0 wrappy: 1.0.2 + optional: true inherits@2.0.3: {} @@ -18359,6 +18198,7 @@ snapshots: gopd: 1.2.0 has-tostringtag: 1.0.2 hasown: 2.0.2 + optional: true is-relative@1.0.0: dependencies: @@ -18394,7 +18234,8 @@ snapshots: isarray@1.0.0: {} - isbinaryfile@4.0.10: {} + isbinaryfile@4.0.10: + optional: true isbot@5.1.32: {} @@ -18406,16 +18247,6 @@ snapshots: istanbul-lib-coverage@3.2.2: {} - istanbul-lib-instrument@5.2.1: - dependencies: - '@babel/core': 7.28.5 - '@babel/parser': 7.28.5 - '@istanbuljs/schema': 0.1.3 - istanbul-lib-coverage: 3.2.2 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - istanbul-lib-instrument@6.0.3: dependencies: '@babel/core': 7.28.5 @@ -18426,29 +18257,6 @@ snapshots: transitivePeerDependencies: - supports-color - istanbul-lib-report@3.0.1: - dependencies: - istanbul-lib-coverage: 3.2.2 - make-dir: 4.0.0 - supports-color: 7.2.0 - - istanbul-lib-source-maps@4.0.1: - dependencies: - debug: 4.4.0 - istanbul-lib-coverage: 3.2.2 - source-map: 0.6.1 - transitivePeerDependencies: - - supports-color - - istanbul-reports@3.1.7: - dependencies: - html-escaper: 2.0.2 - istanbul-lib-report: 3.0.1 - - jasmine-core@4.6.1: {} - - jasmine-core@5.13.0: {} - jest-diff@30.2.0: dependencies: '@jest/diff-sequences': 30.0.1 @@ -18544,32 +18352,6 @@ snapshots: jsonparse@1.3.1: {} - karma-chrome-launcher@3.2.0: - dependencies: - which: 1.3.1 - - karma-coverage@2.2.1: - dependencies: - istanbul-lib-coverage: 3.2.2 - istanbul-lib-instrument: 5.2.1 - istanbul-lib-report: 3.0.1 - istanbul-lib-source-maps: 4.0.1 - istanbul-reports: 3.1.7 - minimatch: 3.1.2 - transitivePeerDependencies: - - supports-color - - karma-jasmine-html-reporter@2.1.0(jasmine-core@5.13.0)(karma-jasmine@5.1.0(karma@6.4.4))(karma@6.4.4): - dependencies: - jasmine-core: 5.13.0 - karma: 6.4.4 - karma-jasmine: 5.1.0(karma@6.4.4) - - karma-jasmine@5.1.0(karma@6.4.4): - dependencies: - jasmine-core: 4.6.1 - karma: 6.4.4 - karma-source-map-support@1.4.0: dependencies: source-map-support: 0.5.21 @@ -18605,6 +18387,7 @@ snapshots: - debug - supports-color - utf-8-validate + optional: true keyv@4.5.4: dependencies: @@ -18838,6 +18621,7 @@ snapshots: streamroller: 3.1.5 transitivePeerDependencies: - supports-color + optional: true lru-cache@11.0.2: {} @@ -18876,10 +18660,6 @@ snapshots: semver: 5.7.2 optional: true - make-dir@4.0.0: - dependencies: - semver: 7.7.3 - make-fetch-happen@15.0.3: dependencies: '@npmcli/agent': 4.0.0 @@ -18961,7 +18741,8 @@ snapshots: mime@1.6.0: {} - mime@2.6.0: {} + mime@2.6.0: + optional: true mimic-fn@2.1.0: {} @@ -19036,6 +18817,7 @@ snapshots: mkdirp@0.5.6: dependencies: minimist: 1.2.8 + optional: true mkdirp@3.0.1: {} @@ -19052,7 +18834,8 @@ snapshots: ms@2.0.0: {} - ms@2.1.2: {} + ms@2.1.2: + optional: true ms@2.1.3: {} @@ -19308,6 +19091,7 @@ snapshots: on-finished@2.3.0: dependencies: ee-first: 1.1.1 + optional: true on-finished@2.4.1: dependencies: @@ -19657,11 +19441,13 @@ snapshots: punycode.js@2.3.1: {} - punycode@1.4.1: {} + punycode@1.4.1: + optional: true punycode@2.3.1: {} - qjobs@1.2.0: {} + qjobs@1.2.0: + optional: true qs@6.13.0: dependencies: @@ -19864,6 +19650,7 @@ snapshots: rimraf@3.0.2: dependencies: glob: 7.2.3 + optional: true rimraf@6.1.2: dependencies: @@ -19964,6 +19751,7 @@ snapshots: call-bound: 1.0.3 es-errors: 1.3.0 is-regex: 1.2.1 + optional: true safer-buffer@2.1.2: {} @@ -20249,6 +20037,7 @@ snapshots: - bufferutil - supports-color - utf-8-validate + optional: true socket.io-parser@4.2.4: dependencies: @@ -20256,6 +20045,7 @@ snapshots: debug: 4.3.6 transitivePeerDependencies: - supports-color + optional: true socket.io@4.8.1: dependencies: @@ -20270,6 +20060,7 @@ snapshots: - bufferutil - supports-color - utf-8-validate + optional: true sockjs@0.3.24: dependencies: @@ -20392,6 +20183,7 @@ snapshots: fs-extra: 8.1.0 transitivePeerDependencies: - supports-color + optional: true string-argv@0.3.2: {} @@ -20699,7 +20491,8 @@ snapshots: typescript@5.9.3: {} - ua-parser-js@0.7.40: {} + ua-parser-js@0.7.40: + optional: true uc.micro@2.1.0: {} @@ -20935,7 +20728,8 @@ snapshots: - tsx - yaml - void-elements@2.0.1: {} + void-elements@2.0.1: + optional: true vscode-uri@3.0.8: {} @@ -21160,7 +20954,8 @@ snapshots: wrappy@1.0.2: {} - ws@8.17.1: {} + ws@8.17.1: + optional: true ws@8.18.3: {} @@ -21197,7 +20992,8 @@ snapshots: yaml@2.6.1: {} - yargs-parser@20.2.9: {} + yargs-parser@20.2.9: + optional: true yargs-parser@21.1.1: {} @@ -21212,6 +21008,7 @@ snapshots: string-width: 4.2.3 y18n: 5.0.8 yargs-parser: 20.2.9 + optional: true yargs@17.7.2: dependencies: @@ -21256,4 +21053,5 @@ snapshots: zod@4.3.5: {} - zone.js@0.16.0: {} + zone.js@0.16.0: + optional: true From 1c22294a1dc887cfff83d094ed54ae8dfa48ce9a Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 18 Jan 2026 12:09:08 +0000 Subject: [PATCH 20/28] ci: apply automated fixes --- examples/angular/basic-app-table/AGENTS.md | 1 - .../angular/basic-app-table/tsconfig.app.json | 8 +- examples/angular/basic/src/main.ts | 8 +- examples/angular/basic/tsconfig.app.json | 8 +- .../angular/column-ordering/tsconfig.app.json | 8 +- .../column-pinning-sticky/src/app/app.html | 36 ++----- .../column-pinning-sticky/tsconfig.app.json | 8 +- .../angular/column-pinning/src/app/app.html | 61 +++--------- .../angular/column-pinning/tsconfig.app.json | 8 +- .../tsconfig.app.json | 8 +- .../column-visibility/tsconfig.app.json | 8 +- .../products-table/products-table.html | 96 ++++++++----------- .../components/users-table/users-table.html | 96 ++++++++----------- .../composable-tables/tsconfig.app.json | 8 +- examples/angular/editable/tsconfig.app.json | 8 +- examples/angular/expanding/src/app/app.html | 11 +-- examples/angular/expanding/tsconfig.app.json | 8 +- examples/angular/filters/src/app/app.html | 1 - examples/angular/filters/tsconfig.app.json | 8 +- examples/angular/grouping/src/app/app.html | 8 +- examples/angular/grouping/src/index.html | 5 +- examples/angular/grouping/tsconfig.app.json | 8 +- examples/angular/remote-data/src/app/app.html | 16 +--- examples/angular/row-dnd/tsconfig.app.json | 8 +- .../src/app/app.component.html | 27 ++---- .../angular/row-selection/src/app/app.html | 1 - .../angular/row-selection/tsconfig.app.json | 8 +- .../angular/signal-input/src/app/app.html | 12 +-- .../src/app/person-table/person-table.html | 17 +--- examples/angular/signal-input/src/index.html | 5 +- .../angular/signal-input/tsconfig.app.json | 8 +- .../angular/sub-components/src/app/app.html | 6 +- .../angular/sub-components/tsconfig.app.json | 8 +- 33 files changed, 162 insertions(+), 373 deletions(-) diff --git a/examples/angular/basic-app-table/AGENTS.md b/examples/angular/basic-app-table/AGENTS.md index 34c3b3601d..676c86307e 100644 --- a/examples/angular/basic-app-table/AGENTS.md +++ b/examples/angular/basic-app-table/AGENTS.md @@ -1,4 +1,3 @@ - You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices. ## TypeScript Best Practices diff --git a/examples/angular/basic-app-table/tsconfig.app.json b/examples/angular/basic-app-table/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/basic-app-table/tsconfig.app.json +++ b/examples/angular/basic-app-table/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/basic/src/main.ts b/examples/angular/basic/src/main.ts index 190f3418d4..8192dca694 100644 --- a/examples/angular/basic/src/main.ts +++ b/examples/angular/basic/src/main.ts @@ -1,5 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { appConfig } from './app/app.config'; -import { App } from './app/app'; +import { bootstrapApplication } from '@angular/platform-browser' +import { appConfig } from './app/app.config' +import { App } from './app/app' -bootstrapApplication(App, appConfig).catch((err) => console.error(err)); +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) diff --git a/examples/angular/basic/tsconfig.app.json b/examples/angular/basic/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/basic/tsconfig.app.json +++ b/examples/angular/basic/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/column-ordering/tsconfig.app.json b/examples/angular/column-ordering/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/column-ordering/tsconfig.app.json +++ b/examples/angular/column-ordering/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/column-pinning-sticky/src/app/app.html b/examples/angular/column-pinning-sticky/src/app/app.html index 7b2e6eaa06..f723b87c0f 100644 --- a/examples/angular/column-pinning-sticky/src/app/app.html +++ b/examples/angular/column-pinning-sticky/src/app/app.html @@ -29,9 +29,7 @@
- +
@@ -42,10 +40,7 @@ @for (header of headerGroup.headers; track header.id) { - +
@if (!header.isPlaceholder) { } - {{ - header.column.getIndex( - header.column.getIsPinned() || 'center' - ) - }} + {{ header.column.getIndex(header.column.getIsPinned() || 'center') }}
@if (!header.isPlaceholder && header.column.getCanPin()) {
@if (header.column.getIsPinned() !== 'left') { - } @if (header.column.getIsPinned()) { - } @if (header.column.getIsPinned() !== 'right') { - } @@ -116,11 +98,7 @@ @for (cell of row.getVisibleCells(); track cell.id) { {{ cellValue }} diff --git a/examples/angular/column-pinning-sticky/tsconfig.app.json b/examples/angular/column-pinning-sticky/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/column-pinning-sticky/tsconfig.app.json +++ b/examples/angular/column-pinning-sticky/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/column-pinning/src/app/app.html b/examples/angular/column-pinning/src/app/app.html index e002af2b70..4bf5716c34 100644 --- a/examples/angular/column-pinning/src/app/app.html +++ b/examples/angular/column-pinning/src/app/app.html @@ -29,19 +29,12 @@
- +
@@ -51,10 +44,7 @@ @if (split()) { - @for ( - headerGroup of table.getLeftHeaderGroups(); - track headerGroup.id - ) { + @for (headerGroup of table.getLeftHeaderGroups(); track headerGroup.id) { @for (header of headerGroup.headers; track header.id) { } @@ -109,10 +96,7 @@
@@ -73,10 +63,7 @@
- @if ( - split() ? table.getCenterHeaderGroups() : table.getHeaderGroups(); - as headerGroups - ) { + @if (split() ? table.getCenterHeaderGroups() : table.getHeaderGroups(); as headerGroups) { @for (headerGroup of headerGroups; track headerGroup.id) { @for (header of headerGroup.headers; track header.id) { @@ -131,10 +115,7 @@ } @@ -145,10 +126,7 @@ @for (row of table.getRowModel().rows | slice: 0 : 20; track row.id) { - @if ( - split() ? row.getCenterVisibleCells() : row.getVisibleCells(); - as cells - ) { + @if (split() ? row.getCenterVisibleCells() : row.getVisibleCells(); as cells) { @for (cell of cells; track cell.id) { - +
@@ -173,10 +151,7 @@ @if (split()) { - @for ( - headerGroup of table.getRightHeaderGroups(); - track headerGroup.id - ) { + @for (headerGroup of table.getRightHeaderGroups(); track headerGroup.id) { @for (header of headerGroup.headers; track header.id) { } @@ -237,24 +209,15 @@ @if (!header.isPlaceholder && header.column.getCanPin()) {
@if (header.column.getIsPinned() !== 'left') { - + } @if (header.column.getIsPinned()) { - + } @if (header.column.getIsPinned() !== 'right') { - + }
} diff --git a/examples/angular/column-pinning/tsconfig.app.json b/examples/angular/column-pinning/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/column-pinning/tsconfig.app.json +++ b/examples/angular/column-pinning/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/column-resizing-performant/tsconfig.app.json b/examples/angular/column-resizing-performant/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/column-resizing-performant/tsconfig.app.json +++ b/examples/angular/column-resizing-performant/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/column-visibility/tsconfig.app.json b/examples/angular/column-visibility/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/column-visibility/tsconfig.app.json +++ b/examples/angular/column-visibility/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/composable-tables/src/app/components/products-table/products-table.html b/examples/angular/composable-tables/src/app/components/products-table/products-table.html index 03bf24a5b8..48c92ec937 100644 --- a/examples/angular/composable-tables/src/app/components/products-table/products-table.html +++ b/examples/angular/composable-tables/src/app/components/products-table/products-table.html @@ -1,76 +1,64 @@
@@ -195,10 +170,7 @@
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) { - - @for (_header of headerGroup.headers; track _header.id) { @let header = - table.appHeader(_header); @if (!header.isPlaceholder) { - + @for (_header of headerGroup.headers; track _header.id) { + @let header = table.appHeader(_header); + @if (!header.isPlaceholder) { + - } } - + +
+ + + } + } + } @for (row of table.getRowModel().rows; track row.id) { - - @for (cell of row.getAllCells(); track cell.id) { - - } - + + @for (cell of row.getAllCells(); track cell.id) { + + } + } @for (footerGroup of table.getFooterGroups(); track footerGroup.id) { - - @for (footer of footerGroup.headers; track footer.id) { - + @for (footer of footerGroup.headers; track footer.id) { + } - - } - + }
- - {{ header }} - +
+ + {{ header }} + - -
- + +
+ - -
- -
- - {{ cell }} - -
+ + {{ cell }} + +
- @if (!footer.isPlaceholder) { - - {{ footer }} - +
+ @if (!footer.isPlaceholder) { + + {{ footer }} + + } +
diff --git a/examples/angular/composable-tables/src/app/components/users-table/users-table.html b/examples/angular/composable-tables/src/app/components/users-table/users-table.html index ad811b75d9..579ce256ee 100644 --- a/examples/angular/composable-tables/src/app/components/users-table/users-table.html +++ b/examples/angular/composable-tables/src/app/components/users-table/users-table.html @@ -1,76 +1,64 @@
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) { - - @for (_header of headerGroup.headers; track _header.id) { @let header = - table.appHeader(_header); @if (!header.isPlaceholder) { - + @for (_header of headerGroup.headers; track _header.id) { + @let header = table.appHeader(_header); + @if (!header.isPlaceholder) { + - } } - + +
+ + + } + } + } @for (row of table.getRowModel().rows; track row.id) { - - @for (cell of row.getAllCells(); track cell.id) { - - } - + + @for (cell of row.getAllCells(); track cell.id) { + + } + } @for (footerGroup of table.getFooterGroups(); track footerGroup.id) { - - @for (footer of footerGroup.headers; track footer.id) { - + @for (footer of footerGroup.headers; track footer.id) { + } - - } - + }
- - {{ header }} - +
+ + {{ header }} + - -
- + +
+ - -
- -
- - {{ cell }} - -
+ + {{ cell }} + +
- @if (!footer.isPlaceholder) { - - {{ footer }} - +
+ @if (!footer.isPlaceholder) { + + {{ footer }} + + } +
diff --git a/examples/angular/composable-tables/tsconfig.app.json b/examples/angular/composable-tables/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/composable-tables/tsconfig.app.json +++ b/examples/angular/composable-tables/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/editable/tsconfig.app.json b/examples/angular/editable/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/editable/tsconfig.app.json +++ b/examples/angular/editable/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/expanding/src/app/app.html b/examples/angular/expanding/src/app/app.html index eda9af7f2e..e6a5bcdb0d 100644 --- a/examples/angular/expanding/src/app/app.html +++ b/examples/angular/expanding/src/app/app.html @@ -30,11 +30,7 @@ @for (cell of row.getAllCells(); track cell.id) {
@@ -93,10 +89,7 @@ /> - @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) { } diff --git a/examples/angular/expanding/tsconfig.app.json b/examples/angular/expanding/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/expanding/tsconfig.app.json +++ b/examples/angular/expanding/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/filters/src/app/app.html b/examples/angular/filters/src/app/app.html index dce73065aa..6807ca10ba 100644 --- a/examples/angular/filters/src/app/app.html +++ b/examples/angular/filters/src/app/app.html @@ -111,4 +111,3 @@ 
{{ stringifiedFilters() }}
- diff --git a/examples/angular/filters/tsconfig.app.json b/examples/angular/filters/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/filters/tsconfig.app.json +++ b/examples/angular/filters/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/grouping/src/app/app.html b/examples/angular/grouping/src/app/app.html index f66e3c78f8..7e51a6e50f 100644 --- a/examples/angular/grouping/src/app/app.html +++ b/examples/angular/grouping/src/app/app.html @@ -53,9 +53,7 @@ > {{ row.getIsExpanded() ? '👇 ' : '👉' }} - + {{ cell }} {{ ' ' }}{{ row.subRows.length }} @@ -75,9 +73,7 @@ } @else { - + {{ cell }} } diff --git a/examples/angular/grouping/src/index.html b/examples/angular/grouping/src/index.html index af6a41707a..5a88f5d359 100644 --- a/examples/angular/grouping/src/index.html +++ b/examples/angular/grouping/src/index.html @@ -7,10 +7,7 @@ - + diff --git a/examples/angular/grouping/tsconfig.app.json b/examples/angular/grouping/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/grouping/tsconfig.app.json +++ b/examples/angular/grouping/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/remote-data/src/app/app.html b/examples/angular/remote-data/src/app/app.html index d9778e2392..f0544dc952 100644 --- a/examples/angular/remote-data/src/app/app.html +++ b/examples/angular/remote-data/src/app/app.html @@ -17,10 +17,7 @@ (click)="header.column.getToggleSortingHandler()?.($event)" > @if (!header.isPlaceholder) { -
+
@@ -119,10 +112,7 @@ /> - @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) { } diff --git a/examples/angular/row-dnd/tsconfig.app.json b/examples/angular/row-dnd/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/row-dnd/tsconfig.app.json +++ b/examples/angular/row-dnd/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/row-selection-signal/src/app/app.component.html b/examples/angular/row-selection-signal/src/app/app.component.html index 5a1e9827ee..7e844208a8 100644 --- a/examples/angular/row-selection-signal/src/app/app.component.html +++ b/examples/angular/row-selection-signal/src/app/app.component.html @@ -21,10 +21,7 @@ @if (header.column.getCanFilter()) {
- +
} } @@ -39,11 +36,7 @@ @for (cell of row.getVisibleCells(); track cell.id) {
{{ renderCell }} @@ -62,9 +55,7 @@ (change)="table.toggleAllPageRowsSelected()" /> - Page Rows ({{ table.getRowModel().rows.length }}) - Page Rows ({{ table.getRowModel().rows.length }})
@@ -116,10 +107,7 @@ /> - @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) { } @@ -127,15 +115,12 @@

- {{ rowSelectionLength() }} of - {{ table.getPreFilteredRowModel().rows.length }} Total Rows + {{ rowSelectionLength() }} of {{ table.getPreFilteredRowModel().rows.length }} Total Rows

- +
- diff --git a/examples/angular/row-selection/tsconfig.app.json b/examples/angular/row-selection/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/row-selection/tsconfig.app.json +++ b/examples/angular/row-selection/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/signal-input/src/app/app.html b/examples/angular/signal-input/src/app/app.html index c55dcbfe3a..47cfbecbdb 100644 --- a/examples/angular/signal-input/src/app/app.html +++ b/examples/angular/signal-input/src/app/app.html @@ -3,16 +3,10 @@
- + - + - +
diff --git a/examples/angular/signal-input/src/app/person-table/person-table.html b/examples/angular/signal-input/src/app/person-table/person-table.html index a4c4b9e3d4..ae0eae9b72 100644 --- a/examples/angular/signal-input/src/app/person-table/person-table.html +++ b/examples/angular/signal-input/src/app/person-table/person-table.html @@ -6,11 +6,7 @@ @if (!header.isPlaceholder) { {{ header }} @@ -26,11 +22,7 @@ @for (cell of row.getVisibleCells(); track cell.id) { {{ cell }} @@ -88,10 +80,7 @@ /> - @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) { } diff --git a/examples/angular/signal-input/src/index.html b/examples/angular/signal-input/src/index.html index 462fb62e4c..1d83676a4c 100644 --- a/examples/angular/signal-input/src/index.html +++ b/examples/angular/signal-input/src/index.html @@ -7,10 +7,7 @@ - + diff --git a/examples/angular/signal-input/tsconfig.app.json b/examples/angular/signal-input/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/signal-input/tsconfig.app.json +++ b/examples/angular/signal-input/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } diff --git a/examples/angular/sub-components/src/app/app.html b/examples/angular/sub-components/src/app/app.html index 1dae2ee1a4..0ffb0e3046 100644 --- a/examples/angular/sub-components/src/app/app.html +++ b/examples/angular/sub-components/src/app/app.html @@ -22,9 +22,7 @@ @for (cell of row.getVisibleCells(); track cell.id) { - +
@@ -35,7 +33,7 @@ - + } diff --git a/examples/angular/sub-components/tsconfig.app.json b/examples/angular/sub-components/tsconfig.app.json index 264f459bf8..a0dcc37c60 100644 --- a/examples/angular/sub-components/tsconfig.app.json +++ b/examples/angular/sub-components/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "include": [ - "src/**/*.ts" - ], - "exclude": [ - "src/**/*.spec.ts" - ] + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] } From 0d92528e05b38d845e14c750e909e116984c4e16 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 13:23:19 +0100 Subject: [PATCH 21/28] chore(angular): add lint script --- examples/angular/basic/package.json | 3 ++- examples/angular/basic/src/app/app.ts | 2 +- examples/angular/column-ordering/package.json | 1 + examples/angular/column-pinning-sticky/package.json | 1 + examples/angular/column-pinning/package.json | 1 + .../angular/column-resizing-performant/package.json | 1 + .../column-resizing-performant/src/app/makeData.ts | 12 ++++++------ examples/angular/column-visibility/package.json | 1 + examples/angular/editable/package.json | 1 + examples/angular/editable/src/app/makeData.ts | 12 ++++++------ examples/angular/expanding/package.json | 1 + examples/angular/expanding/src/app/makeData.ts | 12 ++++++------ examples/angular/filters/package.json | 1 + examples/angular/remote-data/package.json | 1 + examples/angular/remote-data/src/server.ts | 2 +- examples/angular/row-dnd/src/app/makeData.ts | 12 ++++++------ .../angular/row-selection-signal/src/app/filter.ts | 4 ++-- .../angular/sub-components/src/app/app.config.ts | 2 +- .../sub-components/src/app/expandable-cell.ts | 9 ++++----- examples/angular/sub-components/src/app/makeData.ts | 12 ++++++------ 20 files changed, 50 insertions(+), 41 deletions(-) diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json index 4531da83dd..ffdacb41db 100644 --- a/examples/angular/basic/package.json +++ b/examples/angular/basic/package.json @@ -5,7 +5,8 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "watch": "ng build --watch --configuration development" + "watch": "ng build --watch --configuration development", + "lint": "eslint ./src" }, "private": true, "packageManager": "pnpm@9.15.0", diff --git a/examples/angular/basic/src/app/app.ts b/examples/angular/basic/src/app/app.ts index 056f6982f7..e85d051a9d 100644 --- a/examples/angular/basic/src/app/app.ts +++ b/examples/angular/basic/src/app/app.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core' -import type { ColumnDef } from '@tanstack/angular-table' import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table' +import type { ColumnDef } from '@tanstack/angular-table' // This example uses the classic standalone `injectTable` hook to create a table without the new `createTableHook` util. diff --git a/examples/angular/column-ordering/package.json b/examples/angular/column-ordering/package.json index 04f8e92678..5eaf42db0b 100644 --- a/examples/angular/column-ordering/package.json +++ b/examples/angular/column-ordering/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "lint": "eslint ./src", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/examples/angular/column-pinning-sticky/package.json b/examples/angular/column-pinning-sticky/package.json index f8cfa0754f..50fe08838c 100644 --- a/examples/angular/column-pinning-sticky/package.json +++ b/examples/angular/column-pinning-sticky/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "lint": "eslint ./src", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/examples/angular/column-pinning/package.json b/examples/angular/column-pinning/package.json index 21af59854d..94f785216f 100644 --- a/examples/angular/column-pinning/package.json +++ b/examples/angular/column-pinning/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "lint": "eslint ./src", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/examples/angular/column-resizing-performant/package.json b/examples/angular/column-resizing-performant/package.json index 82b819ac90..d00c36bf05 100644 --- a/examples/angular/column-resizing-performant/package.json +++ b/examples/angular/column-resizing-performant/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "lint": "eslint ./src", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/examples/angular/column-resizing-performant/src/app/makeData.ts b/examples/angular/column-resizing-performant/src/app/makeData.ts index 331dd1eb19..b9fb014aba 100644 --- a/examples/angular/column-resizing-performant/src/app/makeData.ts +++ b/examples/angular/column-resizing-performant/src/app/makeData.ts @@ -7,11 +7,11 @@ export type Person = { visits: number progress: number status: 'relationship' | 'complicated' | 'single' - subRows?: Person[] + subRows?: Array } const range = (len: number) => { - const arr: number[] = [] + const arr: Array = [] for (let i = 0; i < len; i++) { arr.push(i) } @@ -29,13 +29,13 @@ const newPerson = (): Person => { 'relationship', 'complicated', 'single', - ])[0]!, + ])[0], } } -export function makeData(...lens: number[]) { - const makeDataLevel = (depth = 0): Person[] => { - const len = lens[depth]! +export function makeData(...lens: Array) { + const makeDataLevel = (depth = 0): Array => { + const len = lens[depth] return range(len).map((d): Person => { return { ...newPerson(), diff --git a/examples/angular/column-visibility/package.json b/examples/angular/column-visibility/package.json index 749a327bf3..fd379237a6 100644 --- a/examples/angular/column-visibility/package.json +++ b/examples/angular/column-visibility/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "lint": "eslint ./src", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/examples/angular/editable/package.json b/examples/angular/editable/package.json index f97400e52f..324026cbc5 100644 --- a/examples/angular/editable/package.json +++ b/examples/angular/editable/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "lint": "eslint ./src", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/examples/angular/editable/src/app/makeData.ts b/examples/angular/editable/src/app/makeData.ts index 331dd1eb19..b9fb014aba 100644 --- a/examples/angular/editable/src/app/makeData.ts +++ b/examples/angular/editable/src/app/makeData.ts @@ -7,11 +7,11 @@ export type Person = { visits: number progress: number status: 'relationship' | 'complicated' | 'single' - subRows?: Person[] + subRows?: Array } const range = (len: number) => { - const arr: number[] = [] + const arr: Array = [] for (let i = 0; i < len; i++) { arr.push(i) } @@ -29,13 +29,13 @@ const newPerson = (): Person => { 'relationship', 'complicated', 'single', - ])[0]!, + ])[0], } } -export function makeData(...lens: number[]) { - const makeDataLevel = (depth = 0): Person[] => { - const len = lens[depth]! +export function makeData(...lens: Array) { + const makeDataLevel = (depth = 0): Array => { + const len = lens[depth] return range(len).map((d): Person => { return { ...newPerson(), diff --git a/examples/angular/expanding/package.json b/examples/angular/expanding/package.json index d30032a786..56039bdec0 100644 --- a/examples/angular/expanding/package.json +++ b/examples/angular/expanding/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "lint": "eslint ./src", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/examples/angular/expanding/src/app/makeData.ts b/examples/angular/expanding/src/app/makeData.ts index 331dd1eb19..b9fb014aba 100644 --- a/examples/angular/expanding/src/app/makeData.ts +++ b/examples/angular/expanding/src/app/makeData.ts @@ -7,11 +7,11 @@ export type Person = { visits: number progress: number status: 'relationship' | 'complicated' | 'single' - subRows?: Person[] + subRows?: Array } const range = (len: number) => { - const arr: number[] = [] + const arr: Array = [] for (let i = 0; i < len; i++) { arr.push(i) } @@ -29,13 +29,13 @@ const newPerson = (): Person => { 'relationship', 'complicated', 'single', - ])[0]!, + ])[0], } } -export function makeData(...lens: number[]) { - const makeDataLevel = (depth = 0): Person[] => { - const len = lens[depth]! +export function makeData(...lens: Array) { + const makeDataLevel = (depth = 0): Array => { + const len = lens[depth] return range(len).map((d): Person => { return { ...newPerson(), diff --git a/examples/angular/filters/package.json b/examples/angular/filters/package.json index df371c95d9..c7bb12125f 100644 --- a/examples/angular/filters/package.json +++ b/examples/angular/filters/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "lint": "eslint ./src", "watch": "ng build --watch --configuration development" }, "private": true, diff --git a/examples/angular/remote-data/package.json b/examples/angular/remote-data/package.json index fbc2b80049..28ad2f4c2a 100644 --- a/examples/angular/remote-data/package.json +++ b/examples/angular/remote-data/package.json @@ -8,6 +8,7 @@ "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", + "lint": "eslint ./src", "serve:ssr:remote-data": "node dist/remote-data/server/server.mjs" }, "private": true, diff --git a/examples/angular/remote-data/src/server.ts b/examples/angular/remote-data/src/server.ts index 1a2d256db0..62db1a15fd 100644 --- a/examples/angular/remote-data/src/server.ts +++ b/examples/angular/remote-data/src/server.ts @@ -1,3 +1,4 @@ +import { join } from 'node:path' import { AngularNodeAppEngine, createNodeRequestHandler, @@ -5,7 +6,6 @@ import { writeResponseToNodeResponse, } from '@angular/ssr/node' import express from 'express' -import { join } from 'node:path' const browserDistFolder = join(import.meta.dirname, '../browser') diff --git a/examples/angular/row-dnd/src/app/makeData.ts b/examples/angular/row-dnd/src/app/makeData.ts index 26b666d2ae..e2103d2b87 100644 --- a/examples/angular/row-dnd/src/app/makeData.ts +++ b/examples/angular/row-dnd/src/app/makeData.ts @@ -8,11 +8,11 @@ export type Person = { visits: number progress: number status: 'relationship' | 'complicated' | 'single' - subRows?: Person[] + subRows?: Array } const range = (len: number) => { - const arr: number[] = [] + const arr: Array = [] for (let i = 0; i < len; i++) { arr.push(i) } @@ -31,13 +31,13 @@ const newPerson = (): Person => { 'relationship', 'complicated', 'single', - ])[0]!, + ])[0], } } -export function makeData(...lens: number[]) { - const makeDataLevel = (depth = 0): Person[] => { - const len = lens[depth]! +export function makeData(...lens: Array) { + const makeDataLevel = (depth = 0): Array => { + const len = lens[depth] return range(len).map((_d): Person => { return { ...newPerson(), diff --git a/examples/angular/row-selection-signal/src/app/filter.ts b/examples/angular/row-selection-signal/src/app/filter.ts index f2a33d71dc..3ae225f17e 100644 --- a/examples/angular/row-selection-signal/src/app/filter.ts +++ b/examples/angular/row-selection-signal/src/app/filter.ts @@ -50,13 +50,13 @@ export class FilterComponent implements OnInit { } getMinValue() { - const minValue = this.column().getFilterValue() as any + const minValue = this.column().getFilterValue() return (minValue?.[0] ?? '') as string } getMaxValue() { - const maxValue = this.column().getFilterValue() as any + const maxValue = this.column().getFilterValue() return (maxValue?.[1] ?? '') as string } diff --git a/examples/angular/sub-components/src/app/app.config.ts b/examples/angular/sub-components/src/app/app.config.ts index f27099f33c..f997e614ac 100644 --- a/examples/angular/sub-components/src/app/app.config.ts +++ b/examples/angular/sub-components/src/app/app.config.ts @@ -1,4 +1,4 @@ -import { ApplicationConfig } from '@angular/core' +import type { ApplicationConfig } from '@angular/core' export const appConfig: ApplicationConfig = { providers: [], diff --git a/examples/angular/sub-components/src/app/expandable-cell.ts b/examples/angular/sub-components/src/app/expandable-cell.ts index 0959e3ae9f..65e9c17df3 100644 --- a/examples/angular/sub-components/src/app/expandable-cell.ts +++ b/examples/angular/sub-components/src/app/expandable-cell.ts @@ -5,12 +5,11 @@ import { output, } from '@angular/core' import { - type HeaderContext, - injectFlexRenderContext, - type Table, - CellContext, - RowData, + injectFlexRenderContext } from '@tanstack/angular-table' +import type { + CellContext, + RowData} from '@tanstack/angular-table'; @Component({ standalone: true, diff --git a/examples/angular/sub-components/src/app/makeData.ts b/examples/angular/sub-components/src/app/makeData.ts index 331dd1eb19..b9fb014aba 100644 --- a/examples/angular/sub-components/src/app/makeData.ts +++ b/examples/angular/sub-components/src/app/makeData.ts @@ -7,11 +7,11 @@ export type Person = { visits: number progress: number status: 'relationship' | 'complicated' | 'single' - subRows?: Person[] + subRows?: Array } const range = (len: number) => { - const arr: number[] = [] + const arr: Array = [] for (let i = 0; i < len; i++) { arr.push(i) } @@ -29,13 +29,13 @@ const newPerson = (): Person => { 'relationship', 'complicated', 'single', - ])[0]!, + ])[0], } } -export function makeData(...lens: number[]) { - const makeDataLevel = (depth = 0): Person[] => { - const len = lens[depth]! +export function makeData(...lens: Array) { + const makeDataLevel = (depth = 0): Array => { + const len = lens[depth] return range(len).map((d): Person => { return { ...newPerson(), From c641c3b2efaad0dbd420df107c6f32cbafde4edf Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 18 Jan 2026 12:24:40 +0000 Subject: [PATCH 22/28] ci: apply automated fixes --- .../angular/sub-components/src/app/expandable-cell.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/examples/angular/sub-components/src/app/expandable-cell.ts b/examples/angular/sub-components/src/app/expandable-cell.ts index 65e9c17df3..63f8d5bab7 100644 --- a/examples/angular/sub-components/src/app/expandable-cell.ts +++ b/examples/angular/sub-components/src/app/expandable-cell.ts @@ -4,12 +4,8 @@ import { input, output, } from '@angular/core' -import { - injectFlexRenderContext -} from '@tanstack/angular-table' -import type { - CellContext, - RowData} from '@tanstack/angular-table'; +import { injectFlexRenderContext } from '@tanstack/angular-table' +import type { CellContext, RowData } from '@tanstack/angular-table' @Component({ standalone: true, From 6e49787db75a1189158bf99e0e5891a6bd3df7cc Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 15:03:03 +0100 Subject: [PATCH 23/28] add density plugin --- examples/angular/custom-plugin/.gitignore | 44 ++++++++ .../custom-plugin/.vscode/extensions.json | 4 + .../angular/custom-plugin/.vscode/launch.json | 13 +++ .../angular/custom-plugin/.vscode/mcp.json | 9 ++ .../angular/custom-plugin/.vscode/tasks.json | 24 +++++ examples/angular/custom-plugin/README.md | 59 +++++++++++ examples/angular/custom-plugin/angular.json | 99 ++++++++++++++++++ examples/angular/custom-plugin/package.json | 30 ++++++ .../angular/custom-plugin/public/favicon.ico | Bin 0 -> 15086 bytes .../custom-plugin/src/app/app.config.ts | 7 ++ examples/angular/custom-plugin/src/app/app.ts | 79 ++++++++++++++ examples/angular/custom-plugin/src/index.html | 14 +++ examples/angular/custom-plugin/src/main.ts | 6 ++ examples/angular/custom-plugin/src/styles.css | 34 ++++++ .../angular/custom-plugin/tsconfig.app.json | 11 ++ examples/angular/custom-plugin/tsconfig.json | 24 +++++ 16 files changed, 457 insertions(+) create mode 100644 examples/angular/custom-plugin/.gitignore create mode 100644 examples/angular/custom-plugin/.vscode/extensions.json create mode 100644 examples/angular/custom-plugin/.vscode/launch.json create mode 100644 examples/angular/custom-plugin/.vscode/mcp.json create mode 100644 examples/angular/custom-plugin/.vscode/tasks.json create mode 100644 examples/angular/custom-plugin/README.md create mode 100644 examples/angular/custom-plugin/angular.json create mode 100644 examples/angular/custom-plugin/package.json create mode 100644 examples/angular/custom-plugin/public/favicon.ico create mode 100644 examples/angular/custom-plugin/src/app/app.config.ts create mode 100644 examples/angular/custom-plugin/src/app/app.ts create mode 100644 examples/angular/custom-plugin/src/index.html create mode 100644 examples/angular/custom-plugin/src/main.ts create mode 100644 examples/angular/custom-plugin/src/styles.css create mode 100644 examples/angular/custom-plugin/tsconfig.app.json create mode 100644 examples/angular/custom-plugin/tsconfig.json diff --git a/examples/angular/custom-plugin/.gitignore b/examples/angular/custom-plugin/.gitignore new file mode 100644 index 0000000000..854acd5fc0 --- /dev/null +++ b/examples/angular/custom-plugin/.gitignore @@ -0,0 +1,44 @@ +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/mcp.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings +__screenshots__/ + +# System files +.DS_Store +Thumbs.db diff --git a/examples/angular/custom-plugin/.vscode/extensions.json b/examples/angular/custom-plugin/.vscode/extensions.json new file mode 100644 index 0000000000..77b374577d --- /dev/null +++ b/examples/angular/custom-plugin/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 + "recommendations": ["angular.ng-template"] +} diff --git a/examples/angular/custom-plugin/.vscode/launch.json b/examples/angular/custom-plugin/.vscode/launch.json new file mode 100644 index 0000000000..f30a599183 --- /dev/null +++ b/examples/angular/custom-plugin/.vscode/launch.json @@ -0,0 +1,13 @@ +{ + // 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/" + } + ] +} diff --git a/examples/angular/custom-plugin/.vscode/mcp.json b/examples/angular/custom-plugin/.vscode/mcp.json new file mode 100644 index 0000000000..bf4004da94 --- /dev/null +++ b/examples/angular/custom-plugin/.vscode/mcp.json @@ -0,0 +1,9 @@ +{ + // For more information, visit: https://angular.dev/ai/mcp + "mcpServers": { + "angular-cli": { + "command": "npx", + "args": ["-y", "@angular/cli", "mcp"] + } + } +} diff --git a/examples/angular/custom-plugin/.vscode/tasks.json b/examples/angular/custom-plugin/.vscode/tasks.json new file mode 100644 index 0000000000..a471b2ac28 --- /dev/null +++ b/examples/angular/custom-plugin/.vscode/tasks.json @@ -0,0 +1,24 @@ +{ + // 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": "Changes detected" + }, + "endsPattern": { + "regexp": "bundle generation (complete|failed)" + } + } + } + } + ] +} diff --git a/examples/angular/custom-plugin/README.md b/examples/angular/custom-plugin/README.md new file mode 100644 index 0000000000..7ba2b2ea74 --- /dev/null +++ b/examples/angular/custom-plugin/README.md @@ -0,0 +1,59 @@ +# CustomPlugin + +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0. + +## Development server + +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. + +## 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 project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. + +## Running unit tests + +To execute unit tests with the [Vitest](https://vitest.dev/) 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. diff --git a/examples/angular/custom-plugin/angular.json b/examples/angular/custom-plugin/angular.json new file mode 100644 index 0000000000..a9b3440e1d --- /dev/null +++ b/examples/angular/custom-plugin/angular.json @@ -0,0 +1,99 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "cli": { + "packageManager": "pnpm", + "analytics": false, + "cache": { + "enabled": false + } + }, + "newProjectRoot": "projects", + "projects": { + "basic": { + "projectType": "application", + "schematics": { + "@schematics/angular:component": { + "inlineTemplate": true, + "inlineStyle": true, + "skipTests": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "browser": "src/main.ts", + "tsConfig": "tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": ["src/styles.css"] + }, + "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/build:dev-server", + "configurations": { + "production": { + "buildTarget": "basic:build:production" + }, + "development": { + "buildTarget": "basic:build:development" + } + }, + "defaultConfiguration": "development" + } + } + } + } +} diff --git a/examples/angular/custom-plugin/package.json b/examples/angular/custom-plugin/package.json new file mode 100644 index 0000000000..ffdacb41db --- /dev/null +++ b/examples/angular/custom-plugin/package.json @@ -0,0 +1,30 @@ +{ + "name": "tanstack-table-example-angular-basic", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "lint": "eslint ./src" + }, + "private": true, + "packageManager": "pnpm@9.15.0", + "dependencies": { + "@angular/common": "^21.1.0", + "@angular/compiler": "^21.1.0", + "@angular/core": "^21.1.0", + "@angular/forms": "^21.1.0", + "@angular/platform-browser": "^21.1.0", + "@angular/router": "^21.1.0", + "@tanstack/angular-table": "^9.0.0-alpha.10", + "rxjs": "~7.8.0", + "tslib": "^2.3.0" + }, + "devDependencies": { + "@angular/build": "^21.1.0", + "@angular/cli": "^21.1.0", + "@angular/compiler-cli": "^21.1.0", + "typescript": "5.9.3" + } +} diff --git a/examples/angular/custom-plugin/public/favicon.ico b/examples/angular/custom-plugin/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..57614f9c967596fad0a3989bec2b1deff33034f6 GIT binary patch literal 15086 zcmd^G33O9Omi+`8$@{|M-I6TH3wzF-p5CV8o}7f~KxR60LK+ApEFB<$bcciv%@SmA zV{n>g85YMFFeU*Uvl=i4v)C*qgnb;$GQ=3XTe9{Y%c`mO%su)noNCCQ*@t1WXn|B(hQ7i~ zrUK8|pUkD6#lNo!bt$6)jR!&C?`P5G(`e((P($RaLeq+o0Vd~f11;qB05kdbAOm?r zXv~GYr_sibQO9NGTCdT;+G(!{4Xs@4fPak8#L8PjgJwcs-Mm#nR_Z0s&u?nDX5^~@ z+A6?}g0|=4e_LoE69pPFO`yCD@BCjgKpzMH0O4Xs{Ahc?K3HC5;l=f zg>}alhBXX&);z$E-wai+9TTRtBX-bWYY@cl$@YN#gMd~tM_5lj6W%8ah4;uZ;jP@Q zVbuel1rPA?2@x9Y+u?e`l{Z4ngfG5q5BLH5QsEu4GVpt{KIp1?U)=3+KQ;%7ec8l* zdV=zZgN5>O3G(3L2fqj3;oBbZZw$Ij@`Juz@?+yy#OPw)>#wsTewVgTK9BGt5AbZ&?K&B3GVF&yu?@(Xj3fR3n+ZP0%+wo)D9_xp>Z$`A4 zfV>}NWjO#3lqumR0`gvnffd9Ka}JJMuHS&|55-*mCD#8e^anA<+sFZVaJe7{=p*oX zE_Uv?1>e~ga=seYzh{9P+n5<+7&9}&(kwqSaz;1aD|YM3HBiy<))4~QJSIryyqp| z8nGc(8>3(_nEI4n)n7j(&d4idW1tVLjZ7QbNLXg;LB ziHsS5pXHEjGJZb59KcvS~wv;uZR-+4qEqow`;JCfB*+b^UL^3!?;-^F%yt=VjU|v z39SSqKcRu_NVvz!zJzL0CceJaS6%!(eMshPv_0U5G`~!a#I$qI5Ic(>IONej@aH=f z)($TAT#1I{iCS4f{D2+ApS=$3E7}5=+y(rA9mM#;Cky%b*Gi0KfFA`ofKTzu`AV-9 znW|y@19rrZ*!N2AvDi<_ZeR3O2R{#dh1#3-d%$k${Rx42h+i&GZo5!C^dSL34*AKp z27mTd>k>?V&X;Nl%GZ(>0s`1UN~Hfyj>KPjtnc|)xM@{H_B9rNr~LuH`Gr5_am&Ep zTjZA8hljNj5H1Ipm-uD9rC}U{-vR!eay5&6x6FkfupdpT*84MVwGpdd(}ib)zZ3Ky z7C$pnjc82(W_y_F{PhYj?o!@3__UUvpX)v69aBSzYj3 zdi}YQkKs^SyXyFG2LTRz9{(w}y~!`{EuAaUr6G1M{*%c+kP1olW9z23dSH!G4_HSK zzae-DF$OGR{ofP*!$a(r^5Go>I3SObVI6FLY)N@o<*gl0&kLo-OT{Tl*7nCz>Iq=? zcigIDHtj|H;6sR?or8Wd_a4996GI*CXGU}o;D9`^FM!AT1pBY~?|4h^61BY#_yIfO zKO?E0 zJ{Pc`9rVEI&$xxXu`<5E)&+m(7zX^v0rqofLs&bnQT(1baQkAr^kEsk)15vlzAZ-l z@OO9RF<+IiJ*O@HE256gCt!bF=NM*vh|WVWmjVawcNoksRTMvR03H{p@cjwKh(CL4 z7_PB(dM=kO)!s4fW!1p0f93YN@?ZSG` z$B!JaAJCtW$B97}HNO9(x-t30&E}Mo1UPi@Av%uHj~?T|!4JLwV;KCx8xO#b9IlUW zI6+{a@Wj|<2Y=U;a@vXbxqZNngH8^}LleE_4*0&O7#3iGxfJ%Id>+sb;7{L=aIic8 z|EW|{{S)J-wr@;3PmlxRXU8!e2gm_%s|ReH!reFcY8%$Hl4M5>;6^UDUUae?kOy#h zk~6Ee_@ZAn48Bab__^bNmQ~+k=02jz)e0d9Z3>G?RGG!65?d1>9}7iG17?P*=GUV-#SbLRw)Hu{zx*azHxWkGNTWl@HeWjA?39Ia|sCi{e;!^`1Oec zb>Z|b65OM*;eC=ZLSy?_fg$&^2xI>qSLA2G*$nA3GEnp3$N-)46`|36m*sc#4%C|h zBN<2U;7k>&G_wL4=Ve5z`ubVD&*Hxi)r@{4RCDw7U_D`lbC(9&pG5C*z#W>8>HU)h z!h3g?2UL&sS!oY5$3?VlA0Me9W5e~V;2jds*fz^updz#AJ%G8w2V}AEE?E^=MK%Xt z__Bx1cr7+DQmuHmzn*|hh%~eEc9@m05@clWfpEFcr+06%0&dZJH&@8^&@*$qR@}o3 z@Tuuh2FsLz^zH+dN&T&?0G3I?MpmYJ;GP$J!EzjeM#YLJ!W$}MVNb0^HfOA>5Fe~UNn%Zk(PT@~9}1dt)1UQ zU*B5K?Dl#G74qmg|2>^>0WtLX#Jz{lO4NT`NYB*(L#D|5IpXr9v&7a@YsGp3vLR7L zHYGHZg7{ie6n~2p$6Yz>=^cEg7tEgk-1YRl%-s7^cbqFb(U7&Dp78+&ut5!Tn(hER z|Gp4Ed@CnOPeAe|N>U(dB;SZ?NU^AzoD^UAH_vamp6Ws}{|mSq`^+VP1g~2B{%N-!mWz<`)G)>V-<`9`L4?3dM%Qh6<@kba+m`JS{Ya@9Fq*m6$$ zA1%Ogc~VRH33|S9l%CNb4zM%k^EIpqY}@h{w(aBcJ9c05oiZx#SK9t->5lSI`=&l~ z+-Ic)a{FbBhXV$Xt!WRd`R#Jk-$+_Z52rS>?Vpt2IK<84|E-SBEoIw>cs=a{BlQ7O z-?{Fy_M&84&9|KM5wt~)*!~i~E=(6m8(uCO)I=)M?)&sRbzH$9Rovzd?ZEY}GqX+~ zFbEbLz`BZ49=2Yh-|<`waK-_4!7`ro@zlC|r&I4fc4oyb+m=|c8)8%tZ-z5FwhzDt zL5kB@u53`d@%nHl0Sp)Dw`(QU&>vujEn?GPEXUW!Wi<+4e%BORl&BIH+SwRcbS}X@ z01Pk|vA%OdJKAs17zSXtO55k!;%m9>1eW9LnyAX4uj7@${O6cfii`49qTNItzny5J zH&Gj`e}o}?xjQ}r?LrI%FjUd@xflT3|7LA|ka%Q3i}a8gVm<`HIWoJGH=$EGClX^C0lysQJ>UO(q&;`T#8txuoQ_{l^kEV9CAdXuU1Ghg8 zN_6hHFuy&1x24q5-(Z7;!poYdt*`UTdrQOIQ!2O7_+AHV2hgXaEz7)>$LEdG z<8vE^Tw$|YwZHZDPM!SNOAWG$?J)MdmEk{U!!$M#fp7*Wo}jJ$Q(=8>R`Ats?e|VU?Zt7Cdh%AdnfyN3MBWw{ z$OnREvPf7%z6`#2##_7id|H%Y{vV^vWXb?5d5?a_y&t3@p9t$ncHj-NBdo&X{wrfJ zamN)VMYROYh_SvjJ=Xd!Ga?PY_$;*L=SxFte!4O6%0HEh%iZ4=gvns7IWIyJHa|hT z2;1+e)`TvbNb3-0z&DD_)Jomsg-7p_Uh`wjGnU1urmv1_oVqRg#=C?e?!7DgtqojU zWoAB($&53;TsXu^@2;8M`#z{=rPy?JqgYM0CDf4v@z=ZD|ItJ&8%_7A#K?S{wjxgd z?xA6JdJojrWpB7fr2p_MSsU4(R7=XGS0+Eg#xR=j>`H@R9{XjwBmqAiOxOL` zt?XK-iTEOWV}f>Pz3H-s*>W z4~8C&Xq25UQ^xH6H9kY_RM1$ch+%YLF72AA7^b{~VNTG}Tj#qZltz5Q=qxR`&oIlW Nr__JTFzvMr^FKp4S3v*( literal 0 HcmV?d00001 diff --git a/examples/angular/custom-plugin/src/app/app.config.ts b/examples/angular/custom-plugin/src/app/app.config.ts new file mode 100644 index 0000000000..d6d1974987 --- /dev/null +++ b/examples/angular/custom-plugin/src/app/app.config.ts @@ -0,0 +1,7 @@ +import { provideBrowserGlobalErrorListeners } from '@angular/core' + +import type { ApplicationConfig } from '@angular/core' + +export const appConfig: ApplicationConfig = { + providers: [provideBrowserGlobalErrorListeners()], +} diff --git a/examples/angular/custom-plugin/src/app/app.ts b/examples/angular/custom-plugin/src/app/app.ts new file mode 100644 index 0000000000..ba9f49f4d6 --- /dev/null +++ b/examples/angular/custom-plugin/src/app/app.ts @@ -0,0 +1,79 @@ +import { Component, signal } from '@angular/core' +import { + FlexRender, + createColumnHelper, + createPaginatedRowModel, + injectTable, + isFunction, + rowPaginationFeature, + tableFeatures, +} from '@tanstack/angular-table' +import { densityPlugin } from './density/density-feature' +import { makeData } from './makeData' +import type { DensityState } from './density/density-feature' +import type { Person } from './makeData' + +const _features = tableFeatures({ + rowPaginationFeature, + densityPlugin, // pass in our plugin just like any other stock feature +}) +const columnHelper = createColumnHelper() + +const columns = columnHelper.columns([ + columnHelper.accessor('firstName', { + cell: (info) => info.getValue(), + footer: (props) => props.column.id, + }), + columnHelper.accessor((row) => row.lastName, { + id: 'lastName', + cell: (info) => info.getValue(), + header: () => 'Last Name', + footer: (props) => props.column.id, + }), + columnHelper.accessor('age', { + header: () => 'Age', + footer: (props) => props.column.id, + }), + columnHelper.accessor('visits', { + header: () => 'Visits', + footer: (props) => props.column.id, + }), + columnHelper.accessor('status', { + header: 'Status', + footer: (props) => props.column.id, + }), + columnHelper.accessor('progress', { + header: 'Profile Progress', + footer: (props) => props.column.id, + }), +]) + +@Component({ + selector: 'app-root', + imports: [FlexRender], + templateUrl: './app.html', + styleUrl: './app.css', +}) +export class App { + readonly data = signal(makeData(1000)) + readonly density = signal('md') + + readonly table = injectTable(() => ({ + _features, + _rowModels: { + paginatedRowModel: createPaginatedRowModel(), + }, + columns, + data: this.data(), + debugTable: true, + state: { + // passing the density state to the table, TS is still happy :) + density: this.density(), + }, + // using the new onDensityChange option, TS is still happy :) + onDensityChange: (updater) => + isFunction(updater) + ? this.density.update(updater) + : this.density.set(updater), + })) +} diff --git a/examples/angular/custom-plugin/src/index.html b/examples/angular/custom-plugin/src/index.html new file mode 100644 index 0000000000..046aa3d862 --- /dev/null +++ b/examples/angular/custom-plugin/src/index.html @@ -0,0 +1,14 @@ + + + + + CustomPlugin + + + + + + + + + diff --git a/examples/angular/custom-plugin/src/main.ts b/examples/angular/custom-plugin/src/main.ts new file mode 100644 index 0000000000..5df75f9c83 --- /dev/null +++ b/examples/angular/custom-plugin/src/main.ts @@ -0,0 +1,6 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { App } from './app/app'; + +bootstrapApplication(App, appConfig) + .catch((err) => console.error(err)); diff --git a/examples/angular/custom-plugin/src/styles.css b/examples/angular/custom-plugin/src/styles.css new file mode 100644 index 0000000000..5747ffc905 --- /dev/null +++ b/examples/angular/custom-plugin/src/styles.css @@ -0,0 +1,34 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +table { + border: 1px solid lightgray; +} + +tbody { + border-bottom: 1px solid lightgray; +} + +th { + border-bottom: 1px solid lightgray; + border-right: 1px solid lightgray; + padding: 2px 4px; +} + +tfoot { + color: gray; +} + +tfoot th { + font-weight: normal; +} + +tr { + border-bottom: 1px solid lightgray; +} + +button:disabled { + opacity: 0.5; +} diff --git a/examples/angular/custom-plugin/tsconfig.app.json b/examples/angular/custom-plugin/tsconfig.app.json new file mode 100644 index 0000000000..a0dcc37c60 --- /dev/null +++ b/examples/angular/custom-plugin/tsconfig.app.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.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "include": ["src/**/*.ts"], + "exclude": ["src/**/*.spec.ts"] +} diff --git a/examples/angular/custom-plugin/tsconfig.json b/examples/angular/custom-plugin/tsconfig.json new file mode 100644 index 0000000000..593e98476d --- /dev/null +++ b/examples/angular/custom-plugin/tsconfig.json @@ -0,0 +1,24 @@ +/* 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": { + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "experimentalDecorators": true, + "importHelpers": true, + "target": "ES2022", + "module": "preserve" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} From b48213c4127c00e1936ca2f9351872c60c09744b Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 15:03:22 +0100 Subject: [PATCH 24/28] add density plugin --- examples/angular/basic-app-table/AGENTS.md | 55 ------------ examples/angular/basic/.editorconfig | 16 ---- .../angular/custom-plugin/src/app/app.css | 21 +++++ .../angular/custom-plugin/src/app/app.html | 47 ++++++++++ .../src/app/density/density-feature.ts | 86 +++++++++++++++++++ .../angular/custom-plugin/src/app/makeData.ts | 48 +++++++++++ examples/angular/signal-input/package.json | 2 +- pnpm-lock.yaml | 3 + 8 files changed, 206 insertions(+), 72 deletions(-) delete mode 100644 examples/angular/basic-app-table/AGENTS.md delete mode 100644 examples/angular/basic/.editorconfig create mode 100644 examples/angular/custom-plugin/src/app/app.css create mode 100644 examples/angular/custom-plugin/src/app/app.html create mode 100644 examples/angular/custom-plugin/src/app/density/density-feature.ts create mode 100644 examples/angular/custom-plugin/src/app/makeData.ts diff --git a/examples/angular/basic-app-table/AGENTS.md b/examples/angular/basic-app-table/AGENTS.md deleted file mode 100644 index 676c86307e..0000000000 --- a/examples/angular/basic-app-table/AGENTS.md +++ /dev/null @@ -1,55 +0,0 @@ -You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices. - -## TypeScript Best Practices - -- Use strict type checking -- Prefer type inference when the type is obvious -- Avoid the `any` type; use `unknown` when type is uncertain - -## Angular Best Practices - -- Always use standalone components over NgModules -- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+. -- Use signals for state management -- Implement lazy loading for feature routes -- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead -- Use `NgOptimizedImage` for all static images. - - `NgOptimizedImage` does not work for inline base64 images. - -## Accessibility Requirements - -- It MUST pass all AXE checks. -- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes. - -### Components - -- Keep components small and focused on a single responsibility -- Use `input()` and `output()` functions instead of decorators -- Use `computed()` for derived state -- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator -- Prefer inline templates for small components -- Prefer Reactive forms instead of Template-driven ones -- Do NOT use `ngClass`, use `class` bindings instead -- Do NOT use `ngStyle`, use `style` bindings instead -- When using external templates/styles, use paths relative to the component TS file. - -## State Management - -- Use signals for local component state -- Use `computed()` for derived state -- Keep state transformations pure and predictable -- Do NOT use `mutate` on signals, use `update` or `set` instead - -## Templates - -- Keep templates simple and avoid complex logic -- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch` -- Use the async pipe to handle observables -- Do not assume globals like (`new Date()`) are available. -- Do not write arrow functions in templates (they are not supported). - -## Services - -- Design services around a single responsibility -- Use the `providedIn: 'root'` option for singleton services -- Use the `inject()` function instead of constructor injection diff --git a/examples/angular/basic/.editorconfig b/examples/angular/basic/.editorconfig deleted file mode 100644 index 59d9a3a3e7..0000000000 --- a/examples/angular/basic/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# 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 - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/examples/angular/custom-plugin/src/app/app.css b/examples/angular/custom-plugin/src/app/app.css new file mode 100644 index 0000000000..eba191fa48 --- /dev/null +++ b/examples/angular/custom-plugin/src/app/app.css @@ -0,0 +1,21 @@ +table { + &[data-table-density] { + :where(td,th) { + transition: padding 0.2s; + padding: 16px; + } + + &[data-table-density="sm"] { + :where(td, th) { + padding: 4px; + } + } + + &[data-table-density='md'] { + :where(td, th) { + padding: 8px; + } + } + + } +} diff --git a/examples/angular/custom-plugin/src/app/app.html b/examples/angular/custom-plugin/src/app/app.html new file mode 100644 index 0000000000..0d6497dfa3 --- /dev/null +++ b/examples/angular/custom-plugin/src/app/app.html @@ -0,0 +1,47 @@ +
+
+ + + + + @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) { + + @for (header of headerGroup.headers; track header.id) { + @if (!header.isPlaceholder) { + + } + } + + } + + + @for (row of table.getRowModel().rows; track row.id) { + + @for (cell of row.getAllCells(); track cell.id) { + + } + + } + + + @for (footerGroup of table.getFooterGroups(); track footerGroup.id) { + + @for (footer of footerGroup.headers; track footer.id) { + + } + + } + +
+
+
+
+
+ {{ footer }} +
+
diff --git a/examples/angular/custom-plugin/src/app/density/density-feature.ts b/examples/angular/custom-plugin/src/app/density/density-feature.ts new file mode 100644 index 0000000000..ac77f186ee --- /dev/null +++ b/examples/angular/custom-plugin/src/app/density/density-feature.ts @@ -0,0 +1,86 @@ +import { functionalUpdate, makeStateUpdater } from '@tanstack/angular-table' +import type { + OnChangeFn, + TableFeature, + TableFeatures, + Updater, +} from '@tanstack/angular-table' + +// TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features + +// define types for our new feature's custom state +export type DensityState = 'sm' | 'md' | 'lg' +export interface TableState_Density { + density: DensityState +} + +// define types for our new feature's table options +export interface TableOptions_Density { + enableDensity?: boolean + onDensityChange?: OnChangeFn +} + +// Define types for our new feature's table APIs +export interface Table_Density { + setDensity: (updater: Updater) => void + toggleDensity: (value?: DensityState) => void +} + +interface DensityPluginConstructors { + Table: Table_Density + TableOptions: TableOptions_Density + TableState: TableState_Density +} + +// Here is all of the actual javascript code for our new feature +export const densityPlugin: TableFeature< + DensityPluginConstructors +> = { + // define the new feature's initial state + getInitialState: (initialState) => { + return { + density: 'md', + ...initialState, // must come last + } + }, + + // define the new feature's default options + getDefaultTableOptions: (table) => { + return { + enableDensity: true, + onDensityChange: makeStateUpdater('density', table), + } + }, + // if you need to add a default column definition... + // getDefaultColumnDef: () => {}, + + // define the new feature's table instance methods + constructTableAPIs: (table) => { + table.setDensity = (updater) => { + const safeUpdater: Updater = (old) => { + const newState = functionalUpdate(updater, old) + return newState + } + return table.options.onDensityChange?.(safeUpdater) + } + table.toggleDensity = (value) => { + table.setDensity?.((old) => { + if (value) return value + return old === 'lg' ? 'md' : old === 'md' ? 'sm' : 'lg' // cycle through the 3 options + }) + } + }, + + // if you need to add row instance APIs... + // constructRowAPIs: (row) => {}, + + // if you need to add cell instance APIs... + // constructCellAPIs: (cell) => {}, + + // if you need to add column instance APIs... + // constructColumnAPIs: (column) => {}, + + // if you need to add header instance APIs... + // constructHeaderAPIs: (header) => {}, +} +// end of custom feature code diff --git a/examples/angular/custom-plugin/src/app/makeData.ts b/examples/angular/custom-plugin/src/app/makeData.ts new file mode 100644 index 0000000000..b9055b2d8c --- /dev/null +++ b/examples/angular/custom-plugin/src/app/makeData.ts @@ -0,0 +1,48 @@ +import { faker } from '@faker-js/faker' + +export type Person = { + firstName: string + lastName: string + age: number + visits: number + progress: number + status: 'relationship' | 'complicated' | 'single' + subRows?: Array +} + +const range = (len: number) => { + const arr: Array = [] + for (let i = 0; i < len; i++) { + arr.push(i) + } + return arr +} + +const newPerson = (): Person => { + return { + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + age: faker.number.int(40), + visits: faker.number.int(1000), + progress: faker.number.int(100), + status: faker.helpers.shuffle([ + 'relationship', + 'complicated', + 'single', + ])[0], + } +} + +export function makeData(...lens: Array) { + const makeDataLevel = (depth = 0): Array => { + const len = lens[depth] + return range(len).map((_d): Person => { + return { + ...newPerson(), + subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined, + } + }) + } + + return makeDataLevel() +} diff --git a/examples/angular/signal-input/package.json b/examples/angular/signal-input/package.json index cf4004e23a..7ba0ec5594 100644 --- a/examples/angular/signal-input/package.json +++ b/examples/angular/signal-input/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-signal-input", + "name": "tanstack-table-example-angular-custom-plugin", "version": "0.0.0", "scripts": { "ng": "ng", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89d7b3c917..8df95e540d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -445,6 +445,9 @@ importers: '@angular/router': specifier: ^21.1.0 version: 21.1.0(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(@angular/platform-browser@21.1.0(@angular/animations@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(@angular/common@21.1.0(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0))(rxjs@7.8.2))(@angular/core@21.1.0(@angular/compiler@21.1.0)(rxjs@7.8.2)(zone.js@0.16.0)))(rxjs@7.8.2) + '@tanstack/angular-table': + specifier: ^9.0.0-alpha.10 + version: link:../../../packages/angular-table rxjs: specifier: ~7.8.0 version: 7.8.2 From ead05da31aa08b4dc0afbe202c6298998287e41e Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 18 Jan 2026 14:04:34 +0000 Subject: [PATCH 25/28] ci: apply automated fixes --- .../angular/custom-plugin/src/app/app.css | 5 ++--- examples/angular/custom-plugin/src/index.html | 22 +++++++++---------- examples/angular/custom-plugin/src/main.ts | 9 ++++---- 3 files changed, 17 insertions(+), 19 deletions(-) diff --git a/examples/angular/custom-plugin/src/app/app.css b/examples/angular/custom-plugin/src/app/app.css index eba191fa48..6c6b016dc8 100644 --- a/examples/angular/custom-plugin/src/app/app.css +++ b/examples/angular/custom-plugin/src/app/app.css @@ -1,11 +1,11 @@ table { &[data-table-density] { - :where(td,th) { + :where(td, th) { transition: padding 0.2s; padding: 16px; } - &[data-table-density="sm"] { + &[data-table-density='sm'] { :where(td, th) { padding: 4px; } @@ -16,6 +16,5 @@ table { padding: 8px; } } - } } diff --git a/examples/angular/custom-plugin/src/index.html b/examples/angular/custom-plugin/src/index.html index 046aa3d862..952d25ec5e 100644 --- a/examples/angular/custom-plugin/src/index.html +++ b/examples/angular/custom-plugin/src/index.html @@ -1,14 +1,14 @@ - - - CustomPlugin - - - - - - - - + + + CustomPlugin + + + + + + + + diff --git a/examples/angular/custom-plugin/src/main.ts b/examples/angular/custom-plugin/src/main.ts index 5df75f9c83..8192dca694 100644 --- a/examples/angular/custom-plugin/src/main.ts +++ b/examples/angular/custom-plugin/src/main.ts @@ -1,6 +1,5 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { appConfig } from './app/app.config'; -import { App } from './app/app'; +import { bootstrapApplication } from '@angular/platform-browser' +import { appConfig } from './app/app.config' +import { App } from './app/app' -bootstrapApplication(App, appConfig) - .catch((err) => console.error(err)); +bootstrapApplication(App, appConfig).catch((err) => console.error(err)) From c70c62c4ac824ede30f45dc304fa07307adb21cb Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 15:06:07 +0100 Subject: [PATCH 26/28] fix angular examples package.json --- examples/angular/custom-plugin/angular.json | 6 +++--- examples/angular/custom-plugin/package.json | 2 +- examples/angular/row-dnd/package.json | 2 +- examples/angular/signal-input/package.json | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/angular/custom-plugin/angular.json b/examples/angular/custom-plugin/angular.json index a9b3440e1d..5fc340228c 100644 --- a/examples/angular/custom-plugin/angular.json +++ b/examples/angular/custom-plugin/angular.json @@ -10,7 +10,7 @@ }, "newProjectRoot": "projects", "projects": { - "basic": { + "custom-plugin": { "projectType": "application", "schematics": { "@schematics/angular:component": { @@ -85,10 +85,10 @@ "builder": "@angular/build:dev-server", "configurations": { "production": { - "buildTarget": "basic:build:production" + "buildTarget": "custom-plugin:build:production" }, "development": { - "buildTarget": "basic:build:development" + "buildTarget": "custom-plugin:build:development" } }, "defaultConfiguration": "development" diff --git a/examples/angular/custom-plugin/package.json b/examples/angular/custom-plugin/package.json index ffdacb41db..a0ad1e2c4d 100644 --- a/examples/angular/custom-plugin/package.json +++ b/examples/angular/custom-plugin/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-basic", + "name": "tanstack-table-example-angular-custom-plugin", "version": "0.0.0", "scripts": { "ng": "ng", diff --git a/examples/angular/row-dnd/package.json b/examples/angular/row-dnd/package.json index 3b5839bfe0..642609955f 100644 --- a/examples/angular/row-dnd/package.json +++ b/examples/angular/row-dnd/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-grouping", + "name": "tanstack-table-example-angular-row-dnd", "version": "0.0.0", "scripts": { "ng": "ng", diff --git a/examples/angular/signal-input/package.json b/examples/angular/signal-input/package.json index 7ba0ec5594..cf4004e23a 100644 --- a/examples/angular/signal-input/package.json +++ b/examples/angular/signal-input/package.json @@ -1,5 +1,5 @@ { - "name": "tanstack-table-example-angular-custom-plugin", + "name": "tanstack-table-example-angular-signal-input", "version": "0.0.0", "scripts": { "ng": "ng", From 2756f406a929e365553f8604207d1c8170a8d214 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 15:11:17 +0100 Subject: [PATCH 27/28] chore: fix angular examples dependency ranges --- examples/angular/basic-app-table/package.json | 4 +- examples/angular/basic/package.json | 4 +- examples/angular/column-ordering/package.json | 4 +- .../column-pinning-sticky/package.json | 4 +- examples/angular/column-pinning/package.json | 4 +- .../column-resizing-performant/package.json | 4 +- .../angular/column-visibility/package.json | 4 +- .../angular/composable-tables/package.json | 4 +- examples/angular/custom-plugin/package.json | 4 +- examples/angular/editable/package.json | 4 +- examples/angular/expanding/package.json | 4 +- examples/angular/filters/package.json | 4 +- examples/angular/grouping/package.json | 4 +- examples/angular/row-dnd/package.json | 4 +- examples/angular/row-selection/package.json | 4 +- examples/angular/signal-input/package.json | 4 +- examples/angular/sub-components/package.json | 4 +- pnpm-lock.yaml | 68 +++++++++---------- 18 files changed, 68 insertions(+), 68 deletions(-) diff --git a/examples/angular/basic-app-table/package.json b/examples/angular/basic-app-table/package.json index 2144dd8d26..2e4a9fc8e2 100644 --- a/examples/angular/basic-app-table/package.json +++ b/examples/angular/basic-app-table/package.json @@ -17,8 +17,8 @@ "@angular/forms": "^21.1.0", "@angular/platform-browser": "^21.1.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json index ffdacb41db..c33db014f3 100644 --- a/examples/angular/basic/package.json +++ b/examples/angular/basic/package.json @@ -18,8 +18,8 @@ "@angular/platform-browser": "^21.1.0", "@angular/router": "^21.1.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/column-ordering/package.json b/examples/angular/column-ordering/package.json index 5eaf42db0b..1d281b3d8f 100644 --- a/examples/angular/column-ordering/package.json +++ b/examples/angular/column-ordering/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/column-pinning-sticky/package.json b/examples/angular/column-pinning-sticky/package.json index 50fe08838c..ff5b21d691 100644 --- a/examples/angular/column-pinning-sticky/package.json +++ b/examples/angular/column-pinning-sticky/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/column-pinning/package.json b/examples/angular/column-pinning/package.json index 94f785216f..092ec9cd39 100644 --- a/examples/angular/column-pinning/package.json +++ b/examples/angular/column-pinning/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/column-resizing-performant/package.json b/examples/angular/column-resizing-performant/package.json index d00c36bf05..3216aee646 100644 --- a/examples/angular/column-resizing-performant/package.json +++ b/examples/angular/column-resizing-performant/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/column-visibility/package.json b/examples/angular/column-visibility/package.json index fd379237a6..66955353dc 100644 --- a/examples/angular/column-visibility/package.json +++ b/examples/angular/column-visibility/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/composable-tables/package.json b/examples/angular/composable-tables/package.json index 9a01b7170a..0559feb416 100644 --- a/examples/angular/composable-tables/package.json +++ b/examples/angular/composable-tables/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/custom-plugin/package.json b/examples/angular/custom-plugin/package.json index a0ad1e2c4d..2c1597fde5 100644 --- a/examples/angular/custom-plugin/package.json +++ b/examples/angular/custom-plugin/package.json @@ -18,8 +18,8 @@ "@angular/platform-browser": "^21.1.0", "@angular/router": "^21.1.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/editable/package.json b/examples/angular/editable/package.json index 324026cbc5..68ef9e3b9c 100644 --- a/examples/angular/editable/package.json +++ b/examples/angular/editable/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/expanding/package.json b/examples/angular/expanding/package.json index 56039bdec0..346867835b 100644 --- a/examples/angular/expanding/package.json +++ b/examples/angular/expanding/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/filters/package.json b/examples/angular/filters/package.json index c7bb12125f..505945ec00 100644 --- a/examples/angular/filters/package.json +++ b/examples/angular/filters/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/grouping/package.json b/examples/angular/grouping/package.json index c0111bbf58..41591cb069 100644 --- a/examples/angular/grouping/package.json +++ b/examples/angular/grouping/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/row-dnd/package.json b/examples/angular/row-dnd/package.json index 642609955f..3f19375c7e 100644 --- a/examples/angular/row-dnd/package.json +++ b/examples/angular/row-dnd/package.json @@ -20,8 +20,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/row-selection/package.json b/examples/angular/row-selection/package.json index 35372b8ee7..79d8e9882f 100644 --- a/examples/angular/row-selection/package.json +++ b/examples/angular/row-selection/package.json @@ -20,8 +20,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/signal-input/package.json b/examples/angular/signal-input/package.json index cf4004e23a..d13a5c847c 100644 --- a/examples/angular/signal-input/package.json +++ b/examples/angular/signal-input/package.json @@ -20,8 +20,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/examples/angular/sub-components/package.json b/examples/angular/sub-components/package.json index e2ec4d7721..91f751c952 100644 --- a/examples/angular/sub-components/package.json +++ b/examples/angular/sub-components/package.json @@ -19,8 +19,8 @@ "@angular/router": "^21.1.0", "@faker-js/faker": "^10.2.0", "@tanstack/angular-table": "^9.0.0-alpha.10", - "rxjs": "~7.8.0", - "tslib": "^2.3.0" + "rxjs": "~7.8.2", + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8df95e540d..bd9f79b42d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,10 +90,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -130,10 +130,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -176,10 +176,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -222,10 +222,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -268,10 +268,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -314,10 +314,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -360,10 +360,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -406,10 +406,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -449,10 +449,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -495,10 +495,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -541,10 +541,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -587,10 +587,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -633,10 +633,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -743,10 +743,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -792,10 +792,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -890,10 +890,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': @@ -936,10 +936,10 @@ importers: specifier: ^9.0.0-alpha.10 version: link:../../../packages/angular-table rxjs: - specifier: ~7.8.0 + specifier: ~7.8.2 version: 7.8.2 tslib: - specifier: ^2.3.0 + specifier: ^2.8.1 version: 2.8.1 devDependencies: '@angular/build': From 295280fa8f14fd44a9f6384f1a84ca4eaf9b2895 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 18 Jan 2026 15:24:24 +0100 Subject: [PATCH 28/28] lint(angular): fix unused exports --- .../src/angularReactivityFeature.ts | 47 +++---------------- packages/angular-table/src/reactivityUtils.ts | 44 ++++++++++++++--- 2 files changed, 45 insertions(+), 46 deletions(-) diff --git a/packages/angular-table/src/angularReactivityFeature.ts b/packages/angular-table/src/angularReactivityFeature.ts index 8e5453fd9f..d3178674ad 100644 --- a/packages/angular-table/src/angularReactivityFeature.ts +++ b/packages/angular-table/src/angularReactivityFeature.ts @@ -1,5 +1,5 @@ -import { computed, isSignal, signal } from '@angular/core' -import { defineLazyComputedProperty, markReactive } from './reactivityUtils' +import { computed, signal } from '@angular/core' +import { setReactivePropertiesOnObject } from './reactivityUtils' import type { Signal } from '@angular/core' import type { RowData, @@ -85,8 +85,7 @@ function constructAngularReactivityFeature< const rootNotifier = signal | null>(null) table.setTableNotifier = (notifier) => rootNotifier.set(notifier) table.get = computed(() => rootNotifier()!(), { equal: () => false }) - markReactive(table) - setReactiveProps(table.get, table, { + setReactivePropertiesOnObject(table.get, table, { overridePrototype: false, skipProperty: skipBaseProperties, }) @@ -96,8 +95,7 @@ function constructAngularReactivityFeature< if (table.options.reactivity?.cell === false) { return } - markReactive(prototype) - setReactiveProps(table.get, prototype, { + setReactivePropertiesOnObject(table.get, prototype, { skipProperty: getUserSkipPropertyFn( table.options.reactivity?.cell, skipBaseProperties, @@ -110,8 +108,7 @@ function constructAngularReactivityFeature< if (table.options.reactivity?.column === false) { return } - markReactive(prototype) - setReactiveProps(table.get, prototype, { + setReactivePropertiesOnObject(table.get, prototype, { skipProperty: getUserSkipPropertyFn( table.options.reactivity?.cell, skipBaseProperties, @@ -124,8 +121,7 @@ function constructAngularReactivityFeature< if (table.options.reactivity?.header === false) { return } - markReactive(prototype) - setReactiveProps(table.get, prototype, { + setReactivePropertiesOnObject(table.get, prototype, { skipProperty: getUserSkipPropertyFn( table.options.reactivity?.cell, skipBaseProperties, @@ -138,8 +134,7 @@ function constructAngularReactivityFeature< if (table.options.reactivity?.row === false) { return } - markReactive(prototype) - setReactiveProps(table.get, prototype, { + setReactivePropertiesOnObject(table.get, prototype, { skipProperty: getUserSkipPropertyFn( table.options.reactivity?.cell, skipBaseProperties, @@ -164,31 +159,3 @@ function skipBaseProperties(property: string): boolean { property.endsWith('Handler') ) } - -function setReactiveProps( - notifier: Signal>, - obj: { [key: string]: any }, - options: { - overridePrototype?: boolean - skipProperty: (property: string) => boolean - }, -) { - const { skipProperty } = options - - for (const property in obj) { - const value = obj[property] - if ( - isSignal(value) || - typeof value !== 'function' || - skipProperty(property) - ) { - continue - } - defineLazyComputedProperty(notifier, { - valueFn: value, - property, - originalObject: obj, - overridePrototype: options.overridePrototype, - }) - } -} diff --git a/packages/angular-table/src/reactivityUtils.ts b/packages/angular-table/src/reactivityUtils.ts index 9545c4afc7..57c27a00f1 100644 --- a/packages/angular-table/src/reactivityUtils.ts +++ b/packages/angular-table/src/reactivityUtils.ts @@ -1,15 +1,15 @@ -import { computed } from '@angular/core' +import { computed, isSignal } from '@angular/core' import { $internalMemoFnMeta, getMemoFnMeta } from '@tanstack/table-core' import type { MemoFnMeta } from '@tanstack/table-core' import type { Signal } from '@angular/core' -export const $TABLE_REACTIVE = Symbol('reactive') +const $TABLE_REACTIVE = Symbol('reactive') -export function markReactive(obj: T): void { +function markReactive(obj: T): void { Object.defineProperty(obj, $TABLE_REACTIVE, { value: true }) } -export function isReactive(obj: T): boolean { +function isReactive(obj: T): boolean { return Reflect.get(obj as {}, $TABLE_REACTIVE) === true } @@ -21,7 +21,7 @@ export function isReactive(obj: T): boolean { * * @internal should be used only internally */ -export function defineLazyComputedProperty( +function defineLazyComputedProperty( notifier: Signal, setObjectOptions: { originalObject: T @@ -154,7 +154,7 @@ function getFnArgsLength( return Math.max(0, getMemoFnMeta(fn)?.originalArgsLength ?? fn.length) } -export function assignReactivePrototypeAPI( +function assignReactivePrototypeAPI( notifier: Signal, prototype: Record, fnName: string, @@ -198,3 +198,35 @@ export function assignReactivePrototypeAPI( } satisfies MemoFnMeta } } + +export function setReactivePropertiesOnObject( + notifier: Signal, + obj: { [key: string]: any }, + options: { + overridePrototype?: boolean + skipProperty: (property: string) => boolean + }, +) { + const { skipProperty } = options + if (isReactive(obj)) { + return + } + markReactive(obj) + + for (const property in obj) { + const value = obj[property] + if ( + isSignal(value) || + typeof value !== 'function' || + skipProperty(property) + ) { + continue + } + defineLazyComputedProperty(notifier, { + valueFn: value, + property, + originalObject: obj, + overridePrototype: options.overridePrototype, + }) + } +}