feat(Table): add v-model:sort prop (#803)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Italo
2023-10-14 14:18:49 -03:00
committed by GitHub
parent 8bfd3591a6
commit 9f4d88e0aa
4 changed files with 115 additions and 4 deletions

View File

@@ -0,0 +1,69 @@
<script setup>
const sort = ref({
column: 'name',
direction: 'desc'
})
const columns = [{
key: 'id',
label: 'ID'
}, {
key: 'name',
label: 'Name',
sortable: true
}, {
key: 'title',
label: 'Title',
sortable: true
}, {
key: 'email',
label: 'Email'
}, {
key: 'role',
label: 'Role',
sortable: true,
direction: 'desc'
}]
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 v-model:sort="sort" :columns="columns" :rows="people" />
</template>