Skip to content

Commit 099e1a4

Browse files
riccardoperrariccardoperra
authoredFeb 3, 2025··
docs(angular): add expanding and sub components examples (#5898)
* docs(angular): add expanding example * docs(angular): add sub components example * docs(angular): fix config.json
·
v8.21.2
1 parent 57703a4 commit 099e1a4

40 files changed

+1367
-1
lines changed
 

‎docs/config.json

+8
Original file line numberDiff line numberDiff line change
@@ -435,6 +435,14 @@
435435
"to": "framework/angular/examples/row-selection",
436436
"label": "Row Selection"
437437
},
438+
{
439+
"to": "framework/angular/examples/expanding",
440+
"label": "Expanding"
441+
},
442+
{
443+
"to": "framework/angular/examples/sub-components",
444+
"label": "Sub Components"
445+
},
438446
{
439447
"to": "framework/angular/examples/signal-input",
440448
"label": "Signal Input"

‎examples/angular/expanding/.devcontainer/devcontainer.json

+4
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/expanding/.editorconfig

+16
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/expanding/.gitignore

+42
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/expanding/README.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Basic
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/expanding/angular.json

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

‎examples/angular/expanding/package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "tanstack-table-example-angular-expanding",
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+
"@angular/router": "^17.3.9",
21+
"@faker-js/faker": "^8.4.1",
22+
"@tanstack/angular-table": "^8.21.0",
23+
"rxjs": "~7.8.1",
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+
"tslib": "^2.6.2",
31+
"typescript": "5.4.5"
32+
}
33+
}

‎examples/angular/expanding/src/app/app.component.html

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<div class="p-2">
2+
<div class="h-4"></div>
3+
4+
<div class="overflow-x-auto">
5+
<table>
6+
<thead>
7+
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
8+
<tr>
9+
@for (header of headerGroup.headers; track header.id) {
10+
<th [colSpan]="header.colSpan">
11+
@if (!header.isPlaceholder) {
12+
<ng-container
13+
*flexRender="
14+
header.column.columnDef.header;
15+
props: header.getContext();
16+
let header
17+
"
18+
>
19+
<div [innerHTML]="header"></div>
20+
</ng-container>
21+
}
22+
</th>
23+
}
24+
</tr>
25+
}
26+
</thead>
27+
<tbody>
28+
@for (row of table.getRowModel().rows; track row.id) {
29+
<tr>
30+
@for (cell of row.getVisibleCells(); track cell.id) {
31+
<td>
32+
<ng-container
33+
*flexRender="
34+
cell.column.columnDef.cell;
35+
props: cell.getContext();
36+
let cell
37+
"
38+
>
39+
<div [innerHTML]="cell"></div>
40+
</ng-container>
41+
</td>
42+
}
43+
</tr>
44+
}
45+
</tbody>
46+
</table>
47+
</div>
48+
49+
<div class="h-2"></div>
50+
<div class="flex items-center gap-2">
51+
<button
52+
class="border rounded p-1"
53+
(click)="table.setPageIndex(0)"
54+
[disabled]="!table.getCanPreviousPage()"
55+
>
56+
<<
57+
</button>
58+
<button
59+
class="border rounded p-1"
60+
(click)="table.previousPage()"
61+
[disabled]="!table.getCanPreviousPage()"
62+
>
63+
<
64+
</button>
65+
<button
66+
class="border rounded p-1"
67+
(click)="table.nextPage()"
68+
[disabled]="!table.getCanNextPage()"
69+
>
70+
>
71+
</button>
72+
<button
73+
class="border rounded p-1"
74+
(click)="table.setPageIndex(table.getPageCount() - 1)"
75+
[disabled]="!table.getCanNextPage()"
76+
>
77+
>>
78+
</button>
79+
<span class="flex items-center gap-1">
80+
<div>Page</div>
81+
<strong>
82+
{{ table.getState().pagination.pageIndex + 1 }} of
83+
{{ table.getPageCount() }}
84+
</strong>
85+
</span>
86+
<span class="flex items-center gap-1">
87+
| Go to page:
88+
<input
89+
type="number"
90+
[value]="table.getState().pagination.pageIndex + 1"
91+
(input)="onPageInputChange($event)"
92+
class="border p-1 rounded w-16"
93+
/>
94+
</span>
95+
96+
<select
97+
[value]="table.getState().pagination.pageSize"
98+
(change)="onPageSizeChange($event)"
99+
>
100+
@for (pageSize of [10, 20, 30, 40, 50]; track pageSize) {
101+
<option [value]="pageSize">Show {{ pageSize }}</option>
102+
}
103+
</select>
104+
</div>
105+
106+
<label>Expanded State:</label>
107+
<pre>{{ rawExpandedState() }}</pre>
108+
<label>Row Selection State:</label>
109+
<pre>{{ rawRowSelectionState() }}</pre>
110+
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.