feat(data-table): add optional sticky header

src/components/data-table/data-table.tsx

@@ -10,7 +10,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { getColumnPinningStyle } from "@/lib/data-table";
+import { getColumnPinningStyle, getStickyHeaderStyle } from "@/lib/data-table";
 import { cn } from "@/lib/utils";
 
 interface DataTableProps<TData> extends React.ComponentProps<"div"> {
@@ -25,14 +25,20 @@ export function DataTable<TData>({
   className,
   ...props
 }: DataTableProps<TData>) {
+  const { stickyHeader = false, maxHeight } = table.options.meta ?? {};
+
   return (
     <div
       className={cn("flex w-full flex-col gap-2.5 overflow-auto", className)}
       {...props}
     >
       {children}
       <div className="overflow-hidden rounded-md border">
-        <Table>
+        <Table
+          containerStyle={
+            stickyHeader ? { overflowY: "auto", maxHeight } : undefined
+          }
+        >
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -42,6 +48,10 @@ export function DataTable<TData>({
                     colSpan={header.colSpan}
                     style={{
                       ...getColumnPinningStyle({ column: header.column }),
+                      ...getStickyHeaderStyle({
+                        column: header.column,
+                        enabled: stickyHeader,
+                      }),
                     }}
                   >
                     {header.isPlaceholder

src/components/ui/table.tsx

@@ -4,11 +4,18 @@ import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+function Table({
+  className,
+  containerStyle,
+  ...props
+}: React.ComponentProps<"table"> & {
+  containerStyle?: React.CSSProperties;
+}) {
   return (
     <div
       data-slot="table-container"
       className="relative w-full overflow-x-auto"
+      style={containerStyle}
     >
       <table
         data-slot="table"

src/lib/data-table.ts

@@ -37,6 +37,23 @@ export function getColumnPinningStyle<TData>({
   };
 }
 
+export function getStickyHeaderStyle<TData>({
+  column,
+  enabled = false,
+}: {
+  column: Column<TData>;
+  enabled?: boolean;
+}): React.CSSProperties {
+  if (!enabled) return {};
+
+  return {
+    position: "sticky",
+    top: 0,
+    background: "var(--background)",
+    zIndex: column.getIsPinned() ? 3 : 2,
+  };
+}
+
 export function getFilterOperators(filterVariant: FilterVariant) {
   const operatorMap: Record<
     FilterVariant,

src/types/data-table.ts

@@ -5,6 +5,8 @@ import type { FilterItemSchema } from "@/lib/parsers";
 declare module "@tanstack/react-table" {
   interface TableMeta<TData extends RowData> {
     queryKeys?: QueryKeys;
+    stickyHeader?: boolean;
+    maxHeight?: string;
   }
 
   interface ColumnMeta<TData extends RowData, TValue> {