chore(Table): handle empty-state

Resolves #243

src/runtime/app.config.ts

@@ -24,6 +24,11 @@ const table = {
     font: '',
     size: 'text-sm'
   },
+  emptyState: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
+    label: 'text-sm text-center text-gray-900 dark:text-white',
+    icon: 'w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4'
+  },
   default: {
     sortAscIcon: 'i-heroicons-bars-arrow-up-20-solid',
     sortDescIcon: 'i-heroicons-bars-arrow-down-20-solid',
@@ -34,6 +39,10 @@ const table = {
       color: 'gray',
       variant: 'ghost',
       class: '-m-1.5'
+    },
+    emptyState: {
+      icon: 'i-heroicons-circle-stack-20-solid',
+      label: 'No items.'
     }
   }
 }

src/runtime/components/data/Table.vue

@@ -33,6 +33,17 @@
             </slot>
           </td>
         </tr>
+
+        <tr v-if="emptyState && !rows.length">
+          <td :colspan="columns.length">
+            <div :class="ui.emptyState.wrapper">
+              <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
+              <p :class="ui.emptyState.label">
+                {{ emptyState.label }}
+              </p>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
@@ -93,6 +104,10 @@ export default defineComponent({
       type: String,
       default: () => appConfig.ui.table.default.sortDescIcon
     },
+    emptyState: {
+      type: Object as PropType<{ icon: string, label: string }>,
+      default: () => appConfig.ui.table.default.emptyState
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.table>>,
       default: () => appConfig.ui.table