Merge main into alpha (#5907)

* feat(angular-table): Refactor Flex render implementation - Zoneless, Better type safety, allows reactive values into cell content, re-render when cell context changes, allow to pass signal inputs into custom components (#5856) * feat: flex render granular updates * updates * cleanup * cleanup * cleanup * fix test * angular add explicit version of typescript * Fix typescript versions * add some testing for flex render in table * fix test infra * refactor flex render * update lock * fix tests, cleanup code * fix tests, cleanup code * flex render signal content support * flex render signal content support * improve view flags, handle state update in zoneless * improve view flags, handle state update in zoneless * fix * ci: apply automated fixes * clean docs test fix doc add flexRenderComponent util * test cases * fix: enable computed rowModels * fix test for rowModel * assures that `updateProps` update inputs only for Component reference type * Merge pull request #1 from riccardoperra/feat/angular-flex-render-support-output-binding add support for angular outputs in flex-render-component --------- Co-authored-by: Lachlan Collins <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * release: v8.21.0 * docs(angular): add editable, row-dnd and performant column resizing example (#5881) * add editable cell example * add editable cell example * row dnd exmaple * revert basic * ci: apply automated fixes * column resizing performant example * fix * fix budgets * ci: apply automated fixes * typo --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * docs(angular): add missing faker-js deps (#5883) * fix(lit-table): dynamic data updates in the Lit Table Adapter (#5884) * this fixes an issue I discussed in discord where with the lit table adapter, updating a data array did not get reflected by the table. It is a one-line change to the TableController, and a new example that demonstrates the difference. * Update packages/lit-table/src/index.ts per suggestion from @kadoshms Co-authored-by: Mor Kadosh <[email protected]> --------- Co-authored-by: Luke Schierer <[email protected]> Co-authored-by: Mor Kadosh <[email protected]> * docs: add experimental virtualization example (#5895) * docs: add experimental virtualization example * work on experimental virtualized column examples --------- Co-authored-by: Kevin Van Cott <[email protected]> * release: v8.21.1 * docs: example name * docs(angular): add expanding and sub components examples (#5898) * docs(angular): add expanding example * docs(angular): add sub components example * docs(angular): fix config.json * fix conflicts in lit package * remove angular package non-fesm export * since angular 19, ng-packgr only bundle a `fesm2022` export * docs: exp virtual - remeasure when table state changes * docs: virtualizer tbody from onchange * update all angular examples * fix conflicts in examples/react * ci: apply automated fixes * fix tests * ci: apply automated fixes * fix tests * ci: apply automated fixes * angular: update vite config to support vitest workspaces * docs(angular): fix examples * ci: apply automated fixes --------- Co-authored-by: Lachlan Collins <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Tanner Linsley <[email protected]> Co-authored-by: Luke Schierer <[email protected]> Co-authored-by: Luke Schierer <[email protected]> Co-authored-by: Mor Kadosh <[email protected]> Co-authored-by: Kevin Van Cott <[email protected]> Co-authored-by: Kevin Van Cott <[email protected]>
TanStack · Feb 10, 2025 · 2a41a7e · 2a41a7e
1 parent d9eba64
commit 2a41a7e
Show file tree

Hide file tree

Showing 161 changed files with 9,670 additions and 3,948 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -435,9 +435,29 @@
               "to": "framework/angular/examples/row-selection",
               "label": "Row Selection"
             },
+            {
+              "to": "framework/angular/examples/expanding",
+              "label": "Expanding"
+            },
+            {
+              "to": "framework/angular/examples/sub-components",
+              "label": "Sub Components"
+            },
             {
               "to": "framework/angular/examples/signal-input",
               "label": "Signal Input"
+            },
+            {
+              "to": "framework/angular/examples/editable",
+              "label": "Editable data"
+            },
+            {
+              "to": "framework/angular/examples/row-dnd",
+              "label": "Row DnD"
+            },
+            {
+              "to": "framework/angular/examples/column-resizing-performant",
+              "label": "Performant Column Resizing"
             }
           ]
         },
@@ -594,10 +614,18 @@
               "to": "framework/react/examples/virtualized-columns",
               "label": "Virtualized Columns"
             },
+            {
+              "to": "framework/react/examples/virtualized-columns-experimental",
+              "label": "Virtualized Columns (Experimental)"
+            },
             {
               "to": "framework/react/examples/virtualized-rows",
               "label": "Virtualized Rows"
             },
+            {
+              "to": "framework/react/examples/virtualized-rows-experimental",
+              "label": "Virtualized Rows (Experimental)"
+            },
             {
               "to": "framework/react/examples/virtualized-infinite-scrolling",
               "label": "Virtualized Infinite Scrolling"

diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md
@@ -40,41 +40,181 @@ FlexRender supports any type of content supported by Angular:
 - A [TemplateRef](https://angular.dev/api/core/TemplateRef)
 - A [Component](https://angular.dev/api/core/Component) wrapped into `FlexRenderComponent`
 
-Example:
+You can just use the `cell.renderValue` or `cell.getValue` APIs to render the cells of your table. However,
+these APIs will only spit out the raw cell values (from accessor functions).
+If you are using the `cell: () => any` column definition options, you will want to use the `FlexRenderDirective` from the adapter.
+
+Cell column definition is **reactive** and runs into an **injection context**, then you can inject services or make use of signals to automatically modify the rendered content.
+
+#### Example
 
 ```ts
 @Component({
   imports: [FlexRenderDirective],
   //...
 })
+class YourComponent {}
 ```
 
 ```angular-html
 
 <tbody>
 @for (row of table.getRowModel().rows; track row.id) {
-<tr>
-  @for (cell of row.getVisibleCells(); track cell.id) {
-<td>
-  <ng-container
-    *flexRender="
+  <tr>
+    @for (cell of row.getVisibleCells(); track cell.id) {
+      <td>
+        <ng-container
+          *flexRender="
               cell.column.columnDef.cell;
               props: cell.getContext();
               let cell
             "
-  >
-    <!-- if you want to render a simple string -->
-    {{ cell }}
-    <!-- if you want to render an html string -->
-    <div [innerHTML]="cell"></div>
-  </ng-container>
-</td>
-}
-</tr>
+        >
+          <!-- if you want to render a simple string -->
+          {{ cell }}
+          <!-- if you want to render an html string -->
+          <div [innerHTML]="cell"></div>
+        </ng-container>
+      </td>
+    }
+  </tr>
 }
 </tbody>
 ```
 
+#### 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 parameters such as inputs, outputs and a custom injector.
+
+```ts
+import {flexRenderComponent} from "./flex-render-component";
+import {ChangeDetectionStrategy, input, output} from "@angular/core";
+
+@Component({
+  template: `
+    ...
+  `,
+  standalone: true,
+  changeDetectionStrategy: ChangeDetectionStrategy.OnPush,
+  host: {
+    '(click)': 'clickEvent.emit($event)'
+  }
+})
+class CustomCell {
+  readonly content = input.required<string>();
+  readonly cellType = input<MyType>();
+
+  // An output that will emit for every cell click
+  readonly clickEvent = output<Event>();
+}
+
+class AppComponent {
+  columns: ColumnDef<unknown>[] = [
+    {
+      id: 'custom-cell',
+      header: () => {
+        const translateService = inject(TranslateService);
+        return translateService.translate('...');
+      },
+      cell: (context) => {
+        return flexRenderComponent(
+          MyCustomComponent,
+          {
+            injector, // Optional injector
+            inputs: {
+              // Mandatory input since we are using `input.required()
+              content: context.row.original.rowProperty,
+              // cellType? - Optional input
+            },
+            outputs: {
+              clickEvent: () => {
+                // Do something
+              }
+            }
+          }
+        )
+      },
+    },
+  ]
+}
+```
+
+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 the table cell context through 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<CellContext<TData, TValue>>();
+  // context of a header/footer component
+  readonly context = injectFlexRenderContext<HeaderContext<TData, TValue>>();
+}
+```
+
+Alternatively, you can render a component into a specific column header, cell, or footer by passing the component type
+to the corresponding column definitions. These column definitions will be provided to the `flexRender` directive along
+with the `context`.
+
+```ts
+class AppComponent {
+  columns: ColumnDef<Person>[] = [
+    {
+      id: 'select',
+      header: () => TableHeadSelectionComponent<Person>,
+      cell: () => TableRowSelectionComponent<Person>,
+    },
+  ]
+}
+```
+
+```angular-html
+<ng-container
+  *flexRender="
+    header.column.columnDef.header;
+    props: header.getContext();
+    let headerCell
+  "
+>
+  {{ headerCell }}
+</ng-container>
+```
+
+Properties of `context` provided in the `flexRender` directive will be accessible to your component.
+You can explicitly define the context properties required by your component.
+In this example, the context provided to flexRender is of type HeaderContext.
+Input signal `table`, which is a property of HeaderContext together with `column` and `header` properties,
+is then defined to be used in the component. If any of the context properties are
+needed in your component, feel free to use them. Please take note that only input signal is supported,
+when defining access to context properties, using this approach.
+
+```angular-ts
+@Component({
+  template: `
+    <input
+      type="checkbox"
+      [checked]="table().getIsAllRowsSelected()"
+      [indeterminate]="table().getIsSomeRowsSelected()"
+      (change)="table().toggleAllRowsSelected()"
+    />
+  `,
+  // ...
+})
+export class TableHeadSelectionComponent<T> {
+  //column = input.required<Column<T, unknown>>()
+  //header = input.required<Header<T, unknown>>()
+  table = input.required<Table<T>>()
+}
+```
+
 #### Rendering a TemplateRef
 
 In order to render a TemplateRef into a specific column header/cell/footer, you can pass the TemplateRef into the column
@@ -214,7 +354,7 @@ class CustomCellComponent {
 }
 ```
 
-Alternatively, you can render a component into a specific column header, cell, or footer by passing the component type 
+Alternatively, you can render a component into a specific column header, cell, or footer by passing the component type
 to the corresponding column definitions. These column definitions will be provided to the `flexRender` directive along with the `context`.
 
 ```ts
@@ -243,12 +383,12 @@ class AppComponent {
 </ng-container>
 ```
 
-Properties of `context` provided in the `flexRender` directive will be accessible to your component. 
-You can explicitly define the context properties required by your component. 
-In this example, the context provided to flexRender is of type HeaderContext. 
+Properties of `context` provided in the `flexRender` directive will be accessible to your component.
+You can explicitly define the context properties required by your component.
+In this example, the context provided to flexRender is of type HeaderContext.
 Input signal `table`, which is a property of HeaderContext together with `column` and `header` properties,
-is then defined to be used in the component. If any of the context properties are 
-needed in your component, feel free to use them. Please take note that only input signal is supported, 
+is then defined to be used in the component. If any of the context properties are
+needed in your component, feel free to use them. Please take note that only input signal is supported,
 when defining access to context properties, using this approach.
 
 ```angular-ts
@@ -268,4 +408,4 @@ export class TableHeadSelectionComponent<T> {
   //header = input.required<Header<T, unknown>>()
   table = input.required<Table<T>>()
 }
-```
+```
diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json
@@ -11,21 +11,21 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.0.5",
-    "@angular/compiler": "^19.0.5",
-    "@angular/core": "^19.0.5",
-    "@angular/forms": "^19.0.5",
-    "@angular/platform-browser": "^19.0.5",
-    "@angular/platform-browser-dynamic": "^19.0.5",
-    "@angular/router": "^19.0.5",
+    "@angular/common": "^19.1.4",
+    "@angular/compiler": "^19.1.4",
+    "@angular/core": "^19.1.4",
+    "@angular/forms": "^19.1.4",
+    "@angular/platform-browser": "^19.1.4",
+    "@angular/platform-browser-dynamic": "^19.1.4",
+    "@angular/router": "^19.1.4",
     "@tanstack/angular-table": "^9.0.0-alpha.10",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^19.0.6",
-    "@angular/cli": "^19.0.6",
-    "@angular/compiler-cli": "^19.0.5",
+    "@angular/build": "^19.1.5",
+    "@angular/cli": "^19.1.5",
+    "@angular/compiler-cli": "^19.1.4",
     "@types/jasmine": "~5.1.5",
     "jasmine-core": "~5.5.0",
     "tslib": "^2.8.1",

diff --git a/examples/angular/column-ordering/package.json b/examples/angular/column-ordering/package.json
@@ -11,20 +11,20 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.0.5",
-    "@angular/compiler": "^19.0.5",
-    "@angular/core": "^19.0.5",
-    "@angular/forms": "^19.0.5",
-    "@angular/platform-browser": "^19.0.5",
-    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/common": "^19.1.4",
+    "@angular/compiler": "^19.1.4",
+    "@angular/core": "^19.1.4",
+    "@angular/forms": "^19.1.4",
+    "@angular/platform-browser": "^19.1.4",
+    "@angular/platform-browser-dynamic": "^19.1.4",
     "@tanstack/angular-table": "^9.0.0-alpha.10",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^19.0.6",
-    "@angular/cli": "^19.0.6",
-    "@angular/compiler-cli": "^19.0.5",
+    "@angular/build": "^19.1.5",
+    "@angular/cli": "^19.1.5",
+    "@angular/compiler-cli": "^19.1.4",
     "tslib": "^2.8.1",
     "typescript": "5.6.3"
   }

diff --git a/examples/angular/column-pinning-sticky/package.json b/examples/angular/column-pinning-sticky/package.json
@@ -11,21 +11,21 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.0.5",
-    "@angular/compiler": "^19.0.5",
-    "@angular/core": "^19.0.5",
-    "@angular/forms": "^19.0.5",
-    "@angular/platform-browser": "^19.0.5",
-    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/common": "^19.1.4",
+    "@angular/compiler": "^19.1.4",
+    "@angular/core": "^19.1.4",
+    "@angular/forms": "^19.1.4",
+    "@angular/platform-browser": "^19.1.4",
+    "@angular/platform-browser-dynamic": "^19.1.4",
     "@faker-js/faker": "^9.3.0",
     "@tanstack/angular-table": "^9.0.0-alpha.10",
     "rxjs": "~7.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^19.0.6",
-    "@angular/cli": "^19.0.6",
-    "@angular/compiler-cli": "^19.0.5",
+    "@angular/build": "^19.1.5",
+    "@angular/cli": "^19.1.5",
+    "@angular/compiler-cli": "^19.1.4",
     "tslib": "^2.8.1",
     "typescript": "5.6.3"
   }