From b9987af2d04e457cb079f5a83bcb0bbc0c24a4e1 Mon Sep 17 00:00:00 2001
From: Kevin Fabre <117300300+KevinFabre-ods@users.noreply.github.com>
Date: Mon, 26 Aug 2024 09:28:24 +0200
Subject: [PATCH] fix(Table): "no records" label is always visible (#258)

---
 .../src/components/Table/Body.svelte          | 15 +++--------
 .../src/components/Table/EmptyRow.svelte      | 26 +++++++++++++++++++
 .../src/components/Table/TableCard.svelte     |  1 +
 3 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 packages/visualizations/src/components/Table/EmptyRow.svelte

diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte
index 5e22a8d3..e3c97202 100644
--- a/packages/visualizations/src/components/Table/Body.svelte
+++ b/packages/visualizations/src/components/Table/Body.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
     import type { Column, TableData } from './types';
     import Cell, { LoadingCell } from './Cell';
+    import EmptyRow from './EmptyRow.svelte';
 
     export let loadingRowsNumber: number | null;
     export let columns: Column[];
     export let records: TableData | undefined;
-    export let emptyStateLabel = 'No records found...';
+    export let emptyStateLabel: string | undefined;
 </script>
 
 <tbody>
     {#if records?.length === 0 && !loadingRowsNumber}
-        <tr>
-            <td colspan={columns.length}>
-                <em>{emptyStateLabel}</em>
-            </td>
-        </tr>
+        <EmptyRow label={emptyStateLabel} />
     {/if}
     {#if loadingRowsNumber}
         {#each Array(loadingRowsNumber) as _}
@@ -43,10 +40,4 @@
     :global(.ods-dataviz--default) tr:last-child {
         border-bottom: none;
     }
-
-    :global(.ods-dataviz--default) em {
-        text-align: center;
-        width: 100%;
-        display: block;
-    }
 </style>
diff --git a/packages/visualizations/src/components/Table/EmptyRow.svelte b/packages/visualizations/src/components/Table/EmptyRow.svelte
new file mode 100644
index 00000000..40779385
--- /dev/null
+++ b/packages/visualizations/src/components/Table/EmptyRow.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    export let label = 'No records found...';
+</script>
+
+<tr>
+    <td>
+        <em>{label}</em>
+    </td>
+</tr>
+
+<style lang="scss">
+    $row-height: 48px;
+    tr {
+        height: $row-height;
+    }
+    td {
+        box-sizing: border-box;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: $row-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
diff --git a/packages/visualizations/src/components/Table/TableCard.svelte b/packages/visualizations/src/components/Table/TableCard.svelte
index db008b04..254c94b2 100644
--- a/packages/visualizations/src/components/Table/TableCard.svelte
+++ b/packages/visualizations/src/components/Table/TableCard.svelte
@@ -47,6 +47,7 @@
         margin-bottom: var(--spacing-100);
         overflow: hidden;
         background-color: var(--background-color);
+        position: relative;
     }
     :global(.ods-dataviz--default) div {
         max-width: 100%;