@tanstack/angular-table 9.0.0-alpha.5 → 9.0.0-alpha.52

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)
+}