extensible table disabled on ssr

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@@ -1,92 +1,94 @@
-<ngx-datatable
-  default
-  [rows]="data"
-  [count]="recordsTotal"
-  [list]="list"
-  (activate)="tableActivate.emit($event)"
->
-  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
-    <ngx-datatable-column
-      [name]="actionsText | abpLocalization"
-      [maxWidth]="columnWidths[0]"
-      [width]="columnWidths[0]"
-      [sortable]="false"
-    >
-      <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
-        <ng-container
-          *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
-        ></ng-container>
-        <ng-template #gridActions>
-          @if (isVisibleActions(row)) {
-            <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
-          }
+@if (!ssrService.isSsr) {
+  <ngx-datatable
+    default
+    [rows]="data"
+    [count]="recordsTotal"
+    [list]="list"
+    (activate)="tableActivate.emit($event)"
+  >
+    @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
+      <ngx-datatable-column
+        [name]="actionsText | abpLocalization"
+        [maxWidth]="columnWidths[0]"
+        [width]="columnWidths[0]"
+        [sortable]="false"
+      >
+        <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
+          <ng-container
+            *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
+          ></ng-container>
+          <ng-template #gridActions>
+            @if (isVisibleActions(row)) {
+              <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
+            }
+          </ng-template>
         </ng-template>
-      </ng-template>
-    </ngx-datatable-column>
-  }
-  @for (prop of propList; track prop.name; let i = $index) {
-    <ngx-datatable-column
-      *abpVisible="prop.columnVisible(getInjected)"
-      [width]="columnWidths[i + 1] || 200"
-      [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization"
-      [prop]="prop.name"
-      [sortable]="prop.sortable"
-    >
-      <ng-template ngx-datatable-header-template let-column="column">
-        @if (prop.tooltip) {
-          <span
-            [ngbTooltip]="prop.tooltip.text | abpLocalization"
-            [placement]="prop.tooltip.placement || 'auto'"
-            container="body"
-          >
+      </ngx-datatable-column>
+    }
+    @for (prop of propList; track prop.name; let i = $index) {
+      <ngx-datatable-column
+        *abpVisible="prop.columnVisible(getInjected)"
+        [width]="columnWidths[i + 1] || 200"
+        [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization"
+        [prop]="prop.name"
+        [sortable]="prop.sortable"
+      >
+        <ng-template ngx-datatable-header-template let-column="column">
+          @if (prop.tooltip) {
+            <span
+              [ngbTooltip]="prop.tooltip.text | abpLocalization"
+              [placement]="prop.tooltip.placement || 'auto'"
+              container="body"
+            >
             {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
           </span>
-        } @else {
-          {{ column.name }}
-        }
-      </ng-template>
-      <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
-        <ng-container *abpPermission="prop.permission; runChangeDetection: false">
-          <ng-container *abpVisible="row['_' + prop.name]?.visible">
-            @if (!row['_' + prop.name].component) {
-              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
-                <div
-                  [innerHTML]="
+          } @else {
+            {{ column.name }}
+          }
+        </ng-template>
+        <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
+          <ng-container *abpPermission="prop.permission; runChangeDetection: false">
+            <ng-container *abpVisible="row['_' + prop.name]?.visible">
+              @if (!row['_' + prop.name].component) {
+                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
+                  <div
+                    [innerHTML]="
                   !prop.isExtra
                     ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)
                     : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)
                 "
-                  (click)="
+                    (click)="
                   prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
                 "
-                  [ngClass]="entityPropTypeClasses[prop.type]"
-                  [class.pointer]="prop.action"
-                ></div>
-              } @else {
-                <div
-                  [innerHTML]="
+                    [ngClass]="entityPropTypeClasses[prop.type]"
+                    [class.pointer]="prop.action"
+                  ></div>
+                } @else {
+                  <div
+                    [innerHTML]="
                   !prop.isExtra
                     ? (row['_' + prop.name]?.value | async)
                     : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)
                 "
-                  (click)="
+                    (click)="
                   prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
                 "
-                  [ngClass]="entityPropTypeClasses[prop.type]"
-                  [class.pointer]="prop.action"
-                ></div>
-              }
-            } @else {
-              <ng-container
-                *ngComponentOutlet="
+                    [ngClass]="entityPropTypeClasses[prop.type]"
+                    [class.pointer]="prop.action"
+                  ></div>
+                }
+              } @else {
+                <ng-container
+                  *ngComponentOutlet="
                   row['_' + prop.name].component;
                   injector: row['_' + prop.name].injector
                 "
-              ></ng-container>
-            }
+                ></ng-container>
+              }
+            </ng-container>
           </ng-container>
-        </ng-container>
-      </ng-template>
-    </ngx-datatable-column>
-  }
-</ngx-datatable>
+        </ng-template>
+      </ngx-datatable-column>
+    }
+  </ngx-datatable>
+}

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -28,7 +28,7 @@ import {
   LocalizationModule,
   PermissionDirective,
   PermissionService,
-  TimezoneService,
+  SSRService,
   UtcToLocalPipe,
 } from '@abp/ng.core';
 import {
@@ -78,9 +78,9 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   protected readonly cdr = inject(ChangeDetectorRef);
   protected readonly locale = inject(LOCALE_ID);
   protected readonly config = inject(ConfigStateService);
-  protected readonly timeZoneService = inject(TimezoneService);
   protected readonly entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
   protected readonly permissionService = inject(PermissionService);
+  protected readonly ssrService = inject(SSRService);
 
   protected _actionsText!: string;
   @Input()
@@ -227,8 +227,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
 
   ngAfterViewInit(): void {
     this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
-        this.data = [];
-        this.cdr.markForCheck();
-      });
+      this.data = [];
+      this.cdr.markForCheck();
+    });
   }
 }