Skip to content

Commit 3ae414c

Browse files
merto20merto20
authored
feat(angular-table): Added support for custom component renderer with signal (#5576)
* feat(angular-table): Added support for custom component renderer with signal * Fix PR check error, update pnpm-lock.yaml * feat(angular-table): updated lock file * feat(angular-table): update pnpm-lock.yaml * feat(angular-table): update row-selection-signal's angular version * feat(angular-table): update pnpm-lock.yaml * feat(anguar-table): added unit test * feat(angular-table): commented unit test for custom component * feat(angular-table): skip test for custom component * feat(angular-table): skip test for custom component
1 parent 6fde695 commit 3ae414c

23 files changed

+912
-17
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "Node.js",
3+
"image": "mcr.microsoft.com/devcontainers/javascript-node:18"
4+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Selection
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2.
4+
5+
## Development server
6+
7+
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.
8+
9+
## Code scaffolding
10+
11+
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`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
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.
24+
25+
## Further help
26+
27+
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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"selection": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:component": {
10+
"style": "scss"
11+
}
12+
},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:application",
19+
"options": {
20+
"outputPath": "dist/selection-signal",
21+
"index": "src/index.html",
22+
"browser": "src/main.ts",
23+
"polyfills": ["zone.js"],
24+
"tsConfig": "tsconfig.app.json",
25+
"inlineStyleLanguage": "scss",
26+
"assets": ["src/favicon.ico", "src/assets"],
27+
"styles": ["src/styles.scss"],
28+
"scripts": []
29+
},
30+
"configurations": {
31+
"production": {
32+
"budgets": [],
33+
"outputHashing": "all"
34+
},
35+
"development": {
36+
"optimization": false,
37+
"extractLicenses": false,
38+
"sourceMap": true
39+
}
40+
},
41+
"defaultConfiguration": "production"
42+
},
43+
"serve": {
44+
"builder": "@angular-devkit/build-angular:dev-server",
45+
"configurations": {
46+
"production": {
47+
"buildTarget": "selection:build:production"
48+
},
49+
"development": {
50+
"buildTarget": "selection:build:development"
51+
}
52+
},
53+
"defaultConfiguration": "development"
54+
},
55+
"extract-i18n": {
56+
"builder": "@angular-devkit/build-angular:extract-i18n",
57+
"options": {
58+
"buildTarget": "selection:build"
59+
}
60+
},
61+
"test": {
62+
"builder": "@angular-devkit/build-angular:karma",
63+
"options": {
64+
"polyfills": ["zone.js", "zone.js/testing"],
65+
"tsConfig": "tsconfig.spec.json",
66+
"inlineStyleLanguage": "scss",
67+
"assets": ["src/favicon.ico", "src/assets"],
68+
"styles": ["src/styles.scss"],
69+
"scripts": []
70+
}
71+
}
72+
}
73+
}
74+
},
75+
"cli": {
76+
"analytics": false,
77+
"cache": {
78+
"enabled": false
79+
}
80+
}
81+
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "tanstack-table-example-angular-row-selection-signal",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^17.3.9",
14+
"@angular/common": "^17.3.9",
15+
"@angular/compiler": "^17.3.9",
16+
"@angular/core": "^17.3.9",
17+
"@angular/forms": "^17.3.9",
18+
"@angular/platform-browser": "^17.3.9",
19+
"@angular/platform-browser-dynamic": "^17.3.9",
20+
"@faker-js/faker": "^8.4.1",
21+
"@tanstack/angular-table": "^8.18.1",
22+
"rxjs": "~7.8.1",
23+
"tslib": "^2.6.2",
24+
"zone.js": "~0.14.4"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "^17.3.8",
28+
"@angular/cli": "^17.3.8",
29+
"@angular/compiler-cli": "^17.3.9",
30+
"@types/jasmine": "~5.1.4",
31+
"jasmine-core": "~5.1.2",
32+
"karma": "~6.4.3",
33+
"karma-chrome-launcher": "~3.2.0",
34+
"karma-coverage": "~2.2.1",
35+
"karma-jasmine": "~5.1.0",
36+
"karma-jasmine-html-reporter": "~2.1.0",
37+
"typescript": "5.4.5"
38+
}
39+
}

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

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<div class="p-2">
2+
<div class="h-2"></div>
3+
4+
<table>
5+
<thead>
6+
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
7+
<tr>
8+
@for (header of headerGroup.headers; track header.id) {
9+
<th [attr.colSpan]="header.colSpan">
10+
@if (!header.isPlaceholder) {
11+
<ng-container
12+
*flexRender="
13+
header.column.columnDef.header;
14+
props: header.getContext();
15+
let headerCell
16+
"
17+
>
18+
{{ headerCell }}
19+
</ng-container>
20+
21+
@if (header.column.getCanFilter()) {
22+
<div>
23+
<app-table-filter
24+
[column]="header.column"
25+
[table]="table"
26+
/>
27+
</div>
28+
}
29+
}
30+
</th>
31+
}
32+
</tr>
33+
}
34+
</thead>
35+
<tbody>
36+
@for (row of table.getRowModel().rows; track row.id) {
37+
<tr>
38+
@for (cell of row.getVisibleCells(); track cell.id) {
39+
<td>
40+
<ng-container
41+
*flexRender="
42+
cell.column.columnDef.cell;
43+
props: cell.getContext();
44+
let renderCell
45+
"
46+
>
47+
{{ renderCell }}
48+
</ng-container>
49+
</td>
50+
}
51+
</tr>
52+
}
53+
</tbody>
54+
<tfoot>
55+
<tr>
56+
<td class="p-1">
57+
<input
58+
type="checkbox"
59+
[checked]="table.getIsAllPageRowsSelected()"
60+
[indeterminate]="table.getIsSomePageRowsSelected()"
61+
(change)="table.toggleAllPageRowsSelected()"
62+
/>
63+
</td>
64+
<td [attr.colspan]="20">
65+
Page Rows ({{ table.getRowModel().rows.length }})
66+
</td>
67+
</tr>
68+
</tfoot>
69+
</table>
70+
71+
<div class="h-2"></div>
72+
<div class="flex items-center gap-2">
73+
<button
74+
class="border rounded p-1"
75+
(click)="table.setPageIndex(0)"
76+
[disabled]="!table.getCanPreviousPage()"
77+
>
78+
<<
79+
</button>
80+
<button
81+
class="border rounded p-1"
82+
(click)="table.previousPage()"
83+
[disabled]="!table.getCanPreviousPage()"
84+
>
85+
<
86+
</button>
87+
<button
88+
class="border rounded p-1"
89+
(click)="table.nextPage()"
90+
[disabled]="!table.getCanNextPage()"
91+
>
92+
>
93+
</button>
94+
<button
95+
class="border rounded p-1"
96+
(click)="table.setPageIndex(table.getPageCount() - 1)"
97+
[disabled]="!table.getCanNextPage()"
98+
>
99+
>>
100+
</button>
101+
<span class="flex items-center gap-1">
102+
<div>Page</div>
103+
<strong>
104+
{{ table.getState().pagination.pageIndex + 1 }} of
105+
{{ table.getPageCount() }}
106+
</strong>
107+
</span>
108+
<span class="flex items-center gap-1">
109+
| Go to page:
110+
<input
111+
type="number"
112+
[value]="table.getState().pagination.pageIndex + 1"
113+
(input)="onPageInputChange($event)"
114+
class="border p-1 rounded w-16"
115+
/>
116+
</span>
117+
118+
<select
119+
[value]="table.getState().pagination.pageSize"
120+
(change)="onPageSizeChange($event)"
121+
>
122+
@for (pageSize of [10, 20, 30, 40, 50]; track pageSize) {
123+
<option [value]="pageSize">Show {{ pageSize }}</option>
124+
}
125+
</select>
126+
</div>
127+
<br />
128+
<div>
129+
{{ rowSelectionLength() }} of
130+
{{ table.getPreFilteredRowModel().rows.length }} Total Rows
131+
</div>
132+
<hr />
133+
<br />
134+
<div>
135+
<button class="border rounded p-2 mb-2" (click)="refreshData()">
136+
Refresh Data
137+
</button>
138+
</div>
139+
<div>
140+
<button class="border rounded p-2 mb-2" (click)="logSelectedFlatRows()">
141+
Log table.getSelectedRowModel().flatRows
142+
</button>
143+
</div>
144+
<div>
145+
<label>Row Selection State:</label>
146+
<pre>{{ stringifiedRowSelection() }}</pre>
147+
</div>
148+
</div>
149+
150+
<ng-template #ageHeaderCell let-context>
151+
<span>Age 🥳</span>
152+
</ng-template>

0 commit comments

Comments
 (0)