Skip to content

Commit 3211ed8

Browse files
riccardoperrariccardoperra
authored
docs(angular): add remote data with ssr example (#5914)
* docs(angular): add remote data with ssr example
1 parent 2a41a7e commit 3211ed8

24 files changed

+1225
-55
lines changed

‎docs/config.json

+4
Original file line numberDiff line numberDiff line change
@@ -458,6 +458,10 @@
458458
{
459459
"to": "framework/angular/examples/column-resizing-performant",
460460
"label": "Performant Column Resizing"
461+
},
462+
{
463+
"to": "framework/angular/examples/remote-data",
464+
"label": "Remote data (optional SSR)"
461465
}
462466
]
463467
},

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@ import {
55
signal,
66
untracked,
77
} from '@angular/core'
8+
import type { ColumnDef, ColumnResizeMode } from '@tanstack/angular-table'
89
import {
9-
FlexRenderDirective,
1010
columnResizingFeature,
1111
columnSizingFeature,
12+
FlexRenderDirective,
1213
injectTable,
1314
tableFeatures,
1415
} from '@tanstack/angular-table'
16+
import type { Person } from './makeData'
1517
import { makeData } from './makeData'
1618
import { TableResizableCell, TableResizableHeader } from './resizable-cell'
17-
import type { Person } from './makeData'
18-
import type { ColumnDef, ColumnResizeMode } from '@tanstack/angular-table'
1919

2020
const _features = tableFeatures({
2121
columnSizingFeature,

‎examples/angular/remote-data/.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/remote-data/.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/remote-data/.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/remote-data/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/remote-data/angular.json

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"remote-data": {
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/remote-data",
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+
"outputMode": "server",
40+
"server": "src/main.server.ts",
41+
"ssr": {
42+
"entry": "src/server.ts"
43+
}
44+
},
45+
"no-ssr": {
46+
"budgets": [],
47+
"outputHashing": "all",
48+
"prerender": false,
49+
"ssr": false
50+
},
51+
"development": {
52+
"optimization": false,
53+
"extractLicenses": false,
54+
"sourceMap": true,
55+
"outputMode": "server",
56+
"server": "src/main.server.ts",
57+
"ssr": {
58+
"entry": "src/server.ts"
59+
}
60+
}
61+
},
62+
"defaultConfiguration": "production"
63+
},
64+
"serve": {
65+
"builder": "@angular-devkit/build-angular:dev-server",
66+
"configurations": {
67+
"production": {
68+
"buildTarget": "remote-data:build:production"
69+
},
70+
"no-ssr": {
71+
"buildTarget": "remote-data:build:no-ssr"
72+
},
73+
"development": {
74+
"buildTarget": "remote-data:build:development"
75+
}
76+
},
77+
"defaultConfiguration": "development"
78+
},
79+
"extract-i18n": {
80+
"builder": "@angular-devkit/build-angular:extract-i18n",
81+
"options": {
82+
"buildTarget": "remote-data:build"
83+
}
84+
},
85+
"test": {
86+
"builder": "@angular-devkit/build-angular:karma",
87+
"options": {
88+
"polyfills": ["zone.js", "zone.js/testing"],
89+
"tsConfig": "tsconfig.spec.json",
90+
"inlineStyleLanguage": "scss",
91+
"assets": ["src/favicon.ico", "src/assets"],
92+
"styles": ["src/styles.scss"],
93+
"scripts": []
94+
}
95+
}
96+
}
97+
}
98+
},
99+
"cli": {
100+
"analytics": false
101+
}
102+
}

‎examples/angular/remote-data/package.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "tanstack-table-example-angular-remote-data",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"start:no-ssr": "ng serve --configuration=no-ssr",
8+
"build": "ng build",
9+
"watch": "ng build --watch --configuration development",
10+
"test": "ng test",
11+
"serve:ssr:remote-data": "node dist/remote-data/server/server.mjs"
12+
},
13+
"private": true,
14+
"dependencies": {
15+
"@angular/animations": "^19.1.4",
16+
"@angular/common": "^19.1.4",
17+
"@angular/compiler": "^19.1.4",
18+
"@angular/core": "^19.1.4",
19+
"@angular/forms": "^19.1.4",
20+
"@angular/platform-browser": "^19.1.4",
21+
"@angular/platform-browser-dynamic": "^19.1.4",
22+
"@angular/platform-server": "^19.1.4",
23+
"@angular/router": "^19.1.4",
24+
"@angular/ssr": "^19.1.5",
25+
"@tanstack/angular-table": "^9.0.0-alpha.10",
26+
"express": "^4.18.2",
27+
"rxjs": "~7.8.1",
28+
"zone.js": "~0.15.0"
29+
},
30+
"devDependencies": {
31+
"@angular-devkit/build-angular": "^19.1.5",
32+
"@angular/cli": "^19.1.5",
33+
"@angular/compiler-cli": "^19.1.4",
34+
"@types/express": "^4.17.17",
35+
"@types/node": "^18.18.0",
36+
"tslib": "^2.6.2",
37+
"typescript": "5.7.3"
38+
}
39+
}

‎examples/angular/remote-data/src/app/app.component.html

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<div class="p-2">
2+
<div>
3+
<input
4+
(change)="table.setGlobalFilter($any($event.currentTarget).value)"
5+
placeholder="Search..."
6+
/>
7+
</div>
8+
9+
<div class="overflow-x-auto">
10+
<table>
11+
<thead>
12+
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
13+
<tr>
14+
@for (header of headerGroup.headers; track header.id) {
15+
<th
16+
[colSpan]="header.colSpan"
17+
(click)="header.column.getToggleSortingHandler()?.($event)"
18+
>
19+
@if (!header.isPlaceholder) {
20+
<div
21+
[class.cursor-pointer]="header.column.getCanSort()"
22+
class="flex gap-2"
23+
>
24+
<ng-container
25+
*flexRender="
26+
header.column.columnDef.header;
27+
props: header.getContext();
28+
let header
29+
"
30+
>
31+
<div [innerHTML]="header"></div>
32+
</ng-container>
33+
34+
@if (header.column.getIsSorted() === 'asc') {
35+
<span>🔼</span>
36+
}
37+
@if (header.column.getIsSorted() === 'desc') {
38+
<span>🔽</span>
39+
}
40+
</div>
41+
}
42+
</th>
43+
}
44+
</tr>
45+
}
46+
</thead>
47+
<tbody>
48+
@for (row of table.getRowModel().rows; track row.id) {
49+
<!-- first row is a normal row -->
50+
<tr>
51+
@for (cell of row.getAllCells(); track cell.id) {
52+
<td>
53+
<ng-container
54+
*flexRender="
55+
cell.column.columnDef.cell;
56+
props: cell.getContext();
57+
let cell
58+
"
59+
>
60+
<div [innerHTML]="cell"></div>
61+
</ng-container>
62+
</td>
63+
}
64+
</tr>
65+
}
66+
</tbody>
67+
</table>
68+
</div>
69+
70+
@if (data.isLoading()) {
71+
Loading...
72+
}
73+
</div>
74+
75+
<div class="h-2"></div>
76+
<div class="flex items-center gap-2">
77+
<button
78+
class="border rounded p-1"
79+
(click)="table.setPageIndex(0)"
80+
[disabled]="!table.getCanPreviousPage()"
81+
>
82+
<<
83+
</button>
84+
<button
85+
class="border rounded p-1"
86+
(click)="table.previousPage()"
87+
[disabled]="!table.getCanPreviousPage()"
88+
>
89+
<
90+
</button>
91+
<button
92+
class="border rounded p-1"
93+
(click)="table.nextPage()"
94+
[disabled]="!table.getCanNextPage()"
95+
>
96+
>
97+
</button>
98+
<button
99+
class="border rounded p-1"
100+
(click)="table.setPageIndex(table.getPageCount() - 1)"
101+
[disabled]="!table.getCanNextPage()"
102+
>
103+
>>
104+
</button>
105+
<span class="flex items-center gap-1">
106+
<div>Page</div>
107+
<strong>
108+
{{ table.getState().pagination.pageIndex + 1 }} of
109+
{{ table.getPageCount() }}
110+
</strong>
111+
</span>
112+
<span class="flex items-center gap-1">
113+
| Go to page:
114+
<input
115+
type="number"
116+
[value]="table.getState().pagination.pageIndex + 1"
117+
(input)="onPageInputChange($event)"
118+
class="border p-1 rounded w-16"
119+
/>
120+
</span>
121+
122+
<select
123+
[value]="table.getState().pagination.pageSize"
124+
(change)="onPageSizeChange($event)"
125+
>
126+
@for (pageSize of [10, 20, 30, 40, 50]; track pageSize) {
127+
<option [value]="pageSize">Show {{ pageSize }}</option>
128+
}
129+
</select>
130+
</div>

0 commit comments

Comments
 (0)