@tanstack/angular-table 9.0.0-alpha.10 → 9.0.0-alpha.11

package/src/flex-render/view.ts

@@ -0,0 +1,165 @@
+import { TemplateRef, Type } from '@angular/core'
+import { FlexRenderComponentInstance } from './flexRenderComponent'
+import type { FlexRenderComponent } from './flexRenderComponent'
+import type { FlexRenderContent } from './renderer'
+import type { EmbeddedViewRef } from '@angular/core'
+import type { FlexRenderComponentRef } from './flexRenderComponentFactory'
+
+export type FlexRenderTypedContent =
+  | { kind: 'null' }
+  | {
+      kind: 'primitive'
+      content: string | number | Record<string, any>
+    }
+  | { kind: 'flexRenderComponent'; content: FlexRenderComponent<unknown> }
+  | { kind: 'templateRef'; content: TemplateRef<unknown> }
+  | { kind: 'component'; content: Type<unknown> }
+
+export function mapToFlexRenderTypedContent(
+  content: FlexRenderContent<any>,
+): FlexRenderTypedContent {
+  if (content === null || content === undefined) {
+    return { kind: 'null' }
+  }
+  if (typeof content === 'string' || typeof content === 'number') {
+    return { kind: 'primitive', content }
+  }
+  if (content instanceof FlexRenderComponentInstance) {
+    return { kind: 'flexRenderComponent', content }
+  } else if (content instanceof TemplateRef) {
+    return { kind: 'templateRef', content }
+  } else if (content instanceof Type) {
+    return { kind: 'component', content }
+  } else {
+    return { kind: 'primitive', content }
+  }
+}
+
+export abstract class FlexRenderView<
+  TView extends FlexRenderComponentRef<any> | EmbeddedViewRef<unknown> | null,
+> {
+  readonly view: TView
+  #previousContent: FlexRenderTypedContent | undefined
+  #content: FlexRenderTypedContent
+
+  protected constructor(
+    initialContent: Exclude<FlexRenderTypedContent, { kind: 'null' }>,
+    view: TView,
+  ) {
+    this.#content = initialContent
+    this.view = view
+  }
+
+  get previousContent(): FlexRenderTypedContent {
+    return this.#previousContent ?? { kind: 'null' }
+  }
+
+  get content() {
+    return this.#content
+  }
+
+  set content(content: FlexRenderTypedContent) {
+    this.#previousContent = this.#content
+    this.#content = content
+  }
+
+  abstract updateProps(props: Record<string, any>): void
+
+  abstract dirtyCheck(): void
+
+  abstract onDestroy(callback: Function): void
+
+  abstract unmount(): void
+}
+
+export class FlexRenderTemplateView extends FlexRenderView<
+  EmbeddedViewRef<unknown>
+> {
+  constructor(
+    initialContent: Extract<
+      FlexRenderTypedContent,
+      { kind: 'primitive' | 'templateRef' }
+    >,
+    view: EmbeddedViewRef<unknown>,
+  ) {
+    super(initialContent, view)
+  }
+
+  override updateProps(props: Record<string, any>) {
+    this.view.markForCheck()
+  }
+
+  override dirtyCheck() {
+    // Basically a no-op. When the view is created via EmbeddedViewRef, we don't need to do any manual update
+    // since this type of content has a proxy as a context, then every time the root component is checked for changes,
+    // the property getter will be re-evaluated.
+    //
+    // If in a future we need to manually mark the view as dirty, just uncomment next line
+    // this.view.markForCheck()
+  }
+
+  override unmount() {
+    this.view.destroy()
+  }
+
+  override onDestroy(callback: Function) {
+    this.view.onDestroy(callback)
+  }
+}
+
+export class FlexRenderComponentView extends FlexRenderView<
+  FlexRenderComponentRef<unknown>
+> {
+  constructor(
+    initialContent: Extract<
+      FlexRenderTypedContent,
+      { kind: 'component' | 'flexRenderComponent' }
+    >,
+    view: FlexRenderComponentRef<unknown>,
+  ) {
+    super(initialContent, view)
+  }
+
+  override updateProps(props: Record<string, any>) {
+    switch (this.content.kind) {
+      case 'component': {
+        this.view.setInputs(props)
+        break
+      }
+      case 'flexRenderComponent': {
+        // No-op. When FlexRenderFlags.PropsReferenceChanged is set,
+        // FlexRenderComponent will be updated into `dirtyCheck`.
+        break
+      }
+    }
+  }
+
+  override dirtyCheck() {
+    switch (this.content.kind) {
+      case 'component': {
+        // Component context is currently valuated with the cell context. Since it's reference
+        // shouldn't change, we force mark the component as dirty in order to re-evaluate function invocation in view.
+        // NOTE: this should behave like having a component with ChangeDetectionStrategy.Default
+        this.view.markAsDirty()
+        break
+      }
+      case 'flexRenderComponent': {
+        // Given context instance will always have a different reference than the previous one,
+        // so instead of recreating the entire view, we will only update the current view
+        if (this.view.eqType(this.content.content)) {
+          this.view.update(this.content.content)
+        }
+        this.view.markAsDirty()
+        break
+      }
+    }
+  }
+
+  override unmount() {
+    this.view.componentRef.destroy()
+  }
+
+  override onDestroy(callback: Function) {
+    this.view.componentRef.onDestroy(callback)
+  }
+}

package/src/flexRender.ts

@@ -0,0 +1,124 @@
+import {
+  DestroyRef,
+  Directive,
+  Injector,
+  InputSignal,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+  input,
+} from '@angular/core'
+import {
+  FlexRenderInputContent,
+  FlexViewRenderer,
+} from './flex-render/renderer'
+import type {
+  CellContext,
+  CellData,
+  HeaderContext,
+  RowData,
+  TableFeatures,
+} from '@tanstack/table-core'
+
+export {
+  injectFlexRenderContext,
+  type FlexRenderComponentProps,
+} from './flex-render/context'
+
+export type {
+  FlexRenderInputContent,
+  FlexRenderContent,
+} from './flex-render/renderer'
+
+/**
+ * Use this utility directive to render headers, cells, or footers with custom markup.
+ *
+ * Note: If you are rendering cell, header, or footer without custom context or other props,
+ * you can use the {@link FlexRenderCell} directive as shorthand instead .
+ *
+ * @example
+ * ```ts
+ * import {FlexRender} from '@tanstack/angular-table';
+ *
+ * @Component({
+ *   imports: [FlexRender],
+ *   template: `
+ *      <td
+ *        *flexRender="
+ *          cell.column.columnDef.cell;
+ *          props: cell.getContext();
+ *          let cell"
+ *      >
+ *        {{cell}}
+ *      </td>
+ *
+ *      <th
+ *        *flexRender="
+ *          header.column.columnDef.header;
+ *          props: header.getContext();
+ *          let header"
+ *        >
+ *        {{header}}
+ *      </td>
+ *
+ *      <td
+ *        *flexRender="
+ *          footer.column.columnDef.footer;
+ *          props: footer.getContext();
+ *          let footer"
+ *      >
+ *        {{footer}}
+ *      </td>
+ *   `,
+ * })
+ * class App {
+ * }
+ * ```
+ *
+ * Can be imported through {@link FlexRenderDirective} or {@link FlexRender} import,
+ * which the latter is preferred.
+ */
+@Directive({
+  selector: 'ng-template[flexRender]',
+})
+export class FlexRenderDirective<
+  TFeatures extends TableFeatures,
+  TRowData extends RowData,
+  TValue extends CellData,
+  TProps extends
+    | NonNullable<unknown>
+    | CellContext<TFeatures, TRowData, TValue>
+    | HeaderContext<TFeatures, TRowData, TValue>,
+> {
+  readonly content: InputSignal<FlexRenderInputContent<TProps>> = input(
+    undefined as FlexRenderInputContent<TProps>,
+    { alias: 'flexRender' },
+  )
+
+  readonly props = input<TProps>({} as TProps, {
+    alias: 'flexRenderProps',
+  })
+
+  readonly injector = input(inject(Injector), {
+    alias: 'flexRenderInjector',
+  })
+
+  readonly #viewContainerRef = inject(ViewContainerRef)
+  readonly #templateRef = inject(TemplateRef)
+
+  constructor() {
+    const renderer = new FlexViewRenderer({
+      content: this.content,
+      props: this.props,
+      injector: this.injector,
+      templateRef: this.#templateRef,
+      viewContainerRef: this.#viewContainerRef,
+    })
+
+    renderer.mount()
+
+    inject(DestroyRef).onDestroy(() => {
+      renderer.destroy()
+    })
+  }
+}

package/src/helpers/cell.ts

@@ -0,0 +1,104 @@
+import { Directive, InjectionToken, inject, input } from '@angular/core'
+import { Cell, CellData, RowData, TableFeatures } from '@tanstack/table-core'
+import type { Signal } from '@angular/core'
+
+/**
+ * DI context shape for a TanStack Table cell.
+ *
+ * This exists to make the current `Cell` injectable by any nested component/directive
+ * without having to pass it through inputs/props manually.
+ */
+export interface TanStackTableCellContext<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData,
+> {
+  /** Signal that returns the current cell instance. */
+  cell: Signal<Cell<TFeatures, TData, TValue>>
+}
+
+/**
+ * Injection token that provides access to the current cell.
+ *
+ * This token is provided by the {@link TanStackTableCell} directive.
+ */
+export const TanStackTableCellToken = new InjectionToken<
+  TanStackTableCellContext<any, any, any>['cell']
+>('[TanStack Table] CellContext')
+
+/**
+ * Provides a TanStack Table `Cell` instance in Angular DI.
+ *
+ * The cell can be injected by:
+ * - any descendant of an element using `[tanStackTableCell]="..."`
+ * - any component instantiated by `*flexRender` when the render props contains `cell`
+ *
+ * @example
+ * Inject from the nearest `[tanStackTableCell]`:
+ * ```html
+ * <td [tanStackTableCell]="cell">
+ *   <app-cell-actions />
+ * </td>
+ * ```
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'app-cell-actions',
+ *   template: `{{ cell().id }}`,
+ * })
+ * export class CellActionsComponent {
+ *   readonly cell = injectTableCellContext()
+ * }
+ * ```
+ *
+ * @example
+ * Inject inside a component rendered via `flexRender`:
+ * ```ts
+ * @Component({
+ *   selector: 'app-price-cell',
+ *   template: `{{ cell().getValue() }}`,
+ * })
+ * export class PriceCellComponent {
+ *   readonly cell = injectTableCellContext()
+ * }
+ * ```
+ */
+@Directive({
+  selector: '[tanStackTableCell]',
+  exportAs: 'cell',
+  providers: [
+    {
+      provide: TanStackTableCellToken,
+      useFactory: () => inject(TanStackTableCell).cell,
+    },
+  ],
+})
+export class TanStackTableCell<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData,
+> implements TanStackTableCellContext<TFeatures, TData, TValue> {
+  /**
+   * The current TanStack Table cell.
+   *
+   * Provided as a required signal input so DI consumers always read the latest value.
+   */
+  readonly cell = input.required<Cell<TFeatures, TData, TValue>>({
+    alias: 'tanStackTableCell',
+  })
+}
+
+/**
+ * Injects the current TanStack Table cell signal.
+ *
+ * Available when:
+ * - there is a nearest `[tanStackTableCell]` directive in the DI tree, or
+ * - the caller is rendered via `*flexRender` with render props containing `cell`
+ */
+export function injectTableCellContext<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData,
+>(): TanStackTableCellContext<TFeatures, TData, TValue>['cell'] {
+  return inject(TanStackTableCellToken)
+}