diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx index 89d91ea0..a34e5862 100644 --- a/src/components/data-table/data-table.tsx +++ b/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 extends React.ComponentProps<"div"> { @@ -25,6 +25,8 @@ export function DataTable({ className, ...props }: DataTableProps) { + const { stickyHeader = false, maxHeight } = table.options.meta ?? {}; + return (
({ > {children}
- +
{table.getHeaderGroups().map((headerGroup) => ( @@ -42,6 +48,10 @@ export function DataTable({ colSpan={header.colSpan} style={{ ...getColumnPinningStyle({ column: header.column }), + ...getStickyHeaderStyle({ + column: header.column, + enabled: stickyHeader, + }), }} > {header.isPlaceholder diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx index da90607d..f31247cd 100644 --- a/src/components/ui/table.tsx +++ b/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 (
({ }; } +export function getStickyHeaderStyle({ + column, + enabled = false, +}: { + column: Column; + 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, diff --git a/src/types/data-table.ts b/src/types/data-table.ts index a1c36ed6..d0287be1 100644 --- a/src/types/data-table.ts +++ b/src/types/data-table.ts @@ -5,6 +5,8 @@ import type { FilterItemSchema } from "@/lib/parsers"; declare module "@tanstack/react-table" { interface TableMeta { queryKeys?: QueryKeys; + stickyHeader?: boolean; + maxHeight?: string; } interface ColumnMeta {