SortCompare not working for BTable
See original GitHub issueWhen 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”,
Issue Analytics
- State:
- Created a year ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
<b-table> virtual column sort not working · Issue #3178
Describe the bug I have created a virtual column and the sorting system is not working well, the sort just invert column data...
Read more >Sort Bootstrap-Vue table (mon, tue, wed instead of ...
I've set up the table, and it pulls the information from the Database just fine. It stores each as an object, and displays...
Read more >DataGridView.SortCompare Event (System.Windows.Forms)
This event occurs only when the DataSource property is not set and the VirtualMode property value is false . This event compares pairs...
Read more >SortCompare event not firing! - Visual Basic Discussion ...
The columns in the DGV that are set to sort automatically work fine so would anyone know why SortCompare is not working? I...
Read more >BootstrapVue — Table Transitions and Sorting
Customizing Sort Icons. We can customize the CSS to change the sort icon. Sort Compare. We can change how the entries are compared...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 takesortDesc
argument and actually use it to be able to sort desc.for Javascript your function should look like this:
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.