TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://tanstack.com/table
MIT License
25.03k stars 3.07k forks source link

Custom sortingFn not being run when row key is undefined #5653

Open vincerubinetti opened 2 months ago

vincerubinetti commented 2 months ago

TanStack Table version

8.19.2

Framework/Library version

Vue 3.4.31

Describe the bug and the steps to reproduce it

I was debating whether to even post this issue or not, since it's such a narrow edge case and is mostly inconsequential. But here it is.

My custom sortingFn is was not being run when changing the sort direction of certain columns. I was adding things to the sort func to handle the order of nullish values, and it wasn't having any effect because the function wasn't even being run. Luckily this isn't super important, as the sortUndefined met my needs in this case, but I still think this is a bug.

I can't nail down the exact conditions that cause this, but I think this happens when:

See the reproducible example. Look at the console logs while clicking on the different columns. The first static column triggers the sorting func. The other two columns do not, unless you add a third row or define the key for the other row.

Reproducible example code for posterity ```vue ``` ```vue ```

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/devbox/tanstack-table-sorting-bug-782h9d

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms & Code of Conduct


sortUndefined met my needs here, but I was also able to force the sortingFn to run by making sure every row being returned from get data() { return props.rows; } has every col key defined:

const _rows = computed(() => {
  /** row with all possible object keys at least defined */
  const blankRow = Object.fromEntries(props.cols.map((col) => [col.key, ""]));

  return props.rows.map((row) => ({
    /** start with blank row */
    ...cloneDeep(blankRow), // lodash cloneDeep
    /** add actual row data */
    ...row,
  }));
});