From c5e4c61dedb49f1731efb0bd1572c3453b4e35b2 Mon Sep 17 00:00:00 2001
From: Mamerto Giango <merto.20@gmail.com>
Date: Tue, 4 Jun 2024 19:28:33 +0800
Subject: [PATCH] Adding documentation for custom component support.

---
 docs/framework/angular/angular-table.md | 54 +++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md
index 9ab33d4e0d..4786d9ab5a 100644
--- a/docs/framework/angular/angular-table.md
+++ b/docs/framework/angular/angular-table.md
@@ -214,4 +214,58 @@ class CustomCellComponent {
 }
 ```
 
+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
+import {FlexRenderComponent} from "@tanstack/angular-table";
+
+class AppComponent {
+  columns: ColumnDef<Person>[] = [
+    {
+      id: 'select',
+      header: () => TableHeadSelectionComponent<Person>,
+      cell: () => TableRowSelectionComponent<Person>,
+    },
+  ]
+}
+```
+
+```angular2html
+<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.
+
+```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>>()
+}
+```
\ No newline at end of file