SortCompare not working for BTable

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”,

[devhus]

Hello There, It seems like the issue is in the given example, as mentioned in https://github.com/cdmoro/bootstrap-vue-3/pull/695 your sort-compare function should take sortDesc argument and actually use it to be able to sort desc.

for Javascript your function should look like this:

sortCompare(aRow, bRow, key, sortDesc) {
      const a = aRow[key]
      const b = bRow[key]
      return a < b ? (sortDesc ? -1 : 1) : a > b ? (sortDesc ? 1 : -1) : 0;
    },

[jagjeet-ccl]

I had to use sort-compare to sort for all the columns or none of the columns. Returning null or false did not seem to fallback to the default sorting function.