mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-25 01:10:40 +01:00
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user