From ca0b0388f13c86568f3b41cecfa5edd268628f27 Mon Sep 17 00:00:00 2001
From: Loris Janner <loris.janner@siemens.com>
Date: Wed, 20 May 2026 14:47:13 +0200
Subject: [PATCH] fix: center empty-content slot vertically and horizontally

Apply flex centering on datatable-scroller when it contains empty-content to ensure vertical and horizontal centering within the body.
---
 .../src/lib/components/body/body.component.scss       | 11 +++++++++++
 src/app/basic/empty-template.component.ts             |  2 ++
 2 files changed, 13 insertions(+)

diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.scss b/projects/ngx-datatable/src/lib/components/body/body.component.scss
index e6d666d0a..c20741208 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.scss
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.scss
@@ -15,6 +15,17 @@ datatable-scroller {
 
   :host-context(ngx-datatable.fixed-row) & {
     white-space: nowrap;
+
+    &:has([empty-content]) {
+      white-space: normal;
+    }
+  }
+
+  &:has([empty-content]) {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 
diff --git a/src/app/basic/empty-template.component.ts b/src/app/basic/empty-template.component.ts
index 9cdeb4c3a..d74d1b589 100644
--- a/src/app/basic/empty-template.component.ts
+++ b/src/app/basic/empty-template.component.ts
@@ -20,6 +20,8 @@ import { DatatableComponent, TableColumn } from '@siemens/ngx-datatable';
       <ngx-datatable
         class="material"
         columnMode="force"
+        style="height: 500px;"
+        [scrollbarV]="true"
         [rows]="[]"
         [columns]="columns"
         [headerHeight]="50"