mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(table): add slot for empty state (#260)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
committed by
GitHub
parent
4e5e614eb4
commit
f7a34c8fee
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user