diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue index 6328fb72..cb3562e4 100644 --- a/src/runtime/components/Table.vue +++ b/src/runtime/components/Table.vue @@ -75,6 +75,11 @@ export interface TableProps extends TableOptions { data?: T[] columns?: TableColumn[] caption?: string + /** + * The text to display when the table is empty. + * @defaultValue t('table.noData') + */ + empty?: string /** * Whether the table should have a sticky header. * @defaultValue false @@ -369,7 +374,7 @@ defineExpose({ - {{ t('table.noData') }} + {{ empty || t('table.noData') }} diff --git a/test/components/Table.spec.ts b/test/components/Table.spec.ts index 053d67c1..80e69e30 100644 --- a/test/components/Table.spec.ts +++ b/test/components/Table.spec.ts @@ -145,6 +145,7 @@ describe('Table', () => { // Props ['with data', { props }], ['without data', {}], + ['with empty', { props: { empty: 'There is no data' } }], ['with caption', { props: { ...props, caption: 'Table caption' } }], ['with columns', { props: { ...props, columns } }], ['with sticky', { props: { ...props, sticky: true } }], @@ -158,8 +159,8 @@ describe('Table', () => { ['with header slot', { props, slots: { 'id-header': () => 'ID Header slot' } }], ['with cell slot', { props, slots: { 'id-cell': () => 'ID Cell slot' } }], ['with expanded slot', { props, slots: { expanded: () => 'Expanded slot' } }], - ['with empty slot', { props: { ...props, data: [], columns }, slots: { empty: () => 'Empty slot' } }], - ['with loading slot', { props: { ...props, data: [], columns, loading: true }, slots: { loading: () => 'Loading slot' } }], + ['with empty slot', { props: { columns }, slots: { empty: () => 'Empty slot' } }], + ['with loading slot', { props: { columns, loading: true }, slots: { loading: () => 'Loading slot' } }], ['with caption slot', { props, slots: { caption: () => 'Caption slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps, slots?: Partial> }) => { const html = await ComponentRender(nameOrHtml, options, Table) diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap index 6d621ad0..3e128604 100644 --- a/test/components/__snapshots__/Table-vue.spec.ts.snap +++ b/test/components/__snapshots__/Table-vue.spec.ts.snap @@ -508,6 +508,22 @@ exports[`Table > renders with data correctly 1`] = ` " `; +exports[`Table > renders with empty correctly 1`] = ` +"
+ + + + + + + + + + +
There is no data
+
" +`; + exports[`Table > renders with empty slot correctly 1`] = ` "
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap index 019b18c6..b6bb30ba 100644 --- a/test/components/__snapshots__/Table.spec.ts.snap +++ b/test/components/__snapshots__/Table.spec.ts.snap @@ -508,6 +508,22 @@ exports[`Table > renders with data correctly 1`] = ` " `; +exports[`Table > renders with empty correctly 1`] = ` +"
+
+ + + + + + + + + +
There is no data
+
" +`; + exports[`Table > renders with empty slot correctly 1`] = ` "