Skip to content

Commit 0baabdd

Browse files
riccardoperraautofix-ci[bot]
riccardoperra
and
autofix-ci[bot]
authored
docs(angular): add editable, row-dnd and performant column resizing example (#5881)
* add editable cell example * add editable cell example * row dnd exmaple * revert basic * ci: apply automated fixes * column resizing performant example * fix * fix budgets * ci: apply automated fixes * typo --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 0caf695 commit 0baabdd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+2147
-67
lines changed

‎docs/config.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -438,6 +438,18 @@
438438
{
439439
"to": "framework/angular/examples/signal-input",
440440
"label": "Signal Input"
441+
},
442+
{
443+
"to": "framework/angular/examples/editable",
444+
"label": "Editable data"
445+
},
446+
{
447+
"to": "framework/angular/examples/row-dnd",
448+
"label": "Row DnD"
449+
},
450+
{
451+
"to": "framework/angular/examples/column-resizing-performant",
452+
"label": "Performant Column Resizing"
441453
}
442454
]
443455
},

‎examples/angular/column-resizing-performant/.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/column-resizing-performant/.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/column-resizing-performant/.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/column-resizing-performant/README.md‎

Lines changed: 27 additions & 0 deletions
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/column-resizing-performant/angular.json‎

Lines changed: 83 additions & 0 deletions
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+
"column-resizing-performant": {
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/column-resizing-performant",
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": "column-resizing-performant:build:production"
53+
},
54+
"development": {
55+
"buildTarget": "column-resizing-performant:build:development"
56+
}
57+
},
58+
"defaultConfiguration": "development"
59+
},
60+
"extract-i18n": {
61+
"builder": "@angular-devkit/build-angular:extract-i18n",
62+
"options": {
63+
"buildTarget": "column-resizing-performant: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/column-resizing-performant/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-column-resizing-performant",
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+
"@tanstack/angular-table": "^8.21.0",
22+
"rxjs": "~7.8.1",
23+
"zone.js": "~0.14.4"
24+
},
25+
"devDependencies": {
26+
"@angular-devkit/build-angular": "^17.3.8",
27+
"@angular/cli": "^17.3.8",
28+
"@angular/compiler-cli": "^17.3.9",
29+
"@types/jasmine": "~5.1.4",
30+
"jasmine-core": "~5.1.2",
31+
"karma": "~6.4.3",
32+
"karma-chrome-launcher": "~3.2.0",
33+
"karma-coverage": "~2.2.1",
34+
"karma-jasmine": "~5.1.0",
35+
"karma-jasmine-html-reporter": "~2.1.0",
36+
"tslib": "^2.6.2",
37+
"typescript": "5.4.5"
38+
}
39+
}

‎examples/angular/column-resizing-performant/src/app/app.component.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<div class="p-2">
2+
<div class="h-4"></div>
3+
<pre [style.min-height]="'10rem'">
4+
{{ columnSizingDebugInfo() }}
5+
</pre>
6+
<div class="h-4"></div>
7+
8+
({{ data().length }} rows)
9+
10+
<div class="overflow-x-auto">
11+
<div
12+
class="divTable"
13+
[style]="columnSizeVars()"
14+
[style.width.px]="table.getTotalSize()"
15+
>
16+
<div class="thead">
17+
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
18+
<div class="tr">
19+
@for (header of headerGroup.headers; track header.id) {
20+
<div class="th" [tableResizableHeader]="header.id">
21+
@if (!header.isPlaceholder) {
22+
<ng-container
23+
*flexRender="
24+
header.column.columnDef.header;
25+
props: header.getContext();
26+
let header
27+
"
28+
>
29+
<div [innerHTML]="header"></div>
30+
</ng-container>
31+
}
32+
33+
<div
34+
class="resizer"
35+
[class.isResizing]="header.column.getIsResizing()"
36+
(dblclick)="header.column.resetSize()"
37+
(mousedown)="header.getResizeHandler()($event)"
38+
(touchstart)="header.getResizeHandler()($event)"
39+
></div>
40+
</div>
41+
}
42+
</div>
43+
}
44+
</div>
45+
<div class="tbody">
46+
@for (row of table.getRowModel().rows; track row.id) {
47+
<tr class="tr">
48+
@for (cell of row.getVisibleCells(); track cell.id) {
49+
<td class="td" [tableResizableCell]="cell.column.id">
50+
<ng-container
51+
*flexRender="
52+
cell.column.columnDef.cell;
53+
props: cell.getContext();
54+
let cell
55+
"
56+
>
57+
<div [innerHTML]="cell"></div>
58+
</ng-container>
59+
</td>
60+
}
61+
</tr>
62+
}
63+
</div>
64+
</div>
65+
</div>
66+
</div>

0 commit comments

Comments
 (0)