refactor table components to use inject functions and update documentation

Author: riccardoperra

examples/angular/composable-tables/src/app/app.component.html

@@ -1,7 +1,8 @@
 <h1>Composable Tables Example</h1>
 <p class="description">
-  Both tables below use the same <code>useAppTable</code> hook and shareable
-  components, but with different data types and column configurations.
+  Both tables below use the same <code>injectAppTable</code> function and
+  shareable components, but with different data types and column
+  configurations.
 </p>
 
 <users-table />

examples/angular/composable-tables/src/app/table.ts

@@ -17,12 +17,14 @@ import {
   sortFns,
   tableFeatures,
 } from '@tanstack/angular-table'
+
 // Import table-level components
 import {
   PaginationControls,
   RowCount,
   TableToolbar,
 } from './components/table-components'
+// Import cell-level components
 import {
   CategoryCell,
   NumberCell,
@@ -32,43 +34,33 @@ import {
   StatusCell,
   TextCell,
 } from './components/cell-components'
+// Import header-level components (both use injectTableHeaderContext())
 import {
   ColumnFilter,
   FooterColumnId,
   FooterSum,
   SortIndicator,
 } from './components/header-components'
 
-// Import table-level components
-// import {
-//   PaginationControls,
-//   RowCount,
-//   TableToolbar,
-// } from '../components/table-components'
-
-// Import cell-level components
-
-// Import header/footer-level components (both use useHeaderContext)
-
 /**
  * Create the custom table hook with all pre-bound components.
  * This exports:
  * - createAppColumnHelper: Create column definitions with TFeatures already bound
- * - useAppTable: Hook for creating tables with TFeatures baked in
- * - useTableContext: Access table instance in tableComponents
- * - useCellContext: Access cell instance in cellComponents
- * - useHeaderContext: Access header instance in headerComponents
+ * - injectAppTable: Function for creating tables with TFeatures baked in
+ * - injectTableContext: Access table instance in tableComponents
+ * - injectTableCellContext: Access cell instance in cellComponents
+ * - injectTableHeaderContext: Access header instance in headerComponents
+ * - injectFlexRenderHeaderContext: Access FlexRenderContext with header-level typings
+ * - injectFlexRenderCellContext: Access FlexRenderContext with header-level typings
  */
 export const {
   createAppColumnHelper,
   injectAppTable,
   injectTableContext,
   injectTableCellContext,
   injectTableHeaderContext,
-  // useAppTable,
-  // useTableContext,
-  // useCellContext,
-  // useHeaderContext,
+  // injectFlexRenderHeaderContext
+  // injectFlexRenderCellContext
 } = createTableHook({
   // Features are set once here and shared across all tables
   _features: tableFeatures({

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

@@ -302,6 +302,53 @@ export type CreateTableContextOptions<
   headerComponents?: THeaderComponents
 }
 
+export type CreateTableHookResult<
+  TFeatures extends TableFeatures,
+  TTableComponents extends Record<string, RenderableComponent>,
+  TCellComponents extends Record<string, RenderableComponent>,
+  THeaderComponents extends Record<string, RenderableComponent>,
+> = {
+  createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<
+    TFeatures,
+    TData,
+    TCellComponents,
+    THeaderComponents
+  >
+  injectTableContext: <TData extends RowData = RowData>() => Signal<
+    AngularTable<TFeatures, TData>
+  >
+  injectTableHeaderContext: <
+    TValue extends CellData = CellData,
+    TRowData extends RowData = RowData,
+  >() => Signal<Header<TFeatures, TRowData, TValue>>
+  injectTableCellContext: <
+    TValue extends CellData = CellData,
+    TRowData extends RowData = RowData,
+  >() => Signal<Cell<TFeatures, TRowData, TValue>>
+  injectFlexRenderHeaderContext: <
+    TData extends RowData,
+    TValue extends CellData,
+  >() => HeaderContext<TFeatures, TData, TValue>
+  injectFlexRenderCellContext: <
+    TData extends RowData,
+    TValue extends CellData,
+  >() => CellContext<TFeatures, TData, TValue>
+  injectAppTable: <TData extends RowData, TSelected = {}>(
+    tableOptions: () => Omit<
+      TableOptions<TFeatures, TData>,
+      '_features' | '_rowModels'
+    >,
+    selector?: (state: TableState<TFeatures>) => TSelected,
+  ) => AppAngularTable<
+    TFeatures,
+    TData,
+    TSelected,
+    TTableComponents,
+    TCellComponents,
+    THeaderComponents
+  >
+}
+
 export function createTableHook<
   TFeatures extends TableFeatures,
   const TTableComponents extends Record<string, RenderableComponent>,
@@ -317,32 +364,43 @@ export function createTableHook<
   TTableComponents,
   TCellComponents,
   THeaderComponents
->) {
+>): CreateTableHookResult<
+  TFeatures,
+  TTableComponents,
+  TCellComponents,
+  THeaderComponents
+> {
   function injectTableContext<TData extends RowData = RowData>(): Signal<
     AngularTable<TFeatures, TData>
   > {
     return _injectTableContext<TFeatures, TData>()
   }
 
-  function injectTableHeaderContext<TValue extends CellData = CellData>() {
-    return _injectTableHeaderContext<TFeatures, any, TValue>()
+  function injectTableHeaderContext<
+    TValue extends CellData = CellData,
+    TRowData extends RowData = RowData,
+  >(): Signal<Header<TFeatures, TRowData, TValue>> {
+    return _injectTableHeaderContext<TFeatures, TRowData, TValue>()
   }
 
-  function injectTableCellContext<TValue extends CellData = CellData>() {
-    return _injectTableCellContext<TFeatures, any, TValue>()
+  function injectTableCellContext<
+    TValue extends CellData = CellData,
+    TRowData extends RowData = RowData,
+  >(): Signal<Cell<TFeatures, TRowData, TValue>> {
+    return _injectTableCellContext<TFeatures, TRowData, TValue>()
   }
 
   function injectFlexRenderHeaderContext<
     TData extends RowData,
     TValue extends CellData,
-  >() {
+  >(): HeaderContext<TFeatures, TData, TValue> {
     return injectFlexRenderContext<HeaderContext<TFeatures, TData, TValue>>()
   }
 
   function injectFlexRenderCellContext<
     TData extends RowData,
     TValue extends CellData,
-  >() {
+  >(): CellContext<TFeatures, TData, TValue> {
     return injectFlexRenderContext<CellContext<TFeatures, TData, TValue>>()
   }
 
@@ -364,12 +422,12 @@ export function createTableHook<
       return cell as Cell<TFeatures, TData, any> & TCellComponents
     }
 
-    function appHeader(header: Cell<TFeatures, TData, any>) {
-      return header as Cell<TFeatures, TData, any> & TCellComponents
+    function appHeader(header: Header<TFeatures, TData, any>) {
+      return header as Header<TFeatures, TData, any> & THeaderComponents
     }
 
-    function appFooter(footer: Cell<TFeatures, TData, any>) {
-      return footer as Cell<TFeatures, TData, any> & TCellComponents
+    function appFooter(footer: Header<TFeatures, TData, any>) {
+      return footer as Header<TFeatures, TData, any> & THeaderComponents
     }
 
     const appTableFeatures: TableFeature<{}> = {