From d6cbe7b9ce2b8268ab102a2a2f3699fa8674149c Mon Sep 17 00:00:00 2001
From: Sasitha Rajapaksha <sasitha.rajapaksha@cognizant.com>
Date: Mon, 4 Sep 2023 11:49:42 +0800
Subject: [PATCH] [BOOKINGSG-4633][SR] empty view update

---
 src/data-table/data-table.styles.tsx      | 4 ++++
 src/data-table/data-table.tsx             | 5 +++--
 stories/data-table/data-table.stories.mdx | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/data-table/data-table.styles.tsx b/src/data-table/data-table.styles.tsx
index fb55a8997..9d5ef4537 100644
--- a/src/data-table/data-table.styles.tsx
+++ b/src/data-table/data-table.styles.tsx
@@ -148,3 +148,7 @@ export const ErrorDisplayElement = styled(ErrorDisplay)`
         margin-top: 1rem;
     }
 `;
+
+export const EmptyViewCell = styled.td`
+    padding: 4rem 0;
+`;
diff --git a/src/data-table/data-table.tsx b/src/data-table/data-table.tsx
index f14002f7b..73b721957 100644
--- a/src/data-table/data-table.tsx
+++ b/src/data-table/data-table.tsx
@@ -4,6 +4,7 @@ import {
     BodyCellContent,
     BodyRow,
     CheckBoxWrapper,
+    EmptyViewCell,
     ErrorDisplayElement,
     HeaderCell,
     HeaderCellWrapper,
@@ -150,11 +151,11 @@ export const DataTable = ({
     const renderRows = () => {
         return rows?.length < 1 ? (
             <tr>
-                <td colSpan={getTotalColumns()}>
+                <EmptyViewCell colSpan={getTotalColumns()}>
                     {renderCustomEmptyView
                         ? renderCustomEmptyView()
                         : renderBasicEmptyView()}
-                </td>
+                </EmptyViewCell>
             </tr>
         ) : (
             <>
diff --git a/stories/data-table/data-table.stories.mdx b/stories/data-table/data-table.stories.mdx
index 0b5321aab..c8fcaf895 100644
--- a/stories/data-table/data-table.stories.mdx
+++ b/stories/data-table/data-table.stories.mdx
@@ -307,6 +307,10 @@ Table Empty Data View.
                 description: "This is Placeholder text",
                 actionButton: {
                     children: "Trigger",
+                    styleType: "secondary",
+                    style: {
+                        width: "5rem",
+                    },
                     onClick: () => {
                         alert("Clicked on Trigger button");
                     },