feat: add sorting menu to table

Author: scriptcoded

packages/ui-react/src/components/menu/menu.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, Preview } from "@storybook/react";
+import { InfoIcon } from "lucide-react";
 import { Button } from "../button/button.js";
 import * as Menu from "./menu.js";
 
@@ -46,7 +47,9 @@ export const Nested = {
           <Menu.Separator />
 
           <Menu.SubmenuRoot>
-            <Menu.SubmenuTrigger render={<Menu.Item>Submenu</Menu.Item>} />
+            <Menu.SubmenuTrigger
+              render={<Menu.Item icon={<InfoIcon />}>Submenu</Menu.Item>}
+            />
             <Menu.Positioner>
               <Menu.Item>Option 1</Menu.Item>
               <Menu.Item>Option 2</Menu.Item>

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

@@ -129,37 +129,52 @@ const GroupLabel = ({
   />
 );
 
-const Item = ({ className, children, ...props }: MenuPrimitive.Item.Props) => (
-  <MenuPrimitive.Item
-    className={cn(
-      `
-        relative flex h-8 select-none items-center justify-between rounded-sm
-        px-4 leading-none
-
-        after:absolute
-        after:inset-y-0
-        after:inset-x-1.5
-        after:z-[-1]
-        data-[highlighted]:after:bg-blue-100
-        data-[highlighted]:after:rounded-sm
-
-        data-[highlighted]:text-blue
-        data-[highlighted]:outline-none
+const Item = ({
+  className,
+  children,
+  ...props
+}: MenuPrimitive.Item.Props & {
+  icon?: React.ReactNode;
+}) => {
+  const { icon, ...otherProps } = props;
 
-        data-[disabled]:pointer-events-none
-        data-[disabled]:opacity-50
+  return (
+    <MenuPrimitive.Item
+      className={cn(
+        `
+          relative h-8 select-none items-center rounded-sm
+          px-4 leading-none
+  
+          grid grid-cols-[1rem_auto_1rem] gap-2
+  
+          after:absolute
+          after:inset-y-0
+          after:inset-x-1.5
+          after:z-[-1]
+          data-[highlighted]:after:bg-blue-100
+          data-[highlighted]:after:rounded-sm
+  
+          data-[highlighted]:text-blue
+          data-[highlighted]:outline-none
+  
+          data-[disabled]:pointer-events-none
+          data-[disabled]:opacity-50
+  
+          group/item
+        `,
+        className,
+      )}
+      {...otherProps}
+    >
+      {icon && <span className="flex items-center justify-center">{icon}</span>}
 
-        group/item
-      `,
-      className,
-    )}
-    {...props}
-  >
-    {children}
+      {/* This 2px padding is there to fix some issues with the font not being correctly centered. */}
+      <span className="col-start-2 pb-[2px]">{children}</span>
 
-    <ChevronRightIcon className="size-4 hidden group-aria-[haspopup]/item:block" />
-  </MenuPrimitive.Item>
-);
+      <ChevronRightIcon className="size-4 hidden group-aria-[haspopup]/item:block" />
+    </MenuPrimitive.Item>
+  );
+};
 
 const Separator = ({ className, ...props }: MenuPrimitive.Separator.Props) => (
   <MenuPrimitive.Separator

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

@@ -0,0 +1,71 @@
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import { Table } from "./table.js";
+
+type Attendee = {
+  firstName: string;
+  lastName: string;
+  role: "scout" | "leader" | "volunteer";
+};
+
+const defaultData: Attendee[] = [
+  { firstName: "Alice", lastName: "Smith", role: "scout" },
+  { firstName: "Bob", lastName: "Johnson", role: "leader" },
+  { firstName: "Charlie", lastName: "Brown", role: "volunteer" },
+];
+
+const columnHelper = createColumnHelper<Attendee>();
+
+const columns = [
+  columnHelper.accessor("firstName", {
+    header: () => "Förnamn",
+  }),
+  columnHelper.accessor("lastName", {
+    header: () => "Efternamn",
+    enableSorting: false,
+  }),
+  columnHelper.accessor("role", {
+    header: () => "Roll",
+    cell: (info) => {
+      const role = info.getValue();
+      return role.charAt(0).toUpperCase() + role.slice(1);
+    },
+  }),
+];
+
+function TableTest() {
+  const [data, _setData] = useState(() => [...defaultData]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    columnResizeMode: "onChange",
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <>
+      <pre className="mb-4 min-h-48">
+        {JSON.stringify(
+          {
+            // columnSizing: table.getState().columnSizing,
+            // columnSizeVars,
+          },
+          null,
+          2,
+        )}
+      </pre>
+      <Table table={table} className="w-full" />
+    </>
+  );
+}
+
+export { TableTest };

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

@@ -1,9 +1,12 @@
 import type { Meta, Preview } from "@storybook/react";
-import { TableTest } from "./table.js";
+import { Table } from "./table.js";
+import { TableTest } from "./table-test.js";
 
 export default {
   title: "Components/Table",
-  component: TableTest,
+  component: Table,
 } satisfies Meta;
 
-export const Simple = {} satisfies Preview;
+export const Simple = {
+  render: () => <TableTest />,
+} satisfies Preview;