From 4ab7c1e8883d9464f121c3a7d8ef0383dd7b7f79 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michael@michaelbromley.co.uk>
Date: Thu, 7 Sep 2023 09:42:06 +0200
Subject: [PATCH] feat(admin-ui): Implement custom components in Collection
 data table

---
 .../collection-data-table.component.html        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.html b/packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.html
index 2ce5f89b17..0acc7e79d5 100644
--- a/packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.html
+++ b/packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.html
@@ -168,8 +168,21 @@
         >
             <div class="cell-content" [ngClass]="column.align">
                 <ng-container
-                    *ngTemplateOutlet="column.template; context: { item: item, depth: depth }"
-                ></ng-container>
+                    *ngIf="customComponents.get(column.id) as componentConfig; else defaultComponent"
+                >
+                    <ng-container
+                        *ngComponentOutlet="
+                            componentConfig.config.component;
+                            inputs: { rowItem: item };
+                            injector: componentConfig.injector
+                        "
+                    ></ng-container>
+                </ng-container>
+                <ng-template #defaultComponent>
+                    <ng-container
+                        *ngTemplateOutlet="column.template; context: { item: item, depth: depth }"
+                    ></ng-container>
+                </ng-template>
             </div>
         </td>
         <td [class.active]="activeIndex === absoluteIndex[item.id]"><!-- column select --></td>