Created
September 25, 2019 12:17
-
-
Save boarnoah/c48fcbd81461676129a0ba5331102ed3 to your computer and use it in GitHub Desktop.
A wrapper component around a Vuetify data table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<v-data-table | |
:items="items" | |
:headers="itemHeaders" | |
:multi-sort="true" | |
:sort-by="sort" | |
:sort-desc="true" | |
> | |
<template v-slot:header.action> | |
<slot /> | |
</template> | |
<template v-slot:item.action="{ item }"> | |
<v-btn icon small @click="$emit('edit', item)"> | |
<v-icon small color="blue darken-2">mdi-pencil</v-icon> | |
</v-btn> | |
<v-btn icon small @click="$emit('delete', item)"> | |
<v-icon small color="blue darken-2">mdi-delete</v-icon> | |
</v-btn> | |
</template> | |
</v-data-table> | |
</template> | |
<script lang="ts"> | |
import Vue from 'vue'; | |
export default Vue.extend({ | |
props: { | |
items: { | |
type: Array, | |
required: true, | |
}, | |
headers: { | |
type: Array, | |
required: true, | |
}, | |
sort: { | |
type: Array, | |
required: false, | |
default: [] | |
} | |
}, | |
computed: { | |
itemHeaders(): any[] { | |
const headers = this.headers.slice(); | |
// Always include custom header "Action" for the buttons to be placed in | |
headers.push({ | |
text: '', | |
value: 'action', | |
sortable: false, | |
}); | |
return headers; | |
}, | |
}, | |
}); | |
</script> | |
<style scoped> | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment