sorting column is not working in bootstrap 5

user_19624339 0
Viewed 71

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:

1

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

bootstrap-5 vue.js javascript
2 Answers

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.

user_153284300

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

user_196243390
Related