|
| 1 | +--- |
| 2 | +title: Angular Table |
| 3 | +--- |
| 4 | + |
| 5 | +The `@tanstack/angular-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing |
| 6 | +state the "angular signals" way, providing types and the rendering implementation of cell/header/footer templates. |
| 7 | + |
| 8 | +## Exports |
| 9 | + |
| 10 | +`@tanstack/angular-table` re-exports all of `@tanstack/table-core`'s and the following: |
| 11 | + |
| 12 | +### `createAngularTable` |
| 13 | + |
| 14 | +Accepts an options function or a computed value that returns the table options, and returns a table. |
| 15 | + |
| 16 | +```ts |
| 17 | +import {createAngularTable} from '@tanstack/angular-table' |
| 18 | + |
| 19 | +export class AppComponent { |
| 20 | + data = signal<Person[]>([]) |
| 21 | + |
| 22 | + table = createAngularTable(() => ({ |
| 23 | + data: this.data(), |
| 24 | + columns: defaultColumns, |
| 25 | + getCoreRowModel: getCoreRowModel(), |
| 26 | + })) |
| 27 | +} |
| 28 | + |
| 29 | +// ...render your table in template |
| 30 | + |
| 31 | +``` |
| 32 | + |
| 33 | +### `FlexRender` |
| 34 | + |
| 35 | +An Angular structural directive for rendering cell/header/footer templates with dynamic values. |
| 36 | + |
| 37 | +FlexRender supports any type of content supported by Angular: |
| 38 | + |
| 39 | +- A string, or a html string via `innerHTML` |
| 40 | +- A [TemplateRef](https://angular.dev/api/core/TemplateRef) |
| 41 | +- A [Component](https://angular.dev/api/core/Component) wrapped into `FlexRenderComponent` |
| 42 | + |
| 43 | +Example: |
| 44 | + |
| 45 | +```ts |
| 46 | +@Component({ |
| 47 | + imports: [FlexRenderDirective], |
| 48 | + //... |
| 49 | +}) |
| 50 | +``` |
| 51 | + |
| 52 | +```angular2html |
| 53 | +
|
| 54 | +<tbody> |
| 55 | +@for (row of table.getRowModel().rows; track row.id) { |
| 56 | +<tr> |
| 57 | + @for (cell of row.getVisibleCells(); track cell.id) { |
| 58 | +<td> |
| 59 | + <ng-container |
| 60 | + *flexRender=" |
| 61 | + cell.column.columnDef.cell; |
| 62 | + props: cell.getContext(); |
| 63 | + let cell |
| 64 | + " |
| 65 | + > |
| 66 | + <!-- if you want to render a simple string --> |
| 67 | + {{ cell }} |
| 68 | + <!-- if you want to render an html string --> |
| 69 | + <div [innerHTML]="cell"></div> |
| 70 | + </ng-container> |
| 71 | +</td> |
| 72 | +} |
| 73 | +</tr> |
| 74 | +} |
| 75 | +</tbody> |
| 76 | +``` |
| 77 | + |
| 78 | +#### Rendering a TemplateRef |
| 79 | + |
| 80 | +In order to render a TemplateRef into a specific column header/cell/footer, you can pass the TemplateRef into the column |
| 81 | +definition. |
| 82 | + |
| 83 | +You can access the TemplateRef data via the `$implicit` property, which is valued based on what is passed in the props |
| 84 | +field of flexRender. |
| 85 | + |
| 86 | +In most cases, each TemplateRef will be rendered with the $implicit context valued based on the cell type in this way: |
| 87 | + |
| 88 | +- Header: `HeaderContext<T, ?>` |
| 89 | +- Cell: `CellContext<T, ?>`, |
| 90 | +- Footer: `HeaderContext<T, ?>` |
| 91 | + |
| 92 | +```angular17html |
| 93 | +
|
| 94 | +<ng-container |
| 95 | + *flexRender=" |
| 96 | + cell.column.columnDef.cell; |
| 97 | + props: cell.getContext(); |
| 98 | + let cell |
| 99 | + " |
| 100 | +> |
| 101 | + <!-- if you want to render a simple string --> |
| 102 | + {{ cell }} |
| 103 | + <!-- if you want to render an html string --> |
| 104 | + <div [innerHTML]="cell"></div> |
| 105 | +</ng-container> |
| 106 | +
|
| 107 | +<ng-template #myCell let-context> |
| 108 | + <!-- render something with context --> |
| 109 | +</ng-template> |
| 110 | +``` |
| 111 | + |
| 112 | +Full example: |
| 113 | + |
| 114 | +```ts |
| 115 | +import type { |
| 116 | + CellContext, |
| 117 | + ColumnDef, |
| 118 | + HeaderContext, |
| 119 | +} from '@tanstack/angular-table' |
| 120 | +import {Component, TemplateRef, viewChild} from '@angular/core' |
| 121 | + |
| 122 | +@Component({ |
| 123 | + template: ` |
| 124 | + <tbody> |
| 125 | + @for (row of table.getRowModel().rows; track row.id) { |
| 126 | + <tr> |
| 127 | + @for (cell of row.getVisibleCells(); track cell.id) { |
| 128 | + <td> |
| 129 | + <ng-container |
| 130 | + *flexRender=" |
| 131 | + cell.column.columnDef.cell; |
| 132 | + props: cell.getContext(); // Data given to the TemplateRef |
| 133 | + let cell |
| 134 | + " |
| 135 | + > |
| 136 | + <!-- if you want to render a simple string --> |
| 137 | + {{ cell }} |
| 138 | + <!-- if you want to render an html string --> |
| 139 | + <div [innerHTML]="cell"></div> |
| 140 | + </ng-container> |
| 141 | + </td> |
| 142 | + } |
| 143 | + </tr> |
| 144 | + } |
| 145 | + </tbody> |
| 146 | +
|
| 147 | + <ng-template #customHeader let-context> |
| 148 | + {{ context.getValue() }} |
| 149 | + </ng-template> |
| 150 | + <ng-template #customCell let-context> |
| 151 | + {{ context.getValue() }} |
| 152 | + </ng-template> |
| 153 | + `, |
| 154 | +}) |
| 155 | +class AppComponent { |
| 156 | + customHeader = |
| 157 | + viewChild.required<TemplateRef<{ $implicit: HeaderContext<any, any> }>>( |
| 158 | + 'customHeader' |
| 159 | + ) |
| 160 | + customCell = |
| 161 | + viewChild.required<TemplateRef<{ $implicit: CellContext<any, any> }>>( |
| 162 | + 'customCell' |
| 163 | + ) |
| 164 | + |
| 165 | + columns: ColumnDef<unknown>[] = [ |
| 166 | + { |
| 167 | + id: 'customCell', |
| 168 | + header: () => this.customHeader(), |
| 169 | + cell: () => this.customCell(), |
| 170 | + }, |
| 171 | + ] |
| 172 | +} |
| 173 | +``` |
| 174 | + |
| 175 | +#### Rendering a Component |
| 176 | + |
| 177 | +To render a Component into a specific column header/cell/footer, you can pass a `FlexRenderComponent instantiated with |
| 178 | +your `ComponentType, with the ability to include optional parameters such as inputs and an injector. |
| 179 | + |
| 180 | +```ts |
| 181 | +import {FlexRenderComponent} from "@tanstack/angular-table"; |
| 182 | + |
| 183 | +class AppComponent { |
| 184 | + columns: ColumnDef<unknown>[] = [ |
| 185 | + { |
| 186 | + id: 'customCell', |
| 187 | + header: () => new FlexRenderComponent( |
| 188 | + CustomCellComponent, |
| 189 | + {}, // optional inputs |
| 190 | + injector // optional injector |
| 191 | + ), |
| 192 | + cell: () => this.customCell(), |
| 193 | + }, |
| 194 | + ] |
| 195 | +} |
| 196 | +``` |
| 197 | + |
| 198 | +Underneath, this utilizes |
| 199 | +the [ViewContainerRef#createComponent](https://angular.dev/api/core/ViewContainerRef#createComponent) api. |
| 200 | +Therefore, you should declare your custom inputs using the @Input decorator or input/model signals. |
| 201 | + |
| 202 | +You can still access the table cell context through the `injectFlexRenderContext` function, which returns the context |
| 203 | +value based on the props you pass to the `FlexRenderDirective`. |
| 204 | + |
| 205 | +```ts |
| 206 | +@Component({ |
| 207 | + // ... |
| 208 | +}) |
| 209 | +class CustomCellComponent { |
| 210 | + // context of a cell component |
| 211 | + readonly context = injectFlexRenderContext<CellContext<TData, TValue>>(); |
| 212 | + // context of a header/footer component |
| 213 | + readonly context = injectFlexRenderContext<HeaderContext<TData, TValue>>(); |
| 214 | +} |
| 215 | +``` |
| 216 | + |
| 217 | + |
0 commit comments