Sorting direction not updating properly with manual sorting and same values on current page #5147

Activity

1. jenmak-tangelo

   changed the title [-]Sorting direction not updating properly with manual sorting and same values[/-] [+]Sorting direction not updating properly with manual sorting and same values on current page[/+] on Oct 30, 2023
2. zsilbi commented on Nov 13, 2023

   

   zsilbi

   on Nov 13, 2023

   Last edited by zsilbi

   More actions

   I have the same problem.

   1. I call column.toggleSorting()
   2. column.getAutoSortDir() returns asc because the first value is a string, so the column will be sorted asc initially.

   table/packages/table-core/src/features/Sorting.ts

   Lines 332 to 342 in a1e9732

   	column.getAutoSortDir = () => {
   	const firstRow = table.getFilteredRowModel().flatRows[0]
   	const value = firstRow?.getValue(column.id)
   	if (typeof value === 'string') {
   	return 'asc'
   	}
   	return 'desc'
   	}

   3. I fetch the sorted data to the table from the API and the first value of the column is now null instead of a string.
   4. I call column.toggleSorting() again
   5. column.getAutoSortDir() now returns desc instead of asc because the first value is null
   6. That's why column.getNextSortingOrder() decides to turn off sorting for the column by returning false because it thinks it had already been ordered desc previously

   My current workaround is to set the sortDescFirst: true manually for the column (or globally for the table), so the getAutoSortDir() won't be used.

   table/packages/table-core/src/features/Sorting.ts

   Lines 68 to 73 in a1e9732

   	/**
   	* Set to `true` for sorting toggles on this column to start in the descending direction.
   	* @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#sortdescfirst)
   	* @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
   	*/
   	sortDescFirst?: boolean

   👍React with 👍6Reacted by Mohamed Abdelnaeem, Abhishek Kasireddy, Dave Bauman, Amir Hoseinian, Mathieu and day280130
3. tomdubraw commented on Dec 11, 2023

   

   tomdubraw

   on Dec 11, 2023

   Last edited by tomdubraw

   More actions

   Same issue, thanks @zsilbi, we use your trick as a temp workaround.

   Any updates to have a proper way to have ASC first without breaking the lib ?
4. Oberin98 commented on Jan 15, 2024

   

   Oberin98

   on Jan 15, 2024

   More actions

   I also encountered this problem when implementing manual sorting. After some time of debugging I found the problem. This is caused by comparing the value of a column with a string, which leads to a change in the default auto sort direction value, when value was a string during the first sort and null or undefined during the second.

   

   Maybe you should define a default auto sort direction based only on sortDescFirst?
5. Oberin98 commented on Jan 15, 2024

   

   Oberin98

   on Jan 15, 2024

   Last edited by Oberin98

   More actions

   May be this example will be helpful to someone
   

   😕React with 😕1Reacted by Irmantas Zenkus

   👀React with 👀1Reacted by Ivan
6. eliranma commented on Mar 17, 2024

   

   eliranma

   on Mar 17, 2024

   Last edited by eliranma

   More actions

   @Oberin98
   I tried use your snippet above, but it doesn't remove my sorting, the "asc->desc" flow goes right but i can remove the sorting.

   const handleSorting = () => { const isSortable = column.getCanSort(); if (isSortable) { const ctx = header.getContext(); const isSorted = header.column.getIsSorted(); const isSortDescFirst = !!header.column.columnDef.sortDescFirst || !!ctx.table.options.sortDescFirst; const isEnableSortingRemoval = !!ctx.table.options.enableSortingRemoval; if (!isSorted) { header.column.toggleSorting(isSortDescFirst); } if (isSorted === "asc") { if (isSortDescFirst && isEnableSortingRemoval) { header.column.clearSorting(); } else { header.column.toggleSorting(true); } } if (isSorted === "desc") { if (!isSortDescFirst && isEnableSortingRemoval) { header.column.clearSorting(); } else { header.column.toggleSorting(false); } } } };

   And my usage:

   <div {...{ className: header.column.getCanSort() ? "cursor-pointer select-none " : "bg-slate-50", onClick: handleSorting, }} > {flexRender(header.column.columnDef.header, header.getContext())} {{ asc: "🔼", desc: "🔽", false: "", }[header.column.getIsSorted()] ?? null} </div>
7. Oberin98 commented on Mar 18, 2024

   

   Oberin98

   on Mar 18, 2024

   Last edited by Oberin98

   More actions

   @eliranma did you set enableSortingRemoval option to true?
8. eliranma commented on Mar 20, 2024

   

   eliranma

   on Mar 20, 2024

   Last edited by eliranma

   More actions

   @Oberin98
   Yap,
   // Sorting
   enableSorting: true,
   onSortingChange: handleSorting,
   enableSortingRemoval: true,
   enableMultiRemove: true,
   sortDescFirst: true,
   manualSorting: true,
9. eliranma commented on Mar 26, 2024

   

   eliranma

   on Mar 26, 2024

   More actions

   Hi Guys, any suggestion? maybe downgrade to previous version?
10. arkdev9 commented on Mar 8, 2025

    

    arkdev9

    on Mar 8, 2025

    More actions

    Is there any plan to fix this? The workaround I am using is

    ...
    manualSorting: true,
    sortDescFirst: true,
    ...
    
11. sneakylenny commented on Mar 13, 2025

    

    sneakylenny

    on Mar 13, 2025

    More actions

    @eliranma @arkdev9

    We decided to overwrite the function responsible for this as we prefer it to be always "asc" in any case:

    header: ({ column }) => {
      column.getAutoSortDir = () => 'asc'
    }

    But you could write your own logic.
12. KevinVandy

    added a commit that references this issue on Aug 3, 2026

    fix(table-core): correct expanded/paginated state contents and sortin…

    ...

    This issue will close once commit c35d70d is merged into the 'main' branch.

    c35d70d
13. KevinVandy

    closed this as completedin aad2c29on Aug 3, 2026
14. pull

    added a commit that references this issue on Aug 3, 2026

    fix(table-core): correct expanded/paginated state contents and sortin…

    ...

    This issue will close once commit aad2c29 is merged into the 'main' branch.

    aad2c29