86 lines
3.1 KiB
Vue
86 lines
3.1 KiB
Vue
<template>
|
|
<div class="">
|
|
<div class="card border overflow-x-auto">
|
|
<table class="table w-full">
|
|
<!-- head -->
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
v-for="(heading, index) in headings"
|
|
:key="index"
|
|
:width="
|
|
heading['widthRatio'] != ''
|
|
? heading['widthRatio'] + '%'
|
|
: '100%'
|
|
"
|
|
scope="col"
|
|
>
|
|
{{ heading['title'] }}
|
|
</th>
|
|
|
|
<th
|
|
v-for="(action, index) in actions"
|
|
:key="index + headings.length"
|
|
:width="actions.length * 1"
|
|
scope="col"
|
|
>
|
|
<span class="sr-only">{{ action }}</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, itemIndex) in data" :key="itemIndex">
|
|
<td v-for="(heading, index) in headings" :key="index">
|
|
{{
|
|
columnFilter
|
|
? columnFilter(
|
|
heading['key'],
|
|
item[heading['key']]
|
|
)
|
|
: item[heading['key']]
|
|
}}
|
|
</td>
|
|
|
|
<td>
|
|
<button
|
|
v-for="(action, index) in actions"
|
|
:key="index"
|
|
class="btn btn-sm btn-primary"
|
|
:class="index != 0 ? 'ml-1' : ''"
|
|
@click="doAction(action, item[actionKey])"
|
|
>
|
|
{{ action
|
|
}}<span class="sr-only"
|
|
>, {{ item['serial'] }}</span
|
|
>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="data.length == 0">
|
|
<td>{{ 'No Data to display...' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
headings: { type: Array<object>, required: true },
|
|
actions: { type: Array<string>, default: [] },
|
|
data: { type: Array<object>, required: true },
|
|
actionKey: { type: String, default: 'serial' },
|
|
columnFilter: {
|
|
type: Function,
|
|
default: (key: string, val: string) => val,
|
|
},
|
|
doAction: {
|
|
type: Function,
|
|
default: (key: string) => {
|
|
return key;
|
|
},
|
|
},
|
|
});
|
|
</script>
|