[Table] use cursor: pointer for clickable headers (#674)

* fix(Table): cursor: pointer for clickable headers

* docs(Table): add story with sortable table

Author: ariser

src/components/Table/Table.stories.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { Meta, StoryObj } from "@storybook/react-vite";
 
@@ -94,3 +94,44 @@ export const Selectable: StoryObj<typeof Table> = {
     );
   },
 };
+
+export const Sortable: StoryObj<typeof Table> = {
+  args: {
+    headers,
+    rows,
+  },
+  render: ({ rows, headers, ...props }) => {
+    const [sort, setSort] = useState<[number, "asc" | "desc"]>([0, "asc"]);
+
+    const sortedHeaders = useMemo(
+      () =>
+        headers.map((header, headerIndex) => ({
+          ...header,
+          isSortable: true,
+          sortDir: sort[0] === headerIndex ? sort[1] : undefined,
+        })),
+      [headers, sort]
+    );
+
+    const sortedRows = useMemo(
+      () =>
+        [...rows].sort((a, b) => {
+          const [cellIdx, sortDir] = sort;
+          const cellA = a.items[cellIdx]?.label?.toString() || "";
+          const cellB = b.items[cellIdx]?.label?.toString() || "";
+          const result = cellA.localeCompare(cellB, "en", { numeric: true });
+          return sortDir === "asc" ? result : -result;
+        }),
+      [rows, sort]
+    );
+
+    return (
+      <Table
+        {...props}
+        headers={sortedHeaders}
+        rows={sortedRows}
+        onSort={(dir, _, idx) => void setSort([idx, dir])}
+      />
+    );
+  },
+};

src/components/Table/Table.tsx

@@ -34,11 +34,13 @@ const StyledHeader = styled.th<{ $size: TableSize }>`
   text-align: left;
 `;
 
-const HeaderContentWrapper = styled.div`
+const HeaderContentWrapper = styled.div<{ $interactive: boolean }>`
   display: flex;
   align-items: center;
   justify-content: start;
   gap: inherit;
+
+  ${({ $interactive }) => $interactive && "cursor: pointer;"}
 `;
 
 const SortIcon = styled(Icon)<{ $sortDir: SortDir }>`
@@ -57,6 +59,9 @@ const TableHeader = ({
   ...delegated
 }: Omit<TableHeaderType, "width"> & { onSort?: () => void; size: TableSize }) => {
   const isSorted = typeof sortDir === "string";
+  const isInteractive = Boolean(
+    typeof onClick === "function" || (isSortable && typeof onSort === "function")
+  );
   const onHeaderClick = (e: MouseEvent<HTMLTableCellElement>): void => {
     if (typeof onClick === "function") {
       onClick(e);
@@ -70,7 +75,10 @@ const TableHeader = ({
       $size={size}
       {...delegated}
     >
-      <HeaderContentWrapper onClick={onHeaderClick}>
+      <HeaderContentWrapper
+        onClick={onHeaderClick}
+        $interactive={isInteractive}
+      >
         {isSorted && isSortable && sortPosition == "start" && (
           <SortIcon
             $sortDir={sortDir}