feat(angular-table): Added support for custom component renderer with signal

examples/angular/row-selection-signal/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+ "name": "Node.js",
+ "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/angular/row-selection-signal/.editorconfig

@@ -0,0 +1,16 @@
+# 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

examples/angular/row-selection-signal/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-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
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

examples/angular/row-selection-signal/README.md

@@ -0,0 +1,27 @@
+# Selection
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2.
+
+## 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.
+
+## 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`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## 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.
+
+## Further help
+
+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.

examples/angular/row-selection-signal/angular.json

@@ -0,0 +1,81 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "selection": {
+ "projectType": "application",
+ "schematics": {
+ "@schematics/angular:component": {
+ "style": "scss"
+ }
+ },
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:application",
+ "options": {
+ "outputPath": "dist/selection-signal",
+ "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": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "selection:build:production"
+ },
+ "development": {
+ "buildTarget": "selection:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "selection: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,
+ "cache": {
+ "enabled": false
+ }
+ }
+}

examples/angular/row-selection-signal/package.json

@@ -0,0 +1,39 @@
+{
+ "name": "tanstack-table-example-angular-row-selection-signal",
+ "version": "0.0.0",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "watch": "ng build --watch --configuration development",
+ "test": "ng test"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/animations": "^17.3.9",
+ "@angular/common": "^17.3.9",
+ "@angular/compiler": "^17.3.9",
+ "@angular/core": "^17.3.9",
+ "@angular/forms": "^17.3.9",
+ "@angular/platform-browser": "^17.3.9",
+ "@angular/platform-browser-dynamic": "^17.3.9",
+ "@faker-js/faker": "^8.4.1",
+ "@tanstack/angular-table": "^8.18.1",
+ "rxjs": "~7.8.1",
+ "tslib": "^2.6.2",
+ "zone.js": "~0.14.4"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "^17.3.8",
+ "@angular/cli": "^17.3.8",
+ "@angular/compiler-cli": "^17.3.9",
+ "@types/jasmine": "~5.1.4",
+ "jasmine-core": "~5.1.2",
+ "karma": "~6.4.3",
+ "karma-chrome-launcher": "~3.2.0",
+ "karma-coverage": "~2.2.1",
+ "karma-jasmine": "~5.1.0",
+ "karma-jasmine-html-reporter": "~2.1.0",
+ "typescript": "5.4.5"
+ }
+}

examples/angular/row-selection-signal/src/app/app.component.html

@@ -0,0 +1,152 @@
+<div class="p-2">
+ <div class="h-2"></div>
+
+ <table>
+ <thead>
+ @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
+ <tr>
+ @for (header of headerGroup.headers; track header.id) {
+ <th [attr.colSpan]="header.colSpan">
+ @if (!header.isPlaceholder) {
+ <ng-container
+ *flexRender="
+ header.column.columnDef.header;
+ props: header.getContext();
+ let headerCell
+ "
+ >
+ {{ headerCell }}
+ </ng-container>
+
+ @if (header.column.getCanFilter()) {
+ <div>
+ <app-table-filter
+ [column]="header.column"
+ [table]="table"
+ />
+ </div>
+ }
+ }
+ </th>
+ }
+ </tr>
+ }
+ </thead>
+ <tbody>
+ @for (row of table.getRowModel().rows; track row.id) {
+ <tr>
+ @for (cell of row.getVisibleCells(); track cell.id) {
+ <td>
+ <ng-container
+ *flexRender="
+ cell.column.columnDef.cell;
+ props: cell.getContext();
+ let renderCell
+ "
+ >
+ {{ renderCell }}
+ </ng-container>
+ </td>
+ }
+ </tr>
+ }
+ </tbody>
+ <tfoot>
+ <tr>
+ <td class="p-1">
+ <input
+ type="checkbox"
+ [checked]="table.getIsAllPageRowsSelected()"
+ [indeterminate]="table.getIsSomePageRowsSelected()"
+ (change)="table.toggleAllPageRowsSelected()"
+ />
+ </td>
+ <td [attr.colspan]="20">
+ Page Rows ({{ table.getRowModel().rows.length }})
+ </td>
+ </tr>
+ </tfoot>
+ </table>
+
+ <div class="h-2"></div>
+ <div class="flex items-center gap-2">
+ <button
+ class="border rounded p-1"
+ (click)="table.setPageIndex(0)"
+ [disabled]="!table.getCanPreviousPage()"
+ >
+ <<
+ </button>
+ <button
+ class="border rounded p-1"
+ (click)="table.previousPage()"
+ [disabled]="!table.getCanPreviousPage()"
+ >
+ <
+ </button>
+ <button
+ class="border rounded p-1"
+ (click)="table.nextPage()"
+ [disabled]="!table.getCanNextPage()"
+ >
+ >
+ </button>
+ <button
+ class="border rounded p-1"
+ (click)="table.setPageIndex(table.getPageCount() - 1)"
+ [disabled]="!table.getCanNextPage()"
+ >
+ >>
+ </button>
+ <span class="flex items-center gap-1">
+ <div>Page</div>
+ <strong>
+ {{ table.getState().pagination.pageIndex + 1 }} of
+ {{ table.getPageCount() }}
+ </strong>
+ </span>
+ <span class="flex items-center gap-1">
+ | Go to page:
+ <input
+ type="number"
+ [value]="table.getState().pagination.pageIndex + 1"
+ (input)="onPageInputChange($event)"
+ class="border p-1 rounded w-16"
+ />
+ </span>
+
+ <select
+ [value]="table.getState().pagination.pageSize"
+ (change)="onPageSizeChange($event)"
+ >
+ @for (pageSize of [10, 20, 30, 40, 50]; track pageSize) {
+ <option [value]="pageSize">Show {{ pageSize }}</option>
+ }
+ </select>
+ </div>
+ <br />
+ <div>
+ {{ rowSelectionLength() }} of
+ {{ table.getPreFilteredRowModel().rows.length }} Total Rows
+ </div>
+ <hr />
+ <br />
+ <div>
+ <button class="border rounded p-2 mb-2" (click)="refreshData()">
+ Refresh Data
+ </button>
+ </div>
+ <div>
+ <button class="border rounded p-2 mb-2" (click)="logSelectedFlatRows()">
+ Log table.getSelectedRowModel().flatRows
+ </button>
+ </div>
+ <div>
+ <label>Row Selection State:</label>
+ <pre>{{ stringifiedRowSelection() }}</pre>
+ </div>
+</div>
+
+<ng-template #ageHeaderCell let-context>
+ <span>Age 🥳</span>
+</ng-template>