How to implement 3-state sorting?

[nitedani]

Is your feature request related to a problem? Please describe.
Sorting a column should be a 3-state button(asc, desc, no sort) instead of 2-state(asc, desc).
For example:
https://mui.com/x/react-data-grid/
https://www.ag-grid.com/javascript-data-grid/row-sorting/

They both remove sorting when clicked 3 times.

Describe the solution you'd like
Clicking on a column 3 times should remove sorting/restore the default sorting state.

[icflorescu]

Hey @nitedani, thanks for the issue!
I am familiar with how sorting is usually implemented as 3-state in most other table / grid components; however, I don't necessarily agree with the approach, and the current implementation in Mantine DataTable was deliberate.

Here's my train of thoughts: in a real-life application the concept of "unsorted data" doesn't make much sense.
Even if the user can't choose the sort order, tabular data should always be sorted in a natural/intuitive way and never be displayed in an unpredictable, random order. For instance, even in most trivial scenarios, when you're selecting and showing data from a database, you should do so based on a simple sort criteria (such as record creation date). In fact, that's why some RDBMSs do this implicitly.

This, in my opinion, should reflect in either using or not using sorting, from a UX/UI perspective.
If the user can choose the sort columns and order, then we should display the sorting visual hints, but also make clear what is the default sort order.
There should be no such thing as "unsorted data".

That's why I went to using 2-state sorting instead of 3-state.

I'm open to discussing this, of course, but I wanted to clarify that this was a deliberate choice.

[MatthijsMud]

Even if it is not supported as part of the library, it can be implemented relatively easily in user-land by wrapping the setter. When the sort status would change from 'desc' to 'asc' you'd instead set a different (non-existent?) column instead. This logic could be placed in a hook like the following:

const useSortOrder = () => {
  const [order, setOrder] = useState<DataTableSortStatus>({ columnAccessor: '', direction: 'asc'});
  const specialSetOrder = useCallback((state: DataTableSortStatus) => {
    setOrder(a => (a.columnAccessor === state.columnAccessor && a.direction === 'desc' && state.direction === 'asc')
      // Set "columnAccessor" to a value that is unlikely to be used.
      ? { columnAccessor: '', direction: 'asc' } 
      : state
    );
  }, [setOrder]);
  return [order, specialSetOrder] as const;
}

Which would then be used in a way similar to the useState hook. The API could be expanded to include an initial value, or list which column to "default" to.

const [order, setOrder] = useSortOrder();
return <DataTable 
  records={[/*…*/]} 
  columns={[/*…*/]}
  sortStatus={order}
  onSortStatusChange={setOrder}
/>

The option is there if you need it; the usefulness might however be a tad questionable. I suppose it could be useful if the default sorting order is based on a column that is hidden as part of a media query…

It could also be relevant for multi-level sorting, though that would require a bigger rework.