feat: make header titles toggle sort

Author: scriptcoded

packages/ui-react/src/components/table/table-test.tsx

@@ -16,7 +16,7 @@ type Attendee = {
 
 const defaultData: Attendee[] = [
   { firstName: "Alice", lastName: "Smith", role: "scout" },
-  { firstName: "Bob", lastName: "Johnson", role: "leader" },
+  { firstName: "Bob", lastName: "Abraham", role: "leader" },
   { firstName: "Charlie", lastName: "Brown", role: "volunteer" },
 ];
 
@@ -25,13 +25,15 @@ const columnHelper = createColumnHelper<Attendee>();
 const columns = [
   columnHelper.accessor("firstName", {
     header: () => "Förnamn",
+    size: 200,
   }),
   columnHelper.accessor("lastName", {
     header: () => "Efternamn",
-    enableSorting: false,
+    size: 200,
   }),
   columnHelper.accessor("role", {
     header: () => "Roll",
+    enableSorting: false,
     cell: (info) => {
       const role = info.getValue();
       return role.charAt(0).toUpperCase() + role.slice(1);
@@ -58,6 +60,7 @@ function TableTest() {
           {
             // columnSizing: table.getState().columnSizing,
             // columnSizeVars,
+            sort: table.getState().sorting,
           },
           null,
           2,

packages/ui-react/src/components/table/table.tsx

@@ -10,7 +10,7 @@ import {
   EllipsisVerticalIcon,
   ListFilterIcon,
 } from "lucide-react";
-import { memo, useMemo } from "react";
+import { memo, useId, useMemo } from "react";
 import { Fragment } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../button/button.js";
@@ -62,18 +62,13 @@ function Table<TData>(props: Props<TData>) {
               {headerGroup.headers.map((header) => (
                 <th
                   key={header.id}
-                  className="relative p-2 text-left"
+                  className="relative p-2  select-none"
                   style={{
                     width: `calc(var(--header-${header?.id}-size) * 1px)`,
                   }}
                 >
                   <div className="flex justify-between pr-1">
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
+                    <HeaderTitle header={header} />
 
                     <div className="flex gap-0.5">
                       <Button size="tiny-icon" variant="text" color="gray">
@@ -170,6 +165,48 @@ function ResizeHandle({
   );
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: We don't care about the type here
+function HeaderTitle({ header }: { header: Header<any, any> }) {
+  const sortDescriptionId = useId();
+
+  if (header.isPlaceholder) {
+    return null;
+  }
+
+  const rendered = flexRender(
+    header.column.columnDef.header,
+    header.getContext(),
+  );
+
+  if (!header.column.getCanSort()) {
+    return rendered;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className={cn("flex-1 flex items-center gap-1 cursor-pointer")}
+        onClick={header.column.getToggleSortingHandler()}
+        aria-describedby={sortDescriptionId}
+      >
+        {rendered}
+
+        {header.column.getIsSorted() === "asc" && (
+          <ArrowUpIcon className="size-4" />
+        )}
+        {header.column.getIsSorted() === "desc" && (
+          <ArrowDownIcon className="size-4" />
+        )}
+      </button>
+
+      <p id={sortDescriptionId} hidden>
+        Toggle column sorting
+      </p>
+    </>
+  );
+}
+
 // biome-ignore lint/suspicious/noExplicitAny: We don't care about the type here
 function HeaderMenu({ header }: { header: Header<any, any> }) {
   const menuSections = [