0
175
Viewssorting column is not working in bootstrap 5
I have created a table with bootstrap 5 but once I try to sort the first column I didn't get any change. this is how the table looks like:
The table is defined like so:
<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>
What I need is to sort all the table respect to the first column "Event date&time".
Thank you very much for any suggestion
2 answers
Answer question0
You cannot sort a table with Bootstrap 5 - Tables. Maybe you use something else than this Bootstrap ? Otherwise you can see Datatables for sorting tables.
0
In the end I found a way to sort the data in the table as I wanted.
Basically I had to gather every row of the column in an array of dictionary so that:
array=[{id:xx,type:xx,status:xx,level:xx...} {id:xx,status:xx,...}]
Then I sorted the array using the id for instance with:
array.sort((a, b) => {
if (a.id < b.id) {
return -1;
}
if (a.id > b.id) {
return 1;
}
return 0;
})
In this way I had the correctly formatted table sorted by Id in this example