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/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..2e4a9fc8e2 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" + "tslib": "^2.8.1" }, "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" } } 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/assets/.gitkeep b/examples/angular/basic-app-table/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 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..a0dcc37c60 100644 --- a/examples/angular/basic-app-table/tsconfig.app.json +++ b/examples/angular/basic-app-table/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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/.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/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..c33db014f3 100644 --- a/examples/angular/basic/package.json +++ b/examples/angular/basic/package.json @@ -6,29 +6,25 @@ "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", "@tanstack/angular-table": "^9.0.0-alpha.10", "rxjs": "~7.8.2", - "zone.js": "~0.16.0" + "tslib": "^2.8.1" }, "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" } } 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..e85d051a9d 100644 --- a/examples/angular/basic/src/app/app.component.ts +++ b/examples/angular/basic/src/app/app.ts @@ -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..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 { 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/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..a0dcc37c60 100644 --- a/examples/angular/basic/tsconfig.app.json +++ b/examples/angular/basic/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..1d281b3d8f 100644 --- a/examples/angular/column-ordering/package.json +++ b/examples/angular/column-ordering/package.json @@ -5,27 +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" + "tslib": "^2.8.1" }, "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" } } 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 (header of headerGroup.headers; track header.id) { - @for (cell of row.getVisibleCells(); track cell.id) { -
{{ 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..a0dcc37c60 100644 --- a/examples/angular/column-ordering/tsconfig.app.json +++ b/examples/angular/column-ordering/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..ff5b21d691 100644 --- a/examples/angular/column-pinning-sticky/package.json +++ b/examples/angular/column-pinning-sticky/package.json @@ -5,28 +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" + "tslib": "^2.8.1" }, "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" } } 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 73% 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..f723b87c0f 100644 --- a/examples/angular/column-pinning-sticky/src/app/app.component.html +++ b/examples/angular/column-pinning-sticky/src/app/app.html @@ -29,9 +29,7 @@
- +
@@ -42,10 +40,7 @@
+
@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') { - } @@ -114,13 +96,9 @@ @for (row of table.getRowModel().rows; track row.id) {
+ {{ cellValue }} diff --git a/examples/angular/column-pinning-sticky/src/app/app.component.ts b/examples/angular/column-pinning-sticky/src/app/app.ts similarity index 82% rename from examples/angular/column-pinning-sticky/src/app/app.component.ts rename to examples/angular/column-pinning-sticky/src/app/app.ts index e92c532dec..b7b0a8b216 100644 --- a/examples/angular/column-pinning-sticky/src/app/app.component.ts +++ b/examples/angular/column-pinning-sticky/src/app/app.ts @@ -1,34 +1,25 @@ import { Component, computed, signal } from '@angular/core' import { - FlexRenderDirective, + FlexRender, columnOrderingFeature, columnPinningFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, + createColumnHelper, injectTable, tableFeatures, } from '@tanstack/angular-table' import { faker } from '@faker-js/faker' -import { NgStyle } from '@angular/common' import { makeData } from './makeData' +import type { Person } from './makeData' import type { Column, - ColumnDef, ColumnOrderState, ColumnPinningState, ColumnVisibilityState, } from '@tanstack/angular-table' -type Person = { - firstName: string - lastName: string - age: number - visits: number - status: string - progress: number -} - const _features = tableFeatures({ columnOrderingFeature, columnPinningFeature, @@ -37,59 +28,55 @@ const _features = tableFeatures({ columnVisibilityFeature, }) -const defaultColumns: Array> = [ - { - accessorKey: 'firstName', +const columnHelper = createColumnHelper() + +const defaultColumns = columnHelper.columns([ + columnHelper.accessor('firstName', { id: 'firstName', header: 'First Name', cell: (info) => info.getValue(), footer: (props) => props.column.id, size: 180, - }, - { - accessorFn: (row) => row.lastName, + }), + columnHelper.accessor('lastName', { id: 'lastName', cell: (info) => info.getValue(), header: () => 'Last Name', footer: (props) => props.column.id, size: 180, - }, - { - accessorKey: 'age', + }), + columnHelper.accessor('age', { id: 'age', header: 'Age', footer: (props) => props.column.id, size: 180, - }, - { - accessorKey: 'visits', + }), + columnHelper.accessor('visits', { id: 'visits', header: 'Visits', footer: (props) => props.column.id, size: 180, - }, - { - accessorKey: 'status', + }), + columnHelper.accessor('status', { id: 'status', header: 'Status', footer: (props) => props.column.id, size: 180, - }, - { - accessorKey: 'progress', + }), + columnHelper.accessor('progress', { id: 'progress', header: 'Profile Progress', footer: (props) => props.column.id, size: 180, - }, -] + }), +]) @Component({ selector: 'app-root', - imports: [FlexRenderDirective, NgStyle], - templateUrl: './app.component.html', + imports: [FlexRender], + templateUrl: './app.html', }) -export class AppComponent { +export class App { readonly columns = signal([...defaultColumns]) readonly data = signal>(makeData(30)) readonly columnVisibility = signal({}) @@ -145,6 +132,6 @@ export class AppComponent { } rerender() { - this.data.set(makeData(5000)) + this.data.set(makeData(30)) } } diff --git a/examples/angular/column-pinning-sticky/src/assets/.gitkeep b/examples/angular/column-pinning-sticky/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/examples/angular/column-pinning-sticky/src/index.html b/examples/angular/column-pinning-sticky/src/index.html index a4bb987648..754e3da269 100644 --- a/examples/angular/column-pinning-sticky/src/index.html +++ b/examples/angular/column-pinning-sticky/src/index.html @@ -2,7 +2,7 @@ - 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..a0dcc37c60 100644 --- a/examples/angular/column-pinning-sticky/tsconfig.app.json +++ b/examples/angular/column-pinning-sticky/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..092ec9cd39 100644 --- a/examples/angular/column-pinning/package.json +++ b/examples/angular/column-pinning/package.json @@ -5,29 +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/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" + "tslib": "^2.8.1" }, "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" } } 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 81% rename from examples/angular/column-pinning/src/app/app.component.html rename to examples/angular/column-pinning/src/app/app.html index e002af2b70..4bf5716c34 100644 --- a/examples/angular/column-pinning/src/app/app.component.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) { @for (cell of row.getVisibleCells(); track cell.id) { @@ -45,12 +33,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/expandable-cell.ts b/examples/angular/sub-components/src/app/expandable-cell.ts index 0959e3ae9f..63f8d5bab7 100644 --- a/examples/angular/sub-components/src/app/expandable-cell.ts +++ b/examples/angular/sub-components/src/app/expandable-cell.ts @@ -4,13 +4,8 @@ import { input, output, } from '@angular/core' -import { - type HeaderContext, - injectFlexRenderContext, - type Table, - CellContext, - RowData, -} from '@tanstack/angular-table' +import { 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(), 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..a0dcc37c60 100644 --- a/examples/angular/sub-components/tsconfig.app.json +++ b/examples/angular/sub-components/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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/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' 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, + }) + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e97528134e..bd9f79b42d 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) @@ -95,9 +92,9 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 @@ -254,9 +224,9 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 @@ -303,9 +270,9 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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) @@ -358,43 +316,19 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -487,24 +421,55 @@ 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) + '@tanstack/angular-table': + specifier: ^9.0.0-alpha.10 + version: link:../../../packages/angular-table + rxjs: + specifier: ~7.8.2 + version: 7.8.2 tslib: specifier: ^2.8.1 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 +485,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) @@ -535,52 +497,25 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 +531,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) @@ -611,22 +543,19 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 +577,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 @@ -663,9 +592,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 @@ -697,9 +623,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 @@ -709,9 +635,9 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -722,18 +648,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 +690,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 +715,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 +733,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) @@ -834,49 +745,28 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 +782,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 @@ -907,9 +797,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 @@ -959,9 +846,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 +862,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 +874,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 @@ -1002,9 +892,9 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + version: 2.8.1 devDependencies: '@angular/build': specifier: ^21.1.0 @@ -1015,18 +905,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 +926,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) @@ -1057,22 +938,19 @@ importers: rxjs: specifier: ~7.8.2 version: 7.8.2 - zone.js: - specifier: ~0.16.0 - version: 0.16.0 + tslib: + specifier: ^2.8.1 + 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 +6906,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 +7185,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 +9053,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 +9380,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 +9473,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 +9732,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 +13321,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 +15168,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 +15601,7 @@ snapshots: '@types/cors@2.8.17': dependencies: '@types/node': 25.0.9 + optional: true '@types/deep-eql@4.0.2': {} @@ -15830,8 +15660,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 +16422,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 +16625,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 +16722,7 @@ snapshots: utils-merge: 1.0.1 transitivePeerDependencies: - supports-color + optional: true content-disposition@0.5.4: dependencies: @@ -17031,7 +16862,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 +16874,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 +16890,7 @@ snapshots: debug@4.3.6: dependencies: ms: 2.1.2 + optional: true debug@4.4.0: dependencies: @@ -17117,7 +16951,8 @@ snapshots: devalue@5.6.2: {} - di@0.0.1: {} + di@0.0.1: + optional: true diff@8.0.2: {} @@ -17137,6 +16972,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 +17031,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 +17049,7 @@ snapshots: - bufferutil - supports-color - utf-8-validate + optional: true enhanced-resolve@5.18.0: dependencies: @@ -17233,6 +17071,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 +17690,7 @@ snapshots: unpipe: 1.0.0 transitivePeerDependencies: - supports-color + optional: true finalhandler@1.3.1: dependencies: @@ -17960,12 +17800,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 +17878,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 +17957,6 @@ snapshots: html-entities@2.3.3: {} - html-escaper@2.0.2: {} - htmlparser2@10.0.0: dependencies: domelementtype: 2.3.0 @@ -18247,6 +18088,7 @@ snapshots: dependencies: once: 1.4.0 wrappy: 1.0.2 + optional: true inherits@2.0.3: {} @@ -18359,6 +18201,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 +18237,8 @@ snapshots: isarray@1.0.0: {} - isbinaryfile@4.0.10: {} + isbinaryfile@4.0.10: + optional: true isbot@5.1.32: {} @@ -18406,16 +18250,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 +18260,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 +18355,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 +18390,7 @@ snapshots: - debug - supports-color - utf-8-validate + optional: true keyv@4.5.4: dependencies: @@ -18838,6 +18624,7 @@ snapshots: streamroller: 3.1.5 transitivePeerDependencies: - supports-color + optional: true lru-cache@11.0.2: {} @@ -18876,10 +18663,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 +18744,8 @@ snapshots: mime@1.6.0: {} - mime@2.6.0: {} + mime@2.6.0: + optional: true mimic-fn@2.1.0: {} @@ -19036,6 +18820,7 @@ snapshots: mkdirp@0.5.6: dependencies: minimist: 1.2.8 + optional: true mkdirp@3.0.1: {} @@ -19052,7 +18837,8 @@ snapshots: ms@2.0.0: {} - ms@2.1.2: {} + ms@2.1.2: + optional: true ms@2.1.3: {} @@ -19308,6 +19094,7 @@ snapshots: on-finished@2.3.0: dependencies: ee-first: 1.1.1 + optional: true on-finished@2.4.1: dependencies: @@ -19657,11 +19444,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 +19653,7 @@ snapshots: rimraf@3.0.2: dependencies: glob: 7.2.3 + optional: true rimraf@6.1.2: dependencies: @@ -19964,6 +19754,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 +20040,7 @@ snapshots: - bufferutil - supports-color - utf-8-validate + optional: true socket.io-parser@4.2.4: dependencies: @@ -20256,6 +20048,7 @@ snapshots: debug: 4.3.6 transitivePeerDependencies: - supports-color + optional: true socket.io@4.8.1: dependencies: @@ -20270,6 +20063,7 @@ snapshots: - bufferutil - supports-color - utf-8-validate + optional: true sockjs@0.3.24: dependencies: @@ -20392,6 +20186,7 @@ snapshots: fs-extra: 8.1.0 transitivePeerDependencies: - supports-color + optional: true string-argv@0.3.2: {} @@ -20699,7 +20494,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 +20731,8 @@ snapshots: - tsx - yaml - void-elements@2.0.1: {} + void-elements@2.0.1: + optional: true vscode-uri@3.0.8: {} @@ -21160,7 +20957,8 @@ snapshots: wrappy@1.0.2: {} - ws@8.17.1: {} + ws@8.17.1: + optional: true ws@8.18.3: {} @@ -21197,7 +20995,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 +21011,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 +21056,5 @@ snapshots: zod@4.3.5: {} - zone.js@0.16.0: {} + zone.js@0.16.0: + optional: true 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
@@ -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/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..a0dcc37c60 100644 --- a/examples/angular/column-pinning/tsconfig.app.json +++ b/examples/angular/column-pinning/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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-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..3216aee646 100644 --- a/examples/angular/column-resizing-performant/package.json +++ b/examples/angular/column-resizing-performant/package.json @@ -5,36 +5,27 @@ "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" + "tslib": "^2.8.1" }, "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" } } 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) { -
+
@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/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-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..a0dcc37c60 100644 --- a/examples/angular/column-resizing-performant/tsconfig.app.json +++ b/examples/angular/column-resizing-performant/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..ce3f144d0b 100644 --- a/examples/angular/column-visibility/README.md +++ b/examples/angular/column-visibility/README.md @@ -1,27 +1,59 @@ -# Basic +# Column Visibility -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..66955353dc 100644 --- a/examples/angular/column-visibility/package.json +++ b/examples/angular/column-visibility/package.json @@ -5,27 +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" + "tslib": "^2.8.1" }, "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" } } 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/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/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/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..a0dcc37c60 100644 --- a/examples/angular/editable/tsconfig.app.json +++ b/examples/angular/editable/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..346867835b 100644 --- a/examples/angular/expanding/package.json +++ b/examples/angular/expanding/package.json @@ -5,29 +5,27 @@ "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" + "tslib": "^2.8.1" }, "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" } } 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 90% rename from examples/angular/expanding/src/app/app.component.html rename to examples/angular/expanding/src/app/app.html index eda9af7f2e..e6a5bcdb0d 100644 --- a/examples/angular/expanding/src/app/app.component.html +++ b/examples/angular/expanding/src/app/app.html @@ -30,11 +30,7 @@ @for (cell of row.getAllCells(); track cell.id) { @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,9 @@
{{ 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..a0dcc37c60 100644 --- a/examples/angular/filters/tsconfig.app.json +++ b/examples/angular/filters/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..41591cb069 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" + "tslib": "^2.8.1" }, "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" } } 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 79% rename from examples/angular/grouping/src/app/app.component.html rename to examples/angular/grouping/src/app/app.html index c80bd252a1..7e51a6e50f 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 }}
@@ -62,13 +53,7 @@ > {{ row.getIsExpanded() ? '👇 ' : '👉' }} - + {{ cell }} {{ ' ' }}{{ row.subRows.length }} @@ -77,8 +62,7 @@ } @else if (cell.getIsPlaceholder()) { - } @else { - + {{ cell }} } @@ -154,10 +131,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/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/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..a0dcc37c60 100644 --- a/examples/angular/grouping/tsconfig.app.json +++ b/examples/angular/grouping/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..39afd34914 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"], @@ -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/remote-data/package.json b/examples/angular/remote-data/package.json index bdcc8abaa4..28ad2f4c2a 100644 --- a/examples/angular/remote-data/package.json +++ b/examples/angular/remote-data/package.json @@ -8,11 +8,11 @@ "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, "dependencies": { - "@angular/animations": "^21.1.0", "@angular/common": "^21.1.0", "@angular/compiler": "^21.1.0", "@angular/core": "^21.1.0", @@ -24,8 +24,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 87% rename from examples/angular/remote-data/src/app/app.component.html rename to examples/angular/remote-data/src/app/app.html index d9778e2392..f0544dc952 100644 --- a/examples/angular/remote-data/src/app/app.component.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/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/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/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"] -} 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..3f19375c7e 100644 --- a/examples/angular/row-dnd/package.json +++ b/examples/angular/row-dnd/package.json @@ -6,36 +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/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" + "tslib": "^2.8.1" }, "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" } } 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/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-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..a0dcc37c60 100644 --- a/examples/angular/row-dnd/tsconfig.app.json +++ b/examples/angular/row-dnd/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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-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) { - +
@@ -195,10 +170,7 @@
- +
+
-
@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..a0dcc37c60 100644 --- a/examples/angular/column-visibility/tsconfig.app.json +++ b/examples/angular/column-visibility/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..0559feb416 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" + "tslib": "^2.8.1" }, "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" } } 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/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 @@
@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/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..a0dcc37c60 100644 --- a/examples/angular/composable-tables/tsconfig.app.json +++ b/examples/angular/composable-tables/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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/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..5fc340228c --- /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": { + "custom-plugin": { + "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": "custom-plugin:build:production" + }, + "development": { + "buildTarget": "custom-plugin: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..2c1597fde5 --- /dev/null +++ b/examples/angular/custom-plugin/package.json @@ -0,0 +1,30 @@ +{ + "name": "tanstack-table-example-angular-custom-plugin", + "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.2", + "tslib": "^2.8.1" + }, + "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/composable-tables/src/favicon.ico b/examples/angular/custom-plugin/public/favicon.ico similarity index 100% rename from examples/angular/composable-tables/src/favicon.ico rename to examples/angular/custom-plugin/public/favicon.ico 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.css b/examples/angular/custom-plugin/src/app/app.css new file mode 100644 index 0000000000..6c6b016dc8 --- /dev/null +++ b/examples/angular/custom-plugin/src/app/app.css @@ -0,0 +1,20 @@ +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/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/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/custom-plugin/src/index.html b/examples/angular/custom-plugin/src/index.html new file mode 100644 index 0000000000..952d25ec5e --- /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..8192dca694 --- /dev/null +++ b/examples/angular/custom-plugin/src/main.ts @@ -0,0 +1,5 @@ +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 + } +} 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..68ef9e3b9c 100644 --- a/examples/angular/editable/package.json +++ b/examples/angular/editable/package.json @@ -5,36 +5,27 @@ "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" + "tslib": "^2.8.1" }, "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" } } diff --git a/examples/angular/editable/src/favicon.ico b/examples/angular/editable/public/favicon.ico similarity index 100% rename from examples/angular/editable/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 }}
@@ -93,10 +89,7 @@ /> - @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) { } 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/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/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..a0dcc37c60 100644 --- a/examples/angular/expanding/tsconfig.app.json +++ b/examples/angular/expanding/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..505945ec00 100644 --- a/examples/angular/filters/package.json +++ b/examples/angular/filters/package.json @@ -5,23 +5,22 @@ "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", - "tslib": "^2.8.1", - "zone.js": "~0.16.0" + "tslib": "^2.8.1" }, "devDependencies": { "@angular/build": "^21.1.0", 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..6807ca10ba 100644 --- a/examples/angular/filters/src/app/app.component.html +++ b/examples/angular/filters/src/app/app.html @@ -9,17 +9,10 @@ 		@if (!header.isPlaceholder) {
- + {{ headerCell }} @@ -33,10 +26,7 @@ @if (header.column.getCanFilter()) {
- +
} } @@ -50,13 +40,7 @@
- + {{ renderCell }} - +
- +
{{ 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

- +
+
- - - 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..a0dcc37c60 100644 --- a/examples/angular/row-selection/tsconfig.app.json +++ b/examples/angular/row-selection/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..d13a5c847c 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" + "tslib": "^2.8.1" }, "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" } } 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 75% rename from examples/angular/signal-input/src/app/app.component.html rename to examples/angular/signal-input/src/app/app.html index c55dcbfe3a..47cfbecbdb 100644 --- a/examples/angular/signal-input/src/app/app.component.html +++ b/examples/angular/signal-input/src/app/app.html @@ -3,16 +3,10 @@
- + - + - +
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 82% 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 index a4c4b9e3d4..ae0eae9b72 100644 --- 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 @@ -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/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..1d83676a4c 100644 --- a/examples/angular/signal-input/src/index.html +++ b/examples/angular/signal-input/src/index.html @@ -2,15 +2,12 @@ - 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..a0dcc37c60 100644 --- a/examples/angular/signal-input/tsconfig.app.json +++ b/examples/angular/signal-input/tsconfig.app.json @@ -1,10 +1,11 @@ -/* 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"] -} 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..91f751c952 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" + "tslib": "^2.8.1" }, "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" } } 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.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/app.component.html b/examples/angular/sub-components/src/app/app.html similarity index 66% rename from examples/angular/sub-components/src/app/app.component.html rename to examples/angular/sub-components/src/app/app.html index b2c63ba226..0ffb0e3046 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) { - +
} @@ -28,13 +22,7 @@
- +
- +