Column sorts alphabetically even while returned data is numeric

elstupid

See https://live.datatables.net/roqadedu/1/edit

Can't get my head around the following problem.
I have a table with data loaded from JSON. One of the columns is a numerical field which, if I display it natively, sorts just fine on numerical order.
When I render the column with a progressbar, which is HTML, it doesn't sort numerically anymore, which I would expect as HTML is alphabetical data.

The solution would be to use orthogonal data. So in the render function for the progressbar I made it to return original data when type is sort.

      render: function(data,type,row,meta) {
          console.log(type);

          //return data;
          //if (type=='sort') return DataTable.render.number(null, null,0).display(row.progress_counter || 0);
          if (type=='sort') return data;

          var min = row.progress_counter || 0;
          var max = row.progress_end || 1;

          //if (type=="sort" || type == "filter") return DataTable.render.number(null, null,0).display(min);
          if (type!='display') return min+'/'+max;

          var percentage = Math.min(Math.round(min / max * 100), 100);
          var progressbar = '<sl-progress-bar value="'+percentage+'" label="Progress">'+min+'/'+max+'</sl-progress-bar>';
          return progressbar;
      }

Line 6 should do the trick and return original data when type = sort. It sorts ok-ish, but the numbers here are treated as alphabetical, which is visible in my live example on page 2, where 12 is positioned between 1 and 2

If I uncomment line 4, original data is returned and sorting is ok.
I tried some other solutions too, with rendering the data as number, but that also doesn't work.

What am I missing here?

allan

You need to use:

if (type=='sort' || type =='type') return data;

Otherwise the type detection is performed on the rendered data, which it is seeing as a string, and thus a string data type is assigned to the column.

Allan

p.s. Great test case - thank you for taking the time to make it.

elstupid

Thanks @allan ! This solved my problem.
Is this documented somewhere and I missed it?

Test case has been some work yes, glad to see it did help in finding a swift solution

allan

The types DataTables will "ask" for are documented here.

It is also discussed in the columns.render function documentation.

Allan