[BOOKINGSG-4633][SR] empty view update

LifeSG · Sep 4, 2023 · d6cbe7b · d6cbe7b
1 parent 5693630
commit d6cbe7b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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");
                     },