Is there a way to ensure proper alignment of headers and column bodies in my Vue.js DataGrid component when utilizing the vuedraggable package for column reordering?
Below is the code snippet for my DataGrid.vue component:
<template>
<div class="table-responsive">
<table class="table table-striped table-hover" v-if="selectedColumns.length > 0">
<thead>
<draggable :list="selectedColumns" group="columns" @end="onEnd">
<th v-for="(column, index) in selectedColumns" :key="index"<>{{ column }}</th>
</draggable>
</thead>
<tbody>
<draggable v-model="mergedData" group="rows">
<tr v-for="(data, index) in mergedData" :key="index">
<td v-for="(column, index) in selectedColumns" :key="index">
{{ data[column.toLowerCase().replace(' ', '_')] !== undefined ? data[column.toLowerCase().replace(' ', '_')] : 'N/A' }}
</td>
</tr>
</draggable>
</tbody>
</table>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
name: 'DataGrid',
components: {
draggable,
},
props: {
selectedColumns: {
type: Array,
required: true,
},
mergedData: {
type: Array,
required: true,
},
},
methods: {
onEnd(event) {
const oldIndex = event.oldIndex;
const newIndex = event.newIndex;
this.selectedColumns.splice(newIndex, 0, this.selectedColumns.splice(oldIndex, 1)[0]);
},
},
};
</script>
<style scoped>
/* Include any customized styles here */
</style>
I have attempted wrapping the table element with a div having the table-responsive class, but the alignment of headers and column bodies remains incorrect. How can I rectify the alignment issue while preserving responsiveness and drag functionality?
Here is how my current table appears: