fix(addon-table): tr, thGroup fix hydration issues (#9460)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 11, 2024 · c5fd3f9 · c5fd3f9
1 parent 902e039
commit c5fd3f9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 30 deletions.
diff --git a/projects/addon-table/components/table/th-group/th-group.component.ts b/projects/addon-table/components/table/th-group/th-group.component.ts
@@ -24,16 +24,6 @@ import {TuiTableTh} from '../th/th.component';
     templateUrl: './th-group.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TUI_TABLE_PROVIDER],
-    host: {
-        /**
-         * TODO: fix later
-         * Be careful and thoughtful about using this attribute.
-         * It is intended as a last resort workaround.
-         * Components that break hydration should be
-         * considered bugs that need to be fixed.
-         */
-        ngSkipHydration: 'true',
-    },
 })
 export class TuiTableThGroup<T extends Partial<Record<keyof T, any>>>
     implements AfterContentInit

diff --git a/projects/addon-table/components/table/th-group/th-group.template.html b/projects/addon-table/components/table/th-group/th-group.template.html
@@ -3,14 +3,17 @@
     <ng-container
         *ngFor="let key of table.columns"
         [ngTemplateOutlet]="(headings[key] && headings[key].template) || plain"
+        [ngTemplateOutletContext]="{$implicit: key}"
+    />
+    <ng-template
+        #plain
+        let-key
     >
-        <ng-template #plain>
-            <th
-                *ngIf="!th && !heads.length"
-                tuiTh
-            >
-                {{ key.toString() }}
-            </th>
-        </ng-template>
-    </ng-container>
+        <th
+            *ngIf="!th && !heads.length"
+            tuiTh
+        >
+            {{ key.toString() }}
+        </th>
+    </ng-template>
 </ng-container>
diff --git a/projects/addon-table/components/table/tr/tr.component.ts b/projects/addon-table/components/table/tr/tr.component.ts
@@ -24,16 +24,6 @@ import {TuiTableTd} from '../td/td.component';
     templateUrl: './tr.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TUI_TABLE_PROVIDER],
-    host: {
-        /**
-         * TODO: fix later
-         * Be careful and thoughtful about using this attribute.
-         * It is intended as a last resort workaround.
-         * Components that break hydration should be
-         * considered bugs that need to be fixed.
-         */
-        ngSkipHydration: 'true',
-    },
 })
 export class TuiTableTr<T extends Partial<Record<keyof T, any>>>
     implements AfterContentInit

diff --git a/projects/addon-table/components/table/tr/tr.template.html b/projects/addon-table/components/table/tr/tr.template.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="cells$ | async as items">
+<ng-container *ngIf="cells$ | async as items; else dummy">
     <ng-container
         *ngFor="let key of table.columns"
         [ngTemplateOutlet]="(items[key] && items[key].template) || plain"
@@ -13,3 +13,4 @@
         </ng-template>
     </ng-container>
 </ng-container>
+<ng-template #dummy><td></td></ng-template>