90 lines
1.9 KiB
Vue
90 lines
1.9 KiB
Vue
<template>
|
|
<BTableSimple caption-top>
|
|
<BThead>
|
|
<BTr>
|
|
<BTh
|
|
v-for="header in headers"
|
|
:key="header.key"
|
|
:width="header.width"
|
|
class="cursor"
|
|
:class="header.thClasses"
|
|
valign="top"
|
|
@click="doSort(header.orderKey ?? header.key)"
|
|
>
|
|
<SortButton
|
|
:current-order="order"
|
|
:current-sort="sort"
|
|
:order="header.orderKey ?? header.key"
|
|
:label="header.label ?? header.renderLabel(rows)"
|
|
/>
|
|
</BTh>
|
|
</BTr>
|
|
</BThead>
|
|
<BTbody>
|
|
<BTr
|
|
v-for="(row, key) in rows"
|
|
:key="key"
|
|
>
|
|
<BTd
|
|
v-for="header in headers"
|
|
:key="header.key"
|
|
class="cursor"
|
|
:class="header.tdClasses"
|
|
@click="rowClick(row)"
|
|
>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<span v-if="header.key">
|
|
<span
|
|
v-if="header.render"
|
|
v-html="header.render(row)"
|
|
></span>
|
|
<span
|
|
v-else
|
|
v-text="row[header.key]"
|
|
></span>
|
|
</span>
|
|
<span
|
|
v-else
|
|
v-html="header.render(row)"
|
|
></span>
|
|
</BTd>
|
|
</BTr>
|
|
</BTbody>
|
|
</BTableSimple>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { BTableSimple, BThead, BTbody, BTr, BTh, BTd } from 'bootstrap-vue-next'
|
|
import SortButton from '../SortButton.vue'
|
|
|
|
defineProps({
|
|
headers: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
rows: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
order: {
|
|
type: [String, null],
|
|
required: false,
|
|
default: null,
|
|
},
|
|
sort: {
|
|
type: [String, null],
|
|
required: false,
|
|
default: null,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['sort', 'rowClick'])
|
|
|
|
const doSort = (key) => {
|
|
emit('sort', key)
|
|
}
|
|
|
|
const rowClick = (row) => {
|
|
emit('rowClick', row)
|
|
}
|
|
</script>
|