diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.html
index cbab69fd3b..4bc5484ca1 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.html
@@ -26,5 +26,6 @@
 
     <ng-template #previewTemplate>
         <adf-datatable data-automation-id="adf-data-table-widget-preview" />
+        <div class="adf-preview-placeholder"></div>
     </ng-template>
 </div>
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.scss
index e5f7fbd650..d405af82a1 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.scss
@@ -1,3 +1,11 @@
 .adf-data-table-widget-failed-message {
     margin: 10px;
 }
+
+.adf-preview-placeholder {
+    background-color: var(--adf-theme-mat-grey-color-50);
+    height: 100%;
+    width: 100%;
+    min-height: 100px;
+    margin-bottom: 10px;
+}
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.spec.ts
index ec0d0b65de..0628b34fcd 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.spec.ts
@@ -237,6 +237,18 @@ describe('DataTableWidgetComponent', () => {
         expect(dataTable).toBeNull();
     });
 
+    it('should display data table placeholder if form is in preview state', () => {
+        widget.field = getDataVariable(mockVariableConfig, mockSchemaDefinition, [], mockJsonFormVariable);
+        spyOn(formCloudService, 'getPreviewState').and.returnValue(true);
+        fixture.detectChanges();
+
+        const previewDataTable = getPreview();
+        const dataTablePlaceholder = fixture.nativeElement.querySelector('.adf-preview-placeholder');
+
+        expect(previewDataTable).toBeTruthy();
+        expect(dataTablePlaceholder).toBeTruthy();
+    });
+
     describe('should NOT display error message if', () => {
         it('form is in preview state', () => {
             widget.field = getDataVariable(mockVariableConfig, mockSchemaDefinition, [], mockJsonFormVariableWithIncompleteData);