feat(docs): add docs for empty slot

nuxt · Jun 7, 2023 · 1184cb1 · 1184cb1
1 parent 06f15fa
commit 1184cb1
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/docs/components/content/examples/TableExampleEmptySlot.vue b/docs/components/content/examples/TableExampleEmptySlot.vue
@@ -0,0 +1,29 @@
+<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 items-center justify-center">
+          <span class="py-10">No Data.</span>
+      </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,37 @@ 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 items-center justify-center">
+        <span class="py-10">No Data.</span>
+      </div>
+    </template>
+  </UTable>
+</template>
+```
+::
+
 ## Props
 
 :component-props