first

inspond-nuxt-safekiso/base/components/BaseTable1.vue

@@ -0,0 +1,85 @@
+<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>