chore(Table): handle empty-state

Resolves #243

docs/components/content/examples/TableExampleSearchable.vue

@@ -1,4 +1,21 @@
 <script setup>
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}]
+
 const people = [{
   id: 1,
   name: 'Lindsay Walton',
@@ -58,6 +75,6 @@ const filteredRows = computed(() => {
       <UInput v-model="q" placeholder="Filter people..." />
     </div>
 
-    <UTable :rows="filteredRows" />
+    <UTable :rows="filteredRows" :columns="columns" />
   </div>
 </template>

docs/content/4.data/1.table.md

@@ -449,6 +449,40 @@ const selected = ref([people[1]])
 ```
 ::
 
+### Empty
+
+Use the `empty-state` prop to display a message when there are no results.
+
+You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
+
+You can also set it to `null` to hide the empty state.
+
+::component-card
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  emptyState:
+    icon: 'i-heroicons-circle-stack-20-solid'
+    label: "No items."
+excludedProps:
+  - emptyState
+---
+::
+
 ## Props
 
 :component-props

docs/content/5.navigation/2.command-palette.md

@@ -234,9 +234,9 @@ excludedProps:
 
 Use the `empty-state` prop to display a message when there are no results.
 
-You can pass an `object` through the `empty-state` prop or globally through `ui.commandPalette.default.emptyState`. Here is the default:
+You can pass an `object` through the `empty-state` prop or globally through `ui.commandPalette.default.emptyState`.
 
-You can also set it to `null` to hide the empty label.
+You can also set it to `null` to hide the empty state.
 
 ::component-card
 ---

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