Sorting float values within Element UI Table-Columns

Question

Hi i am creating a table using Element UI and one of the columns has floats as values, however when I make the column sortable it does not sort it correctly.

Here is my column's code

<el-table-column
  label="Total Opportunity"
  prop="blood_utilization_opportunity"
  sortable
>
  <template slot-scope="slotData">
     <span>{{slotData.row.blood_utilization_opportunity}}</span>
  </template>
</el-table-column>

I am looking at the Element UI Table-column Attributes, but I am not sure which one to use to make the column correctly sort through floats...

Answer 1

The type of your data is String, not Number.

Answer 2

There is a famous "sort" bug in javascript with the classic sort function.

It sort the numbers by digit instead of the whole number.

Example :

const arr = [1.1, 2.2, 3.3, 4.1, 5.6, 11.1, 12.0, 21.0].sort()
console.log(arr)

As seen in the documentation

To apply your own sorting rules, use sort-method or sort-by

So the best thing to do is to define your own sort method in the methods and pass it to the component

Method

methods: {
   sortListMethod(a, b){
      return a - b
   }
}

Template

<el-table-column
  label="Total Opportunity"
  prop="blood_utilization_opportunity"*
  sort-method="sortListMethod"
  sortable
> ... </el-table-column>