feat: add unsort state on 3rd column header click

app/examples/sorting/SortingExample.tsx

@@ -6,13 +6,18 @@ import { useEffect, useState } from 'react';
 import { type Company, companies } from '~/data';
 
 export default function SortingExample() {
+  // third sorting click will cause the column to go back to unsorted state by making columnAccessor = ""
   const [sortStatus, setSortStatus] = useState<DataTableSortStatus<Company>>({
     columnAccessor: 'name',
     direction: 'asc',
   });
   const [records, setRecords] = useState(sortBy(companies, 'name'));
 
   useEffect(() => {
+    if (!sortStatus.columnAccessor) {
+      setRecords(companies);
+      return;
+    }
     const data = sortBy(companies, sortStatus.columnAccessor) as Company[];
     setRecords(sortStatus.direction === 'desc' ? data.reverse() : data);
   }, [sortStatus]);

app/examples/sorting/page.tsx

@@ -40,6 +40,11 @@ export default async function SortingExamplePage() {
           sortable column header is clicked.
         </li>
       </UnorderedList>
+      <Txt idea>
+        Clicking a sorted column header a third time clears its sorting: <Code>onSortStatusChange</Code> is called with{' '}
+        <Code>columnAccessor</Code> set to an empty string, while <Code>direction</Code> resets to <Code>'asc'</Code>.
+        Handle this case in your own sorting logic, as shown in the example below.
+      </Txt>
       <CodeBlock code={code['SortingExample.tsx']} />
       <Txt idea>
         If you enable sorting, you might want to consider{' '}

package/DataTableHeaderCell.tsx

@@ -88,10 +88,10 @@ export function DataTableHeaderCell<T>({
     sortable && onSortStatusChange
       ? (e?: React.BaseSyntheticEvent) => {
           if (e?.defaultPrevented) return;
-
+          const hasCycledBackToAsc = sortStatus?.direction === 'desc';
           onSortStatusChange({
             sortKey,
-            columnAccessor: accessor,
+            columnAccessor: sortStatus?.columnAccessor === accessor && hasCycledBackToAsc ? '' : accessor,
             direction:
               sortStatus?.columnAccessor === accessor
                 ? sortStatus.direction === 'asc'