feat(Table): add empty prop

src/runtime/components/Table.vue

@@ -75,6 +75,11 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
   data?: T[]
   columns?: TableColumn<T>[]
   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({
         <tr v-else>
           <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              {{ t('table.noData') }}
+              {{ empty || t('table.noData') }}
             </slot>
           </td>
         </tr>

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 empty slot', { props: { columns }, slots: { empty: () => 'Empty slot' } }],
-    ['with loading slot', { props: { ...props, data: [], columns, loading: true }, slots: { loading: () => 'Loading 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<typeof data[number]>, slots?: Partial<TableSlots<typeof data[number]>> }) => {
     const html = await ComponentRender(nameOrHtml, options, Table)

test/components/__snapshots__/Table-vue.spec.ts.snap

@@ -508,6 +508,22 @@ exports[`Table > renders with data correctly 1`] = `
 </div>"
 `;
 
+exports[`Table > renders with empty correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <!--v-if-->
+    <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
+      <tr class="data-[selected=true]:bg-(--ui-bg-elevated)/50"></tr>
+    </thead>
+    <tbody class="divide-y divide-(--ui-border) [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-primary)">
+      <tr>
+        <td colspan="0" class="py-6 text-center text-sm text-(--ui-text-muted)">There is no data</td>
+      </tr>
+    </tbody>
+  </table>
+</div>"
+`;
+
 exports[`Table > renders with empty slot correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">

test/components/__snapshots__/Table.spec.ts.snap

@@ -508,6 +508,22 @@ exports[`Table > renders with data correctly 1`] = `
 </div>"
 `;
 
+exports[`Table > renders with empty correctly 1`] = `
+"<div class="relative overflow-auto">
+  <table class="min-w-full overflow-clip">
+    <!--v-if-->
+    <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
+      <tr class="data-[selected=true]:bg-(--ui-bg-elevated)/50"></tr>
+    </thead>
+    <tbody class="divide-y divide-(--ui-border) [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-primary)">
+      <tr>
+        <td colspan="0" class="py-6 text-center text-sm text-(--ui-text-muted)">There is no data</td>
+      </tr>
+    </tbody>
+  </table>
+</div>"
+`;
+
 exports[`Table > renders with empty slot correctly 1`] = `
 "<div class="relative overflow-auto">
   <table class="min-w-full overflow-clip">