feat(table): add slot for empty state (#260)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
nuxt · Jun 9, 2023 · f7a34c8 · f7a34c8 · vercel · Jun 9, 2023
1 parent 4e5e614
commit f7a34c8
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 6 deletions.
diff --git a/docs/components/content/examples/TableExampleEmptySlot.vue 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
@@ -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
@@ -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>