<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>
