How to sort by rendered data

Tags: #<Tag:0x00007f8b18c28710>
#1

Hi,

I have a number of different custom renderers.
How can i sort based on the data rendered in the column?
When i click sort, none of the columns data changes but data in other rows does move.

Here is the easiest example to look at as some of the other ones are a lot more complex:

 function renderPrice(instance, td, row, col, prop, value, cellProperties) {
         let source = instance.getSourceDataAtRow(row);
         let price = (source.customer_pricing && source.customer_pricing.amount) ? source.customer_pricing.amount : '0.00';
 
         td.className = cellProperties.className + ' price';
         td.innerHTML = parseFloat(price).toFixed(2);
 
         return td;
     }

Thanks

#2

The reason for me getting the data from source is that sometimes the amount does not exist and in those cases the page breaks with a javascript error:

handsontable.full.min.js:40 Uncaught TypeError: Cannot read property 'amount' of null

    columns: [
.....
             {
                        data: 'customer_pricing.amount',
                        renderer: renderPrice,
                        type: 'numeric',
                        readOnly: true,
                        className: 'price',
                    }
.....
    ]


function renderPrice(instance, td, row, col, prop, value, cellProperties) {
        let price = value || '0.00';

        td.className = cellProperties.className + ' price';
        td.innerHTML = parseFloat(price).toFixed(2);

        return td;
    }
#3

Hi @reasy

I recommend checking the Default compare functions (sorting different kinds of data) from this tutorial
https://handsontable.com/docs/8.0.0/demo-sorting.html It allows you to provide your own way of data comparison.

#4

Thanks @aleksandra_budnik

We already have that set.
type: ‘numeric’

We cannot set:
data: ‘customer_pricing.amount’,

As some entries do not have an amount which causes the page to break with a js error, so this line is commented out.
If the line is commented out, the data will not sort.
If the line is not commented out, and all of the data does have an amount, it does work.

If there any way of sorting by the data that has been rendered in the column instead of sorting by the data source?

#5

data is always sorted by the value in the cell (not the value rendered)

#6