I have utilized bootstrap 5 to create a table, but I am facing an issue when trying to sort the first column as there is no change reflected. Below is how my table is structured:
The structure of the table is as follows:
<table class="table" id="reporttable">
<thead>
<tr>
<th data-sortable="true">Event date & time</th>
<th data-sortable="true">Event level</th>
<th data-sortable="true">Event potential damage</th>
<th data-sortable="true">Report no</th>
<th data-sortable="true">Report type</th>
<th data-sortable="true">Report status</th>
</tr>
</thead>
<tbody>
<td><div v-for="(datetime,index) in reportCreatedAt" :key="index" :style="colourChange(index)">
{{datetime}}</div>
</td>
<td><div v-for="(level,index) in reportStateLevel " :key="index" :style="colourChange(index)" >
{{level}}</div>
</td>
<td><div v-for="(plevel,index) in reportSeverity" :key="index" :style="colourChange(index)">
{{plevel}}</div>
</td>
<td><div v-for="(link,index) in reportId" :key="index" :style="colourChange(index)" >
<router-link :to="{name: 'HTML Report', query:{id: link,cont:index+1}}" >
Report No {{index+1}}
</router-link></div>
</td>
<td><div v-for="(type,index) in reportType" :key="index" :style="colourChange(index)">
{{type}}</div>
</td>
<td><div v-for="(status,index) in reportStatus" :key="index" :style="colourChange(index)">
{{status}}</div>
</td>
</tbody>
</table>
My requirement is to sort the entire table based on the "Event date/time" column.
Appreciate any suggestions or assistance provided. Thank you!