140 lines
6.3 KiB
Vue
140 lines
6.3 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div
|
|
class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8"
|
|
>
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
v-for="(heading, index) in headings"
|
|
:key="index"
|
|
:width="
|
|
heading['widthRatio'] != ''
|
|
? heading['widthRatio'] + '%'
|
|
: '100%'
|
|
"
|
|
:class="
|
|
index == 0
|
|
? 'whitespace-nowrap py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 md:pl-0'
|
|
: 'whitespace-nowrap py-3.5 px-3 text-left text-sm font-semibold text-gray-900'
|
|
"
|
|
scope="col"
|
|
>
|
|
{{ heading['title'] }}
|
|
</th>
|
|
|
|
<th
|
|
v-for="(action, index) in actions"
|
|
:key="index + headings.length"
|
|
:width="actions.length * 1"
|
|
class="relative py-3.5 pl-3 pr-4 sm:pr-6 md:pr-0"
|
|
scope="col"
|
|
>
|
|
<span class="sr-only">{{ action }}</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr v-for="(item, itemIndex) in data" :key="itemIndex">
|
|
<td
|
|
v-for="(heading, index) in headings"
|
|
:key="index"
|
|
:class="
|
|
index == 0
|
|
? 'max-w-0 whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 md:pl-0'
|
|
: 'w-full whitespace-nowrap py-4 px-3 text-sm text-gray-500'
|
|
"
|
|
>
|
|
<div v-if="index == 0" class="">
|
|
<a
|
|
href="javascript:void(0)"
|
|
class="hover:bg-gray-50"
|
|
@click="
|
|
doAction('보기', item[actionKey])
|
|
"
|
|
><div class="truncate">
|
|
{{
|
|
columnFilter
|
|
? columnFilter(
|
|
heading['key'],
|
|
item[heading['key']]
|
|
)
|
|
: item[heading['key']]
|
|
}}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div v-else>
|
|
{{
|
|
columnFilter
|
|
? columnFilter(
|
|
heading['key'],
|
|
item[heading['key']]
|
|
)
|
|
: item[heading['key']]
|
|
}}
|
|
</div>
|
|
</td>
|
|
|
|
<td
|
|
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 md:pr-0"
|
|
>
|
|
<a
|
|
v-for="(action, index) in actions"
|
|
:key="index"
|
|
href="javascript:void(0)"
|
|
:class="index != 0 ? 'ml-3' : ''"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
@click="doAction(action, item[actionKey])"
|
|
>{{ action
|
|
}}<span class="sr-only"
|
|
>, {{ item['serial'] }}</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="data.length == 0">
|
|
<td
|
|
:colspan="headings.length"
|
|
class="whitespace-nowrap py-4 px-3 text-sm text-gray-500"
|
|
>
|
|
{{ 'No Data to display...' }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const people = [
|
|
{
|
|
name: 'Lindsay Walton',
|
|
title: 'Front-end Developer',
|
|
email: 'lindsay.walton@example.com 아주 긴 아지 긴 아주 긴 이런 저런 긴 길 저런 길 갈 골 갈',
|
|
role: 'Member',
|
|
},
|
|
// More people...
|
|
];
|
|
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>
|