-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(angular-table): adds Angular adapter for tanstack/table (#5326)
* Angular adapter for tanstack table initial * build with: ng packagr * Add angular examples basic grouping * Add angular examples basic grouping * Update angular examples basic grouping * Add angular example selection * regen lock file * package upgrades, angular table docs * prettier * move around some deps * removed unused dependency from angular package * fix deps --------- Co-authored-by: Kevin Van Cott <kevinvandy656@gmail.com>
- Loading branch information
1 parent
e6c6f96
commit afa27ad
Showing
138 changed files
with
8,185 additions
and
386 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -49,3 +49,5 @@ yarn.lock | |
.nx/cache | ||
vite.config.js.timestamp-* | ||
vite.config.ts.timestamp-* | ||
|
||
.angular |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,3 +6,5 @@ | |
**/docs | ||
**/old-examples | ||
pnpm-lock.yaml | ||
|
||
.angular |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
--- | ||
title: Angular Table | ||
--- | ||
|
||
The `@tanstack/angular-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "angular" way, providing types and the rendering implementation of cell/header/footer templates. | ||
|
||
## Exports | ||
|
||
`@tanstack/angular-table` re-exports all of `@tanstack/table-core`'s and the following: | ||
|
||
### `createAngularTable` | ||
|
||
Takes an `options` object and returns a table. | ||
|
||
```ts | ||
import { createAngularTable } from '@tanstack/angular-table' | ||
|
||
ngOnInit() { | ||
this.table = createAngularTable(options) | ||
} | ||
// ...render your table in template | ||
|
||
``` | ||
|
||
### `FlexRender` | ||
|
||
A Angular component for rendering cell/header/footer templates with dynamic values. | ||
|
||
Example: | ||
|
||
```ts | ||
@Component({ | ||
imports: [FlexRenderDirective], | ||
//... | ||
}) | ||
``` | ||
|
||
```angular2html | ||
<tbody> | ||
@for (row of table.getRowModel().rows; track row.id) { | ||
<tr> | ||
@for (cell of row.getVisibleCells(); track cell.id) { | ||
<td> | ||
<ng-container | ||
*flexRender=" | ||
cell.column.columnDef.cell; | ||
props: cell.getContext(); | ||
let cell | ||
" | ||
> | ||
{{ cell }} | ||
</ng-container> | ||
</td> | ||
} | ||
</tr> | ||
} | ||
</tbody> | ||
</template> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# Editor configuration, see https://editorconfig.org | ||
root = true | ||
|
||
[*] | ||
charset = utf-8 | ||
indent_style = space | ||
indent_size = 2 | ||
insert_final_newline = true | ||
trim_trailing_whitespace = true | ||
|
||
[*.ts] | ||
quote_type = single | ||
|
||
[*.md] | ||
max_line_length = off | ||
trim_trailing_whitespace = false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
# See http://help.github.com/ignore-files/ for more about ignoring files. | ||
|
||
# Compiled output | ||
/dist | ||
/tmp | ||
/out-tsc | ||
/bazel-out | ||
|
||
# Node | ||
/node_modules | ||
npm-debug.log | ||
yarn-error.log | ||
|
||
# IDEs and editors | ||
.idea/ | ||
.project | ||
.classpath | ||
.c9/ | ||
*.launch | ||
.settings/ | ||
*.sublime-workspace | ||
|
||
# Visual Studio Code | ||
.vscode/* | ||
!.vscode/settings.json | ||
!.vscode/tasks.json | ||
!.vscode/launch.json | ||
!.vscode/extensions.json | ||
.history/* | ||
|
||
# Miscellaneous | ||
/.angular/cache | ||
.sass-cache/ | ||
/connect.lock | ||
/coverage | ||
/libpeerconnection.log | ||
testem.log | ||
/typings | ||
|
||
# System files | ||
.DS_Store | ||
Thumbs.db |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 | ||
"recommendations": ["angular.ng-template"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 | ||
"version": "0.2.0", | ||
"configurations": [ | ||
{ | ||
"name": "ng serve", | ||
"type": "chrome", | ||
"request": "launch", | ||
"preLaunchTask": "npm: start", | ||
"url": "http://localhost:4200/" | ||
}, | ||
{ | ||
"name": "ng test", | ||
"type": "chrome", | ||
"request": "launch", | ||
"preLaunchTask": "npm: test", | ||
"url": "http://localhost:9876/debug.html" | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
{ | ||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 | ||
"version": "2.0.0", | ||
"tasks": [ | ||
{ | ||
"type": "npm", | ||
"script": "start", | ||
"isBackground": true, | ||
"problemMatcher": { | ||
"owner": "typescript", | ||
"pattern": "$tsc", | ||
"background": { | ||
"activeOnStart": true, | ||
"beginsPattern": { | ||
"regexp": "(.*?)" | ||
}, | ||
"endsPattern": { | ||
"regexp": "bundle generation complete" | ||
} | ||
} | ||
} | ||
}, | ||
{ | ||
"type": "npm", | ||
"script": "test", | ||
"isBackground": true, | ||
"problemMatcher": { | ||
"owner": "typescript", | ||
"pattern": "$tsc", | ||
"background": { | ||
"activeOnStart": true, | ||
"beginsPattern": { | ||
"regexp": "(.*?)" | ||
}, | ||
"endsPattern": { | ||
"regexp": "bundle generation complete" | ||
} | ||
} | ||
} | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
# Basic | ||
|
||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.2. | ||
|
||
## Development server | ||
|
||
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. | ||
|
||
## Code scaffolding | ||
|
||
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`. | ||
|
||
## Build | ||
|
||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. | ||
|
||
## Running unit tests | ||
|
||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
|
||
## Running end-to-end tests | ||
|
||
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. | ||
|
||
## Further help | ||
|
||
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
{ | ||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", | ||
"version": 1, | ||
"newProjectRoot": "projects", | ||
"projects": { | ||
"basic": { | ||
"projectType": "application", | ||
"schematics": { | ||
"@schematics/angular:component": { | ||
"style": "scss" | ||
} | ||
}, | ||
"root": "", | ||
"sourceRoot": "src", | ||
"prefix": "app", | ||
"architect": { | ||
"build": { | ||
"builder": "@angular-devkit/build-angular:application", | ||
"options": { | ||
"outputPath": "dist/basic", | ||
"index": "src/index.html", | ||
"browser": "src/main.ts", | ||
"polyfills": ["zone.js"], | ||
"tsConfig": "tsconfig.app.json", | ||
"inlineStyleLanguage": "scss", | ||
"assets": ["src/favicon.ico", "src/assets"], | ||
"styles": ["src/styles.scss"], | ||
"scripts": [] | ||
}, | ||
"configurations": { | ||
"production": { | ||
"budgets": [ | ||
{ | ||
"type": "initial", | ||
"maximumWarning": "500kb", | ||
"maximumError": "1mb" | ||
}, | ||
{ | ||
"type": "anyComponentStyle", | ||
"maximumWarning": "2kb", | ||
"maximumError": "4kb" | ||
} | ||
], | ||
"outputHashing": "all" | ||
}, | ||
"development": { | ||
"optimization": false, | ||
"extractLicenses": false, | ||
"sourceMap": true | ||
} | ||
}, | ||
"defaultConfiguration": "production" | ||
}, | ||
"serve": { | ||
"builder": "@angular-devkit/build-angular:dev-server", | ||
"configurations": { | ||
"production": { | ||
"buildTarget": "basic:build:production" | ||
}, | ||
"development": { | ||
"buildTarget": "basic:build:development" | ||
} | ||
}, | ||
"defaultConfiguration": "development" | ||
}, | ||
"extract-i18n": { | ||
"builder": "@angular-devkit/build-angular:extract-i18n", | ||
"options": { | ||
"buildTarget": "basic:build" | ||
} | ||
}, | ||
"test": { | ||
"builder": "@angular-devkit/build-angular:karma", | ||
"options": { | ||
"polyfills": ["zone.js", "zone.js/testing"], | ||
"tsConfig": "tsconfig.spec.json", | ||
"inlineStyleLanguage": "scss", | ||
"assets": ["src/favicon.ico", "src/assets"], | ||
"styles": ["src/styles.scss"], | ||
"scripts": [] | ||
} | ||
} | ||
} | ||
} | ||
}, | ||
"cli": { | ||
"analytics": "73f296b8-52f2-4044-acca-9178df581487" | ||
} | ||
} |
Oops, something went wrong.