feat: add column header buttons

Author: scriptcoded

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

@@ -14,14 +14,23 @@ const buttonVariants = cva(
   {
     variants: {
       color: {
+        gray: `
+          [--btn-text:var(--color-gray-800)]
+          [--btn-border:var(--color-gray-400)]
+          [--btn-bg:var(--color-gray-200)]
+          [--btn-bg-hover:var(--color-gray-4300)]
+          [--btn-bg-active:var(--color-gray-400)]
+          
+          [--btn-bg-text-hover:var(--color-gray-200)]
+          [--btn-bg-text-active:var(--color-gray-300)]
+        `,
         blue: `
           [--btn-text:var(--color-white)]
           [--btn-border:var(--color-blue)]
           [--btn-bg:var(--color-blue)]
           [--btn-bg-hover:var(--color-blue-hover)]
           [--btn-bg-active:var(--color-blue-active)]
           
-          [--btn-text-border:var(--color-blue-600)]
           [--btn-bg-text-hover:var(--color-bluegray-100)]
           [--btn-bg-text-active:var(--color-bluegray-200)]
         `,
@@ -32,7 +41,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-orange-hover)]
           [--btn-bg-active:var(--color-orange-active)]
           
-          [--btn-text-border:var(--color-orange)]
           [--btn-bg-text-hover:var(--color-orange-100)]
           [--btn-bg-text-active:var(--color-orange-200)]
         `,
@@ -43,7 +51,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-red-hover)]
           [--btn-bg-active:var(--color-red-active)]
           
-          [--btn-text-border:var(--color-red)]
           [--btn-bg-text-hover:var(--color-red-100)]
           [--btn-bg-text-active:var(--color-red-200)]
         `,
@@ -54,7 +61,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-trackergreen-hover)]
           [--btn-bg-active:var(--color-trackergreen-active)]
           
-          [--btn-text-border:var(--color-trackergreen)]
           [--btn-bg-text-hover:var(--color-trackergreen-100)]
           [--btn-bg-text-active:var(--color-trackergreen-200)]
         `,
@@ -65,7 +71,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-discovererblue-hover)]
           [--btn-bg-active:var(--color-discovererblue-active)]
           
-          [--btn-text-border:var(--color-discovererblue)]
           [--btn-bg-text-hover:var(--color-discovererblue-100)]
           [--btn-bg-text-active:var(--color-discovererblue-200)]
         `,
@@ -76,7 +81,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-adventurerorange-hover)]
           [--btn-bg-active:var(--color-adventurerorange-active)]
           
-          [--btn-text-border:var(--color-adventurerorange)]
           [--btn-bg-text-hover:var(--color-adventurerorange-100)]
           [--btn-bg-text-active:var(--color-adventurerorange-200)]
         `,
@@ -87,7 +91,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-challengerpink-hover)]
           [--btn-bg-active:var(--color-challengerpink-active)]
           
-          [--btn-text-border:var(--color-challengerpink)]
           [--btn-bg-text-hover:var(--color-challengerpink-100)]
           [--btn-bg-text-active:var(--color-challengerpink-200)]
         `,
@@ -98,7 +101,6 @@ const buttonVariants = cva(
           [--btn-bg-hover:var(--color-roveryellow-hover)]
           [--btn-bg-active:var(--color-roveryellow-active)]
           
-          [--btn-text-border:var(--color-roveryellow)]
           [--btn-bg-text-hover:var(--color-roveryellow-100)]
           [--btn-bg-text-active:var(--color-roveryellow-200)]
         `,
@@ -129,13 +131,30 @@ const buttonVariants = cva(
       size: {
         medium: "text-base px-4 h-10 rounded-lg",
         small: "text-sm px-3 h-8 rounded-md",
+        "tiny-icon": "text-sm p-1 size-6 rounded-md",
       },
     },
     defaultVariants: {
       color: "blue",
       variant: "contained",
       size: "medium",
     },
+    compoundVariants: [
+      {
+        color: "gray",
+        variant: "text",
+        class: `
+          text-(--btn-text)
+        `,
+      },
+      {
+        color: "gray",
+        variant: "outlined",
+        class: `
+          text-(--btn-text)
+        `,
+      },
+    ],
   },
 );
 

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

@@ -2,11 +2,14 @@ import {
   createColumnHelper,
   flexRender,
   getCoreRowModel,
+  getFilteredRowModel,
   type Table as TanstackTable,
   useReactTable,
 } from "@tanstack/react-table";
+import { EllipsisVerticalIcon, ListFilterIcon } from "lucide-react";
 import { type ComponentProps, memo, useMemo, useState } from "react";
 import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
 import { Card } from "../card/card.js";
 
 type Attendee = {
@@ -47,6 +50,7 @@ function TableTest() {
     columns,
     columnResizeMode: "onChange",
     getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
   });
 
   return <Table table={table} className="w-full" />;
@@ -110,12 +114,23 @@ function Table<TData>(props: Props<TData>) {
                       width: `calc(var(--header-${header?.id}-size) * 1px)`,
                     }}
                   >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
+                    <div className="flex justify-between pr-1">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+
+                      <div className="flex gap-0.5">
+                        <Button size="tiny-icon" variant="text" color="gray">
+                          <ListFilterIcon />
+                        </Button>
+                        <Button size="tiny-icon" variant="text" color="gray">
+                          <EllipsisVerticalIcon />
+                        </Button>
+                      </div>
+                    </div>
 
                     {header.column.getCanResize() && (
                       <div
@@ -196,4 +211,4 @@ export const MemoizedTableBody = memo(
   (prev, next) => prev.table.options.data === next.table.options.data,
 ) as typeof TableBody;
 
-export { TableTest, Table };
+export { Table, TableTest };