Sort based on raw data, not the formatted content

[a-bali]

I'm trying to display data where one of the columns has storage in bytes. I'm formatting this to be human readable with a function, however now datatables sorts this column by the formatted value, not the raw data. Can you help me how to make the sorting work based on the raw data instead?

Relevant code is as follows:

<script>
  import { DataHandler, Th, ThFilter } from "@vincjo/datatables";
  import { csv2map, formatBytes } from "$lib";
  export let report;

  const handler = new DataHandler(csv2map(report));
  const rows = handler.getRows();
</script>

<table>
  <thead>
    <tr>
      <Th {handler} orderBy="ts">time start</Th>
      <Th {handler} orderBy="val">ip</Th>
      <Th {handler} orderBy="byt">bytes</Th>
    </tr>
    <tr>
      <ThFilter {handler} filterBy="ts">time start</ThFilter>
      <ThFilter {handler} filterBy="val">ip</ThFilter>
    </tr>
  </thead>
  <tbody>
    {#each $rows as row}
      <tr>
        <td>{row.ts}</td>
        <td>{row.val}</td>
        <td>{formatBytes(row.byt)}</td>
      </tr>
    {/each}
  </tbody>
</table>

[a-bali]

Sorry, my bad, the sorting of course was not based on the formatted value, but the column was interpreted as string instead of number. The following solved it:

<Th {handler} orderBy={(row) => parseInt(row.byt)}>bytes</Th>

[vincjo]

Thanks for the update 👍