table, sortable not working on on formated column

[Miguel-Frazao]

I have something like this:

...
<b-table :items="products_cart" :fields="fields">
    <template slot="actions" scope="data">
    	...
    </template>
</b-table>
....
props: ['products_cart'],
data() {
return {
	fields: [
		{
			key: 'name',
			label: 'Name',
			sortable: true
		},
		{
			key: 'qtd',
			label: 'Quantity',
			sortable: true
		},
		{
			key: 'total_price',
			label: 'Total',
			sortable: true,
			formatter: (value, key, item) => {
		             return item.qtd * item.value;
			}
		},
		{
			key: 'actions',
			label: 'Actions'
		}
        ],
}
},
...

It's working great, except the sortable on the formated column, the total_price. Any ideias why? And/or can I solve this?

[tmorehouse]

The built in sorting sorting is performed on the raw item data, not the formatted data (which formatter is presentational only, as mentioned in the documentation).

You would need to provide a custom sort-compare routine to handle your formatted fields (the sort-compare routine can return null if it doesn't handle sorting for the requested field, which will then fallback to the built in sort-compare routine)

Refer to: https://bootstrap-vue.js.org/docs/components/table#sort-compare-routine

[BigShanJohn]

I am having serious challenge on virtual column sorting.
i used the sort-compare method but when click on virtual columns it brings undefine error

sample of my table is

a	b	c	d	e	f	Fee
Tue Jun 25 2019	add	BC/hmmh0	1.0000	3.0000	3.0030	0.0030
Tue Jun 25 2019	delete	BC/hmmh0	1.0000	3.0000	3.0060	0.0060
Tue Jun 25 2019	add	ab/hmmh0	0.2000	3.0000	0.6006	0.0006
Tue Jun 25 2019	delete	ab/hmmh0	0.2000	3.0000	0.6012	0.0012

c & f columns is the virtual columns and all the columns is formatted too

this is my sortCompare

sortCompare: function(a, b, key) {
           if (typeof a[key] === 'number' && typeof b[key] === 'number') {
                // If both compared fields are native numbers
                return a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : 0;
            } else {
                return  a[key].toString().localeCompare(b[key].toString(), undefined, {
                    numeric: true,
                });
            }
        },

[tmorehouse]

@BigShanJohn you need to add in special handling for those column keys to generate the content taht is to be sorted.

basically, if you see the key === virtual column key then you need to generate the formatted value from the a and b items and then compare the formatted values.