From 8d23c645d11ec4ed058da6a26dc6a8dcd7f4984a Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 12 May 2024 11:18:02 +0200 Subject: [PATCH 1/3] add flexRender documentation --- docs/framework/angular/angular-table.md | 188 +++++++++++++++++++++--- 1 file changed, 171 insertions(+), 17 deletions(-) diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md index 041db8c64d..231e664c1f 100644 --- a/docs/framework/angular/angular-table.md +++ b/docs/framework/angular/angular-table.md @@ -2,7 +2,8 @@ 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 signals" way, providing types and the rendering implementation of cell/header/footer templates. +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 signals" way, providing types and the rendering implementation of cell/header/footer templates. ## Exports @@ -10,10 +11,10 @@ The `@tanstack/angular-table` adapter is a wrapper around the core table logic. ### `createAngularTable` -Takes an `options` object and returns a table. +Accepts an options function or a computed value that returns the table options, and returns a table. ```ts -import { createAngularTable } from '@tanstack/angular-table' +import {createAngularTable} from '@tanstack/angular-table' export class AppComponent { data = signal([]) @@ -24,13 +25,20 @@ export class AppComponent { getCoreRowModel: getCoreRowModel(), })) } + // ...render your table in template ``` ### `FlexRender` -A Angular component for rendering cell/header/footer templates with dynamic values. +An Angular structural directive for rendering cell/header/footer templates with dynamic values. + +FlexRender supports any type of content supported by Angular: + +- A string, or a html string via `innerHTML` +- A [TemplateRef](https://angular.dev/api/core/TemplateRef) +- A [Component](https://angular.dev/api/core/Component) wrapped into `FlexRenderComponent` Example: @@ -42,23 +50,169 @@ Example: ``` ```angular2html + - @for (row of table.getRowModel().rows; track row.id) { - - @for (cell of row.getVisibleCells(); track cell.id) { - - -
- - - } - - } + > + + {{ cell }} + +
+ + +} + +} ``` + +#### Rendering a TemplateRef + +In order to render a TemplateRef into a specific column header/cell/footer, you can +pass the TemplateRef into the column definition. + +You can access to the TemplateRef `data` via the $implicit property, which is +valued based on what is passed in the `props` field of flexRender + +In most cases, each TemplateRef will be rendered with the `$implicit` context valued based on the cell type in this way: + +- Header: `HeaderContext` +- Cell: `CellContext`, +- Footer: `HeaderContext` + +```angular17html + + + + {{ cell }} + +
+ + + + + +``` + +Full example: + +```ts +import type { + CellContext, + ColumnDef, + HeaderContext, +} from '@tanstack/angular-table' +import {Component, TemplateRef, viewChild} from '@angular/core' + +@Component({ + template: ` + + @for (row of table.getRowModel().rows; track row.id) { + + @for (cell of row.getVisibleCells(); track cell.id) { + + + + {{ cell }} + +
+ + + } + + } + + + + {{ context.getValue() }} + + + {{ context.getValue() }} + + `, +}) +class AppComponent { + customHeader = + viewChild.required }>>( + 'customHeader' + ) + customCell = + viewChild.required }>>( + 'customCell' + ) + + columns: ColumnDef[] = [ + { + id: 'customCell', + header: () => this.customHeader(), + cell: () => this.customCell(), + }, + ] +} +``` + +#### Rendering a TemplateRef + +In order to render a Component into a specific column header/cell/footer, you can +pass a `FlexRenderComponent` instantiated with your `ComponentType`, being able to pass +inputs and injector as optional parameters. + +```ts +import {FlexRenderComponent} from "@tanstack/angular-table"; + +class AppComponent { + columns: ColumnDef[] = [ + { + id: 'customCell', + header: () => new FlexRenderComponent( + CustomCellComponent, + {}, // optional inputs + injector // optional injector + ), + cell: () => this.customCell(), + }, + ] +} +``` + +Underneath, this uses +the [ViewContainerRef#createComponent](https://angular.dev/api/core/ViewContainerRef#createComponent) api, +so you should declare your custom inputs via the `@Input` decorator or `input/model` signals. + +You can still access to the table cell context, via the `injectFlexRenderContext` function, which +returns the context value based on the props you pass to the `FlexRenderDirective`. + +```ts +@Component({ + // ... +}) +class CustomCellComponent { + // context of a cell component + readonly context = injectFlexRenderContext>(); + // context of a header/footer component + readonly context = injectFlexRenderContext>(); +} +``` + + From 381acdf8624511ec15fb6c0034d361eeead57729 Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 12 May 2024 11:25:01 +0200 Subject: [PATCH 2/3] fix docs --- docs/framework/angular/angular-table.md | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md index 231e664c1f..3d6f19044e 100644 --- a/docs/framework/angular/angular-table.md +++ b/docs/framework/angular/angular-table.md @@ -77,13 +77,13 @@ Example: #### Rendering a TemplateRef -In order to render a TemplateRef into a specific column header/cell/footer, you can -pass the TemplateRef into the column definition. +In order to render a TemplateRef into a specific column header/cell/footer, you can pass the TemplateRef into the column +definition. -You can access to the TemplateRef `data` via the $implicit property, which is -valued based on what is passed in the `props` field of flexRender +You can access the TemplateRef data via the `$implicit` property, which is valued based on what is passed in the props +field of flexRender. -In most cases, each TemplateRef will be rendered with the `$implicit` context valued based on the cell type in this way: +In most cases, each TemplateRef will be rendered with the $implicit context valued based on the cell type in this way: - Header: `HeaderContext` - Cell: `CellContext`, @@ -174,9 +174,8 @@ class AppComponent { #### Rendering a TemplateRef -In order to render a Component into a specific column header/cell/footer, you can -pass a `FlexRenderComponent` instantiated with your `ComponentType`, being able to pass -inputs and injector as optional parameters. +To render a Component into a specific column header/cell/footer, you can pass a `FlexRenderComponent instantiated with +your `ComponentType, with the ability to include optional parameters such as inputs and an injector. ```ts import {FlexRenderComponent} from "@tanstack/angular-table"; @@ -196,12 +195,12 @@ class AppComponent { } ``` -Underneath, this uses -the [ViewContainerRef#createComponent](https://angular.dev/api/core/ViewContainerRef#createComponent) api, -so you should declare your custom inputs via the `@Input` decorator or `input/model` signals. +Underneath, this utilizes +the [ViewContainerRef#createComponent](https://angular.dev/api/core/ViewContainerRef#createComponent) api. +Therefore, you should declare your custom inputs using the @Input decorator or input/model signals. -You can still access to the table cell context, via the `injectFlexRenderContext` function, which -returns the context value based on the props you pass to the `FlexRenderDirective`. +You can still access the table cell context through the `injectFlexRenderContext` function, which returns the context +value based on the props you pass to the `FlexRenderDirective`. ```ts @Component({ From 8f4139d2400a0a8d95f3d67e59d65765873bd61e Mon Sep 17 00:00:00 2001 From: riccardoperra Date: Sun, 12 May 2024 16:37:37 +0200 Subject: [PATCH 3/3] fix rendering component section heading --- docs/framework/angular/angular-table.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md index 3d6f19044e..c99473a03b 100644 --- a/docs/framework/angular/angular-table.md +++ b/docs/framework/angular/angular-table.md @@ -172,7 +172,7 @@ class AppComponent { } ``` -#### Rendering a TemplateRef +#### Rendering a Component To render a Component into a specific column header/cell/footer, you can pass a `FlexRenderComponent instantiated with your `ComponentType, with the ability to include optional parameters such as inputs and an injector.