In my current project, I am utilizing Vue.js. The majority of the tables I am working with use Buefy's built-in sorting feature, which I find to be the simplest solution. You can find more details in the documentation here:
<template>
<section>
<b-table default-sort="user.first_name">
<template slot-scope="props">
<b-table-column field="id" label="ID" sortable>
</b-table-column>
<b-table-column field="user.first_name" label="First Name"> </b-table-column>
<b-table-column field="user.last_name" label="Last Name">
</b-table-column>
<b-table-column field="date" label="Date">
</b-table-column>
</template>
</b-table>
</section>
</template>
However, there is one component in the project that uses a traditional HTML table structure. The data rows are displayed within a Slot component as shown below:
<template>
<table class="classname">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<slot></slot>
</tbody>
</table>
</template>
The parent component of the above example looks something like this (examplecomponent being the component where the HTML table is generated):
<div class="grid">
<examplecomponent :class="exampleclass">
<template v-for="(row, index) in filteredList">
<othercomponent></othercomponent>
<othercomponenttwo></othercomponenttwo>
</template>
</examplecomponent>
</div>
Given this setup, my question is how to best handle sorting the data. I attempted to switch the HTML table to use Buefy's b-table but faced challenges. I suspect that adjustments need to be made in the parent component. While the HTML table file has no imports, the parent component has all necessary information accessible.
As a relatively new programmer, I would greatly appreciate a detailed explanation in simple terms, as if explaining to a young child.