fix(Table): "no records" label is always visible (#258)

Author: KevinFabre-ods

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>

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>

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%;