feat(Table): add empty state (#247)

opendatasoft · Jun 26, 2024 · df94b96 · df94b96 · github-actions · Jun 26, 2024
1 parent c91a66f
commit df94b96
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 3 deletions.
diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx
@@ -87,4 +87,10 @@ export const Loading = Template.bind({});
 Loading.args = {
     data: fetchingData,
     options,
-};
+};
+
+export const emptyState = Template.bind({});
+emptyState.args = {
+    data: { value: [], loading: false },
+    options: { ...options, emptyStateLabel: 'Neniuj registroj trovitaj...' },
+};
diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte
@@ -5,9 +5,17 @@
     export let loadingRowsNumber: number | null;
     export let columns: Column[];
     export let records: TableData;
+    export let emptyStateLabel = 'No records found...';
 </script>
 
 <tbody>
+    {#if records.length === 0 && !loadingRowsNumber}
+        <tr>
+            <td colspan={columns.length}>
+                <em>{emptyStateLabel}</em>
+            </td>
+        </tr>
+    {/if}
     {#if loadingRowsNumber}
         {#each Array(loadingRowsNumber) as _}
             <tr>
@@ -35,4 +43,10 @@
     :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/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte
@@ -9,6 +9,7 @@
     export let columns: Column[];
     export let records: DataFrame | undefined;
     export let description: string | undefined;
+    export let emptyStateLabel: string | undefined;
 
     const tableId = `table-${generateId()}`;
 </script>
@@ -17,7 +18,7 @@
     <table aria-describedby={description ? tableId : undefined}>
         <Headers {columns} />
         {#if records}
-            <Body {loadingRowsNumber} {records} {columns} />
+            <Body {loadingRowsNumber} {records} {columns} {emptyStateLabel} />
         {/if}
     </table>
 </div>

diff --git a/packages/visualizations/src/components/Table/TableCard.svelte b/packages/visualizations/src/components/Table/TableCard.svelte
@@ -21,6 +21,7 @@
         unstyled,
         locale: localeOption,
         pagination,
+        emptyStateLabel,
     } = options);
     $: $locale = localeOption || navigator.language;
     $: defaultLoadingRowsNumber = pagination ? pagination.recordsPerPage : 5;
@@ -32,7 +33,7 @@
 
 <Card {title} {subtitle} {source} defaultStyle={!unstyled}>
     <div>
-        <Table {loadingRowsNumber} {records} {columns} {description} />
+        <Table {loadingRowsNumber} {records} {columns} {description} {emptyStateLabel} />
         {#if pagination}
             <Pagination {...pagination} />
         {/if}

diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts
@@ -98,6 +98,7 @@ export type TableOptions = {
     title?: string;
     subtitle?: string;
     description?: string;
+    emptyStateLabel?: string;
     source?: Source;
     /** To format date and number with the right locale. Default is from browser language */
     locale?: string;
File	Branches	Funcs	Lines	Uncovered Lines
src
index.ts	100%	100%	100%
src/client
error.ts	100%	100%	100%
index.ts	74.03%	100%	95.31%	102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
types.ts	100%	100%	100%
src/odsql
clauses.ts	71.43%	80%	90.91%	14, 32, 42
index.ts	83.72%	95.74%	94.19%	111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79