Skip to content

Commit 889e83f

Browse files
riccardoperraautofix-ci[bot]
riccardoperra
and
autofix-ci[bot]
authored
feat(angular): Add angular table composability (#6144)
* feat(angular): wip add table context and hook helpers * ci: apply automated fixes * update composable table example * add some directives to provide table context * remove lazyInit set property workaround * ci: apply automated fixes * fix garbage collection issues in angular * fix: avoid creating computed cache for methods that need an object as an argument * refactor toComputed, add some tests * refactor(injectTable): improve type definitions and enhance reactivity in table subscription * refactor(reactivity): enhance memoization and improve reactivity checks * add table cell contexts * cleanup * fixes some examples * refactor flexRender to work with signals * refactor flexRender implementation to work with signals, add FlexRenderCell docs * cleanup examples * cleanup structure * table state selector fix for angular * basic app table example * code review fixes * flex render run content(props) in injection context * createTableHook add typed helpers * refactor composable table examples with products/users table components, add missing header/table components * ci: apply automated fixes * refactor table components to use inject functions and update documentation * ci: apply automated fixes * fix: update comment to reflect usage of injectTable hook in app.component.ts * fix: update documentation for injectFlexRenderCellContext to clarify cell-level typings * fix: update RowActionsCell to use typed injectTableCellContext with Person type --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 522fdc7 commit 889e83f

File tree

87 files changed

+3434
-553
lines changed

Some content is hidden

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

87 files changed

+3434
-553
lines changed

‎examples/angular/basic-app-table/.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/basic-app-table/.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/basic-app-table/.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/basic-app-table/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/basic-app-table/angular.json‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"basic-app-table": {
7+
"cli": {
8+
"cache": {
9+
"enabled": false
10+
}
11+
},
12+
"projectType": "application",
13+
"schematics": {
14+
"@schematics/angular:component": {
15+
"inlineTemplate": true,
16+
"inlineStyle": true,
17+
"skipTests": true,
18+
"style": "scss"
19+
},
20+
"@schematics/angular:class": {
21+
"skipTests": true
22+
},
23+
"@schematics/angular:directive": {
24+
"skipTests": true
25+
},
26+
"@schematics/angular:guard": {
27+
"skipTests": true
28+
},
29+
"@schematics/angular:interceptor": {
30+
"skipTests": true
31+
},
32+
"@schematics/angular:pipe": {
33+
"skipTests": true
34+
},
35+
"@schematics/angular:resolver": {
36+
"skipTests": true
37+
},
38+
"@schematics/angular:service": {
39+
"skipTests": true
40+
}
41+
},
42+
"root": "",
43+
"sourceRoot": "src",
44+
"prefix": "app",
45+
"architect": {
46+
"build": {
47+
"builder": "@angular/build:application",
48+
"options": {
49+
"outputPath": "dist/basic-app-table",
50+
"index": "src/index.html",
51+
"browser": "src/main.ts",
52+
"polyfills": ["zone.js"],
53+
"tsConfig": "tsconfig.app.json",
54+
"inlineStyleLanguage": "scss",
55+
"assets": ["src/favicon.ico", "src/assets"],
56+
"styles": ["src/styles.scss"],
57+
"scripts": []
58+
},
59+
"configurations": {
60+
"production": {
61+
"budgets": [
62+
{
63+
"type": "initial",
64+
"maximumWarning": "500kb",
65+
"maximumError": "1mb"
66+
},
67+
{
68+
"type": "anyComponentStyle",
69+
"maximumWarning": "2kb",
70+
"maximumError": "4kb"
71+
}
72+
],
73+
"outputHashing": "all"
74+
},
75+
"development": {
76+
"optimization": false,
77+
"extractLicenses": false,
78+
"sourceMap": true
79+
}
80+
},
81+
"defaultConfiguration": "production"
82+
},
83+
"serve": {
84+
"builder": "@angular/build:dev-server",
85+
"configurations": {
86+
"production": {
87+
"buildTarget": "basic-app-table:build:production"
88+
},
89+
"development": {
90+
"buildTarget": "basic-app-table:build:development"
91+
}
92+
},
93+
"defaultConfiguration": "development"
94+
},
95+
"extract-i18n": {
96+
"builder": "@angular/build:extract-i18n",
97+
"options": {
98+
"buildTarget": "basic-app-table:build"
99+
}
100+
}
101+
}
102+
}
103+
},
104+
"cli": {
105+
"analytics": false
106+
}
107+
}

‎examples/angular/basic-app-table/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "tanstack-table-example-angular-basic",
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+
"lint": "eslint ./src"
11+
},
12+
"private": true,
13+
"dependencies": {
14+
"@angular/common": "^21.0.6",
15+
"@angular/compiler": "^21.0.6",
16+
"@angular/core": "^21.0.6",
17+
"@angular/forms": "^21.0.6",
18+
"@angular/platform-browser": "^21.0.6",
19+
"@angular/platform-browser-dynamic": "^21.0.6",
20+
"@angular/router": "^21.0.6",
21+
"@tanstack/angular-table": "^9.0.0-alpha.10",
22+
"rxjs": "~7.8.2",
23+
"zone.js": "~0.16.0"
24+
},
25+
"devDependencies": {
26+
"@angular/build": "^21.0.4",
27+
"@angular/cli": "^21.0.4",
28+
"@angular/compiler-cli": "^21.0.6",
29+
"@types/jasmine": "~5.1.13",
30+
"jasmine-core": "~5.13.0",
31+
"tslib": "^2.8.1",
32+
"typescript": "5.9.3"
33+
}
34+
}

‎examples/angular/basic-app-table/src/app/app.component.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div class="p-2">
2+
<table>
3+
<thead>
4+
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
5+
<tr>
6+
@for (header of headerGroup.headers; track header.id) {
7+
@if (!header.isPlaceholder) {
8+
<th *flexRenderHeader="header; let header">
9+
<div [innerHTML]="header"></div>
10+
</th>
11+
}
12+
}
13+
</tr>
14+
}
15+
</thead>
16+
<tbody>
17+
@for (row of table.getRowModel().rows; track row.id) {
18+
<tr>
19+
@for (cell of row.getAllCells(); track cell.id) {
20+
<td *flexRenderCell="cell; let cell">
21+
<div [innerHTML]="cell"></div>
22+
</td>
23+
}
24+
</tr>
25+
}
26+
</tbody>
27+
<tfoot>
28+
@for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
29+
<tr>
30+
@for (footer of footerGroup.headers; track footer.id) {
31+
<th *flexRenderFooter="footer; let footer">
32+
{{ footer }}
33+
</th>
34+
}
35+
</tr>
36+
}
37+
</tfoot>
38+
</table>
39+
40+
<div class="h-4"></div>
41+
<button (click)="rerender()" class="border p-2">Rerender</button>
42+
</div>

‎examples/angular/basic-app-table/src/app/app.component.ts‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
2+
import { FlexRender, createTableHook } from '@tanstack/angular-table'
3+
4+
// This example uses the new `createTableHook` method to create a re-usable table hook factory instead of independently
5+
// using the standalone `useTable` hook and `createColumnHelper` method. You can choose to use either way.
6+
7+
// 1. Define what the shape of your data will be for each row
8+
type Person = {
9+
firstName: string
10+
lastName: string
11+
age: number
12+
visits: number
13+
status: string
14+
progress: number
15+
}
16+
17+
// 2. Create some dummy data with a stable reference (this could be an API response stored in useState or similar)
18+
const defaultData: Array<Person> = [
19+
{
20+
firstName: 'tanner',
21+
lastName: 'linsley',
22+
age: 24,
23+
visits: 100,
24+
status: 'In Relationship',
25+
progress: 50,
26+
},
27+
{
28+
firstName: 'tandy',
29+
lastName: 'miller',
30+
age: 40,
31+
visits: 40,
32+
status: 'Single',
33+
progress: 80,
34+
},
35+
{
36+
firstName: 'joe',
37+
lastName: 'dirte',
38+
age: 45,
39+
visits: 20,
40+
status: 'Complicated',
41+
progress: 10,
42+
},
43+
{
44+
firstName: 'kevin',
45+
lastName: 'vandy',
46+
age: 28,
47+
visits: 100,
48+
status: 'Single',
49+
progress: 70,
50+
},
51+
]
52+
53+
// 3. New in V9! Tell the table which features and row models we want to use.
54+
// In this case, this will be a basic table with no additional features
55+
const { injectAppTable, createAppColumnHelper } = createTableHook({
56+
_features: {},
57+
_rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
58+
debugTable: true,
59+
})
60+
61+
// 4. Create a helper object to help define our columns
62+
const columnHelper = createAppColumnHelper<Person>()
63+
64+
// 5. Define the columns for your table with a stable reference (in this case, defined statically outside of a react component)
65+
const columns = columnHelper.columns([
66+
// accessorKey method (most common for simple use-cases)
67+
columnHelper.accessor('firstName', {
68+
cell: (info) => info.getValue(),
69+
footer: (info) => info.column.id,
70+
}),
71+
// accessorFn used (alternative) along with a custom id
72+
columnHelper.accessor((row) => row.lastName, {
73+
id: 'lastName',
74+
cell: (info) => `<i>${info.getValue()}</i>`,
75+
header: () => `<span>Last Name</span>`,
76+
footer: (info) => info.column.id,
77+
}),
78+
// accessorFn used to transform the data
79+
columnHelper.accessor((row) => Number(row.age), {
80+
id: 'age',
81+
header: () => 'Age',
82+
cell: (info) => info.renderValue(),
83+
footer: (info) => info.column.id,
84+
}),
85+
columnHelper.accessor('visits', {
86+
header: () => `<span>Visits</span>`,
87+
footer: (info) => info.column.id,
88+
}),
89+
columnHelper.accessor('status', {
90+
header: 'Status',
91+
footer: (info) => info.column.id,
92+
}),
93+
columnHelper.accessor('progress', {
94+
header: 'Profile Progress',
95+
footer: (info) => info.column.id,
96+
}),
97+
])
98+
99+
@Component({
100+
selector: 'app-root',
101+
imports: [FlexRender],
102+
templateUrl: './app.component.html',
103+
changeDetection: ChangeDetectionStrategy.OnPush,
104+
})
105+
export class AppComponent {
106+
readonly data = signal<Array<Person>>(defaultData)
107+
108+
// 6. Create the table instance with the required columns and data.
109+
// Features and row models are already defined in the createTableHook call above
110+
readonly table = injectAppTable(() => ({
111+
columns,
112+
data: this.data(),
113+
// add additional table options here or in the createTableHook call above
114+
}))
115+
116+
rerender() {
117+
this.data.set([...defaultData.sort(() => -1)])
118+
}
119+
}

0 commit comments

Comments
 (0)