From f7a34c8feeda6a4e1e1daff87b37b375aaa0c90d Mon Sep 17 00:00:00 2001
From: "Haytham A. Salama" <haythamasalama@gmail.com>
Date: Fri, 9 Jun 2023 18:06:42 +0300
Subject: [PATCH] feat(table): add slot for empty state (#260)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../examples/TableExampleEmptySlot.vue        | 30 +++++++++++++++++
 docs/content/4.data/1.table.md                | 33 +++++++++++++++++++
 src/runtime/components/data/Table.vue         | 14 ++++----
 3 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 docs/components/content/examples/TableExampleEmptySlot.vue

diff --git a/docs/components/content/examples/TableExampleEmptySlot.vue b/docs/components/content/examples/TableExampleEmptySlot.vue
new file mode 100644
index 00000000..d4b4cf29
--- /dev/null
+++ b/docs/components/content/examples/TableExampleEmptySlot.vue
@@ -0,0 +1,30 @@
+<script setup>
+const columns = [{
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}, {
+  key: 'actions'
+}]
+
+const people = []
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">No one here!</span>
+        <UButton label="Add people" />
+      </div>
+    </template>
+  </UTable>
+</template>
diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index 96334f23..374045d8 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -482,6 +482,39 @@ const selected = ref([people[1]])
 ```
 ::
 
+### `empty-state`
+
+Use the `#empty-state` slot to customize the empty state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-empty-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [...]
+const people = [...]
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">No one here!</span>
+        <UButton label="Add people" />
+      </div>
+    </template>
+  </UTable>
+</template>
+```
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 9a197f39..f0b9a292 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -36,12 +36,14 @@
 
         <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>
+            <slot name="empty-state">
+              <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>
+            </slot>
           </td>
         </tr>
       </tbody>