mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
docs(ComponentExample): automatically read code (#789)
This commit is contained in:
KeJun
GitHub
@@ -14,57 +14,10 @@ Use the `rows` prop to set the data to display in the table. By default, the tab
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-basic'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-basic{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [{
|
||||
id: 1,
|
||||
name: 'Lindsay Walton',
|
||||
title: 'Front-end Developer',
|
||||
email: 'lindsay.walton@example.com',
|
||||
role: 'Member'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'Courtney Henry',
|
||||
title: 'Designer',
|
||||
email: 'courtney.henry@example.com',
|
||||
role: 'Admin'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'Tom Cook',
|
||||
title: 'Director of Product',
|
||||
email: 'tom.cook@example.com',
|
||||
role: 'Member'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'Whitney Francis',
|
||||
title: 'Copywriter',
|
||||
email: 'whitney.francis@example.com',
|
||||
role: 'Admin'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'Leonard Krasner',
|
||||
title: 'Senior Designer',
|
||||
email: 'leonard.krasner@example.com',
|
||||
role: 'Owner'
|
||||
}, {
|
||||
id: 6,
|
||||
name: 'Floyd Miles',
|
||||
title: 'Principal Designer',
|
||||
email: 'floyd.miles@example.com',
|
||||
role: 'Member'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable :rows="people" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Columns
|
||||
@@ -81,37 +34,10 @@ Use the `columns` prop to configure which columns to display. It's an array of o
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-columns'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-columns{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const columns = [{
|
||||
key: 'id',
|
||||
label: 'ID'
|
||||
}, {
|
||||
key: 'name',
|
||||
label: 'User name'
|
||||
}, {
|
||||
key: 'title',
|
||||
label: 'Job position'
|
||||
}, {
|
||||
key: 'email',
|
||||
label: 'Email'
|
||||
}, {
|
||||
key: 'role'
|
||||
}]
|
||||
|
||||
const people = [...]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable :columns="columns" :rows="people" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can easily use the [SelectMenu](/forms/select-menu) component to change the columns to display.
|
||||
@@ -120,44 +46,10 @@ You can easily use the [SelectMenu](/forms/select-menu) component to change the
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-columns-selectable'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-columns-selectable{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<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 selectedColumns = ref([...columns])
|
||||
|
||||
const people = [...]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<USelectMenu v-model="selectedColumns" :options="columns" multiple placeholder="Columns" />
|
||||
|
||||
<UTable :columns="selectedColumns" :rows="people" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Sortable
|
||||
@@ -168,42 +60,10 @@ You can make the columns sortable by setting the `sortable` property to `true` i
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-columns-sortable'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-columns-sortable{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const columns = [{
|
||||
key: 'id',
|
||||
label: 'ID'
|
||||
}, {
|
||||
key: 'name',
|
||||
label: 'Name',
|
||||
sortable: true
|
||||
}, {
|
||||
key: 'title',
|
||||
label: 'Title',
|
||||
sortable: true
|
||||
}, {
|
||||
key: 'email',
|
||||
label: 'Email',
|
||||
sortable: true,
|
||||
direction: 'desc'
|
||||
}, {
|
||||
key: 'role',
|
||||
label: 'Role'
|
||||
}]
|
||||
|
||||
const people = [...]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable :columns="columns" :rows="people" :sort="{ column: 'title' }" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can specify the default direction of each column through the `direction` property. It can be either `asc` or `desc` and defaults to `asc`.
|
||||
@@ -304,23 +164,10 @@ Use a `v-model` to make the table selectable. The `v-model` will be an array of
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-selectable'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-selectable{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [...]
|
||||
|
||||
const selected = ref([people[1]])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable v-model="selected" :rows="people" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
@@ -335,32 +182,10 @@ You can use this to navigate to a page, open a modal or even to select the row m
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-clickable'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-clickable{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [...]
|
||||
|
||||
function select (row) {
|
||||
const index = selected.value.findIndex((item) => item.id === row.id)
|
||||
if (index === -1) {
|
||||
selected.value.push(row)
|
||||
} else {
|
||||
selected.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const selected = ref([people[1]])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable v-model="selected" :rows="people" @select="select" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Searchable
|
||||
@@ -371,74 +196,24 @@ You can easily use the [Input](/forms/input) component to filter the rows.
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-searchable'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-searchable{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [...]
|
||||
|
||||
const q = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if (!q.value) {
|
||||
return people
|
||||
}
|
||||
|
||||
return people.filter((person) => {
|
||||
return Object.values(person).some((value) => {
|
||||
return String(value).toLowerCase().includes(q.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UInput v-model="q" placeholder="Filter people..." />
|
||||
|
||||
<UTable :rows="filteredRows" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Paginable
|
||||
|
||||
You can easily use the [Pagination](/navigation/pagination) component to paginate the rows.
|
||||
|
||||
::component-example
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-paginable'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-paginable{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [...]
|
||||
|
||||
const page = ref(1)
|
||||
const pageCount = 5
|
||||
|
||||
const rows = computed(() => {
|
||||
return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UTable :rows="rows" />
|
||||
|
||||
<UPagination v-model="page" :page-count="pageCount" :total="people.length" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Loading
|
||||
@@ -530,57 +305,13 @@ You can apply styles to `tr` and `td` elements by passing a `class` to rows.
|
||||
|
||||
Also, you can apply styles to `th` elements by passing a `class` to columns.
|
||||
|
||||
::component-example
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
padding: false
|
||||
component: 'table-example-style'
|
||||
componentProps:
|
||||
class: 'w-full'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-style{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const columns = [{
|
||||
key: 'id',
|
||||
label: '#'
|
||||
}, {
|
||||
key: 'quantity',
|
||||
label: 'Quantity',
|
||||
class: 'italic' // Apply style to column header
|
||||
}, {
|
||||
key: 'name',
|
||||
label: 'Name'
|
||||
}]
|
||||
|
||||
const items = [{
|
||||
id: 1,
|
||||
name: 'Apple',
|
||||
quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' } // Apply style to td
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'Orange',
|
||||
quantity: { value: 0 },
|
||||
class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse' // Apply style to tr
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'Banana',
|
||||
quantity: { value: 30, class: 'bg-green-500/50 dark:bg-green-400/50' }
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'Mango',
|
||||
quantity: { value: 5, class: 'bg-green-500/50 dark:bg-green-400/50' }
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable :rows="items" :columns="columns">
|
||||
<template #quantity-data="{ row }">
|
||||
{{ row.quantity.value }}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Slots
|
||||
@@ -612,57 +343,10 @@ You can for example create an extra column for actions with a [Dropdown](/elemen
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-slots'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-slots{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const columns = [..., {
|
||||
key: 'actions'
|
||||
}]
|
||||
|
||||
const people = [...]
|
||||
|
||||
const items = (row) => [
|
||||
[{
|
||||
label: 'Edit',
|
||||
icon: 'i-heroicons-pencil-square-20-solid',
|
||||
click: () => console.log('Edit', row.id)
|
||||
}, {
|
||||
label: 'Duplicate',
|
||||
icon: 'i-heroicons-document-duplicate-20-solid'
|
||||
}], [{
|
||||
label: 'Archive',
|
||||
icon: 'i-heroicons-archive-box-20-solid'
|
||||
}, {
|
||||
label: 'Move',
|
||||
icon: 'i-heroicons-arrow-right-circle-20-solid'
|
||||
}], [{
|
||||
label: 'Delete',
|
||||
icon: 'i-heroicons-trash-20-solid'
|
||||
}]
|
||||
]
|
||||
|
||||
const selected = ref([people[1]])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable v-model="selected" :rows="people" :columns="columns">
|
||||
<template #name-data="{ row }">
|
||||
<span :class="[selected.find(person => person.id === row.id) && 'text-primary-500 dark:text-primary-400']">{{ row.name }}</span>
|
||||
</template>
|
||||
|
||||
<template #actions-data="{ row }">
|
||||
<UDropdown :items="items(row)">
|
||||
<UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
|
||||
</UDropdown>
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### `loading-state`
|
||||
@@ -673,35 +357,10 @@ Use the `#loading-state` slot to customize the loading state.
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-loading-slot'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:table-example-loading-slot{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const columns = [...]
|
||||
|
||||
const people = []
|
||||
|
||||
const pending = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable :rows="people" :columns="columns" :loading="pending">
|
||||
<template #loading-state>
|
||||
<div class="flex items-center justify-center h-32">
|
||||
<i class="loader --6" />
|
||||
</div>
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* https://codepen.io/jenning/pen/YzNmzaV */
|
||||
</style>
|
||||
```
|
||||
::
|
||||
|
||||
### `empty-state`
|
||||
@@ -712,29 +371,10 @@ Use the `#empty-state` slot to customize the empty state.
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'table-example-empty-slot'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#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
|
||||
|
||||
Reference in New Issue
Block a user