Closed
Description
When using a custom sort-compare prop function, the table does not properly sort. If the sort-compare prop is removed, the table sorts. This becomes a problem when custom slots are used for rendering the table, since a sort-compare function is necessary for sorting. Here is a simple example :
<template>
<div>
<b-table
:items="items"
:fields="fields"
v-model:sort-by="sortBy"
v-model:sort-desc="sortDesc"
:sort-compare="sortCompare"
responsive="sm"
></b-table>
<div>
Sorting By: <b>{{ sortBy }}</b
>, Sort Direction:
<b>{{ sortDesc ? "Descending" : "Ascending" }}</b>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sortBy: "age",
sortDesc: false,
fields: [
{ key: "last_name", sortable: true },
{ key: "first_name", sortable: true },
{ key: "age", sortable: true },
{ key: "isActive", sortable: false },
],
items: [
{
isActive: true,
age: 40,
first_name: "Dickerson",
last_name: "Macdonald",
},
{ isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw" },
{ isActive: false, age: 89, first_name: "Geneva", last_name: "Wilson" },
{ isActive: true, age: 38, first_name: "Jami", last_name: "Carney" },
],
};
},
methods: {
sortCompare(aRow, bRow, key) {
const a = aRow[key];
const b = bRow[key];
return a < b ? -1 : a > b ? 1 : 0;
},
},
};
</script>
Clicking on a header does an initial sort, but with subsequent clicks nothing gets sorted. I applied this same example to BTable for Vue 2 and it works.
"bootstrap": "^5.2.0",
"bootstrap-vue-3": "^0.3.11",