fix: ensure filter popovers appear above pinned columns

- Add zIndex prop to ColumnFilterPopover and TextFilterPopover
- Pass higher zIndex to popovers when column is pinned (zIndex + 100)
- Filter popovers now display correctly over sticky columns
This commit is contained in:
Christian Vidal Wolf
2026-04-24 14:06:32 +02:00
parent b5e8c2fe22
commit 29d5994d6a
2 changed files with 49 additions and 34 deletions
+5 -2
View File
@@ -19,6 +19,7 @@ interface ColumnFilterPopoverProps {
onClose: () => void;
title?: string;
className?: string;
zIndex?: number;
}
export function ColumnFilterPopover({
@@ -29,7 +30,8 @@ export function ColumnFilterPopover({
onClear,
onClose,
title,
className
className,
zIndex = 50
}: ColumnFilterPopoverProps) {
const [search, setSearch] = useState('');
const [activeTab, setActiveTab] = useState<'values' | 'condition'>('values');
@@ -157,9 +159,10 @@ export function ColumnFilterPopover({
return (
<div
className={cn(
"absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl z-50 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100",
"absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100",
className
)}
style={{ zIndex }}
onClick={(e) => e.stopPropagation()}
>
<button