createTableHook add typed helpers

Author: riccardoperra

packages/angular-table/src/helpers/createTableHook.ts

@@ -30,7 +30,7 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/table-core'
-import type { Type } from '@angular/core'
+import type { Signal, Type } from '@angular/core'
 
 type RenderableComponent =
   | Type<any>
@@ -247,7 +247,20 @@ export type AppAngularTable<
   TTableComponents extends Record<string, RenderableComponent>,
   TCellComponents extends Record<string, RenderableComponent>,
   THeaderComponents extends Record<string, RenderableComponent>,
-> = AngularTable<TFeatures, TData, TSelected> & NoInfer<TTableComponents>
+> = AngularTable<TFeatures, TData, TSelected> &
+  NoInfer<TTableComponents> & {
+    appCell: <TValue>(
+      cell: Cell<TFeatures, TData, TValue>,
+    ) => Cell<TFeatures, TData, TValue> & NoInfer<TCellComponents>
+
+    appHeader: <TValue>(
+      header: Header<TFeatures, TData, TValue>,
+    ) => Header<TFeatures, TData, TValue> & NoInfer<THeaderComponents>
+
+    appFooter: <TValue>(
+      footer: Header<TFeatures, TData, TValue>,
+    ) => Header<TFeatures, TData, TValue> & NoInfer<THeaderComponents>
+  }
 
 // =============================================================================
 // CreateTableHook Options and Props
@@ -305,7 +318,9 @@ export function createTableHook<
   TCellComponents,
   THeaderComponents
 >) {
-  function injectTableContext<TData extends RowData = RowData>() {
+  function injectTableContext<TData extends RowData = RowData>(): Signal<
+    AngularTable<TFeatures, TData>
+  > {
     return _injectTableContext<TFeatures, TData>()
   }
 
@@ -345,9 +360,21 @@ export function createTableHook<
     TCellComponents,
     THeaderComponents
   > {
+    function appCell(cell: Cell<TFeatures, TData, any>) {
+      return cell as Cell<TFeatures, TData, any> & TCellComponents
+    }
+
+    function appHeader(header: Cell<TFeatures, TData, any>) {
+      return header as Cell<TFeatures, TData, any> & TCellComponents
+    }
+
+    function appFooter(footer: Cell<TFeatures, TData, any>) {
+      return footer as Cell<TFeatures, TData, any> & TCellComponents
+    }
+
     const appTableFeatures: TableFeature<{}> = {
       constructTableAPIs: (table) => {
-        Object.assign(table, tableComponents)
+        Object.assign(table, tableComponents, { appCell, appHeader, appFooter })
       },
       assignCellPrototype(prototype) {
         Object.assign(prototype, cellComponents)

packages/angular-table/src/helpers/table.ts

@@ -1,18 +1,12 @@
 import { Directive, InjectionToken, inject, input } from '@angular/core'
-import { RowData, Table, TableFeatures } from '@tanstack/table-core'
+import { RowData, TableFeatures, TableState } from '@tanstack/table-core'
+import { AngularTable } from '../injectTable'
 import type { Signal } from '@angular/core'
 
 export const TanStackTableToken = new InjectionToken<
-  TanStackTableContext<any, any>['table']
+  Signal<AngularTable<any, any>>
 >('[TanStack Table] Table Context')
 
-export interface TanStackTableContext<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> {
-  table: Signal<Table<TFeatures, TData>>
-}
-
 @Directive({
   selector: '[tanStackTable]',
   exportAs: 'table',
@@ -26,15 +20,17 @@ export interface TanStackTableContext<
 export class TanStackTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-> implements TanStackTableContext<TFeatures, TData> {
-  readonly table = input.required<Table<TFeatures, TData>>({
+  TSelected extends {} = TableState<TFeatures>,
+> {
+  readonly table = input.required<AngularTable<TFeatures, TData, TSelected>>({
     alias: 'tanStackTable',
   })
 }
 
 export function injectTableContext<
   TFeatures extends TableFeatures,
   TData extends RowData,
->(): TanStackTableContext<TFeatures, TData>['table'] {
+  TSelected extends {} = TableState<TFeatures>,
+>(): Signal<AngularTable<TFeatures, TData, TSelected>> {
   return inject(TanStackTableToken)
 }

packages/angular-table/src/injectTable.ts

@@ -22,7 +22,7 @@ import type { Signal, ValueEqualityFn } from '@angular/core'
 export type AngularTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
-  TSelected = {},
+  TSelected = TableState<TFeatures>,
 > = Table<TFeatures, TData> & {
   /**
    * The selected state from the table store, based on the selector provided.