Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <template>
<table class="w-100">
<thead>
<tr class="header-container">
<th v-for="(header, index) in tableSpecs['headers']" :key="index">{{header}}</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableSpecs['rows']" :key="index">
<td v-for="(field, index) in Object.values(row)" :key="index">{{field}}</td>
<td class="d-flex gap-2 justify-content-center">
<modal-view :modalSpecs="{fields: row, type: tableSpecs['type']}"></modal-view>
<modal-edit :modalSpecs="{fields: row, type: tableSpecs['type']}"></modal-edit>
<modal-delete :modalSpecs="{fields: row, type: tableSpecs['type']}"></modal-delete>
</td>
</tr>
</tbody>
</table>
</template>
<script>
import modalView from './modals/view-modal.vue';
import modalEdit from './modals/edit-modal.vue';
import modalDelete from './modals/modal-delete.vue';
export default {
props: ['tableSpecs'],
components: {modalView, modalEdit, modalDelete}
}
</script>
<style lang="scss" scoped>
table {
background-color: white;
border-radius: 10px;
border-collapse: separate;
padding: 0 2%;
border-spacing: 0;
}
td {
border-bottom: 1px solid #a2a2a2;
text-align: center;
padding: .75rem;
}
tr:last-child td {
border: 0;
}
th {
//font-size: 1.3rem;
text-align: center;
padding: .75rem;
border-bottom: 2px solid #a2a2a2;
}
td {
color: rgb(0, 21, 44);
//font-size: 1.1rem;
}
.svg-container {
width: 1.1rem;
}
//svg {
// max-width: 100%;
// height: 100%;
//}
@include media-breakpoint-down(lg) {
th {
font-size: 1.1rem;
}
td {
font-size: .8rem;
}
table {
padding: 0 1rem;
}
td {
padding: .5rem;
}
}
</style>
|