chore(Table): handle empty-state

Resolves #243
This commit is contained in:
Benjamin Canac
2023-05-31 18:30:49 +02:00
parent 8bdb8c45f7
commit 2966373a86
5 changed files with 78 additions and 3 deletions

View File

@@ -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>

View File

@@ -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

View File

@@ -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
---