diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx index 46963c50..d848855d 100644 --- 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, -}; \ No newline at end of file +}; + +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 index 64977df8..483d235a 100644 --- 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...'; + {#if records.length === 0 && !loadingRowsNumber} + + + {emptyStateLabel} + + + {/if} {#if loadingRowsNumber} {#each Array(loadingRowsNumber) as _} @@ -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; + } diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte index 29d7f6d3..f82d7b85 100644 --- 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()}`; @@ -17,7 +18,7 @@ {#if records} - + {/if}
diff --git a/packages/visualizations/src/components/Table/TableCard.svelte b/packages/visualizations/src/components/Table/TableCard.svelte index 6886e85b..5b527b99 100644 --- 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 @@
- +
{#if pagination} {/if} diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts index d6b2170e..e0050e83 100644 --- 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;