christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 12:45:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: ensure filter dropdowns are not covered by pinned columns

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-24 17:08:23 +02:00
parent 6057a16229
commit e96d245f59
2 changed files with 309 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ColumnFilterPopover.tsx
+234 -198
View File
@@ -1,4 +1,5 @@
import React, { useState, useMemo } from 'react';
import React, { useState, useMemo, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { Search, Check, X, Filter } from 'lucide-react';
import { cn } from '../lib/utils';
@@ -37,6 +38,36 @@ export function ColumnFilterPopover({
const [activeTab, setActiveTab] = useState<'values' | 'condition'>('values');
const [condition, setCondition] = useState<FilterCondition>({ type: 'equals', value: '' });
const [conditionResult, setConditionResult] = useState<string[]>([]);
const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
const [position, setPosition] = useState({ top: 0, left: 0 });
useEffect(() => {
const container = document.createElement('div');
container.id = 'filter-portal-' + Math.random().toString(36).substr(2, 9);
container.style.position = 'fixed';
container.style.zIndex = '9999';
container.style.top = '0';
container.style.left = '0';
container.style.pointerEvents = 'none';
document.body.appendChild(container);
setPortalContainer(container);
const btns = document.querySelectorAll('.filter-trigger-btn');
btns.forEach(btn => {
if (btn instanceof HTMLElement) {
const rect = btn.getBoundingClientRect();
const currentLeft = rect.left;
const currentTop = rect.bottom + 4;
setPosition({ top: currentTop, left: currentLeft });
}
});
return () => {
if (document.body.contains(container)) {
document.body.removeChild(container);
}
};
}, []);
const isDraggingRef = React.useRef(false);
const dragStartRef = React.useRef<number | null>(null);
@@ -157,224 +188,229 @@ 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 p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100",
className
)}
style={{ zIndex: zIndex >= 200 ? 9999 : zIndex }}
onClick={(e) => e.stopPropagation()}
>
<button
onClick={onClose}
className="absolute top-2 right-2 text-slate-500 hover:text-white p-1 rounded transition-colors z-10"
>
<X className="w-4 h-4" />
</button>
{title && <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">{title}</div>}
<div className="flex gap-1 border-b border-slate-700 pb-2">
<button
onClick={() => setActiveTab('values')}
<div className="fixed inset-0 z-0 pointer-events-none">
{portalContainer && createPortal(
<div
className={cn(
"flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors",
activeTab === 'values' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
"absolute 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 pointer-events-auto",
className
)}
style={{ zIndex: 9999 }}
onClick={(e) => e.stopPropagation()}
>
Values ({selectedValues.length})
</button>
<button
onClick={() => setActiveTab('condition')}
className={cn(
"flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors flex items-center justify-center gap-1",
activeTab === 'condition' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
)}
>
<Filter className="w-3 h-3" />
Condition
</button>
</div>
{activeTab === 'values' ? (
<>
<div className="relative">
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
<input
type="text"
placeholder="Filter values..."
value={search}
onChange={e => setSearch(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && search) {
e.preventDefault();
onSelectAll(filteredValues);
onClose();
}
}}
className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500"
autoFocus
/>
{search && (
<button
onClick={() => setSearch('')}
className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
>
<X className="w-3 h-3" />
</button>
)}
</div>
<div
ref={listRef}
className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar"
<button
onClick={onClose}
className="absolute top-2 right-2 text-slate-500 hover:text-white p-1 rounded transition-colors z-10"
>
{filteredValues.map((val, idx) => {
const isDragSelected = isDragging && dragStart !== null && hoveredIndex !== null &&
((idx >= dragStart && idx <= hoveredIndex) || (idx <= dragStart && idx >= hoveredIndex));
return (
<div
key={val}
role="checkbox"
aria-checked={selectedValues.includes(val)}
tabIndex={0}
onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
onMouseEnter={() => handleMouseEnter(idx)}
onClick={(e) => {
if (didDragRef.current) return;
if (e.shiftKey && lastClickedIndex !== null) {
const start = Math.min(lastClickedIndex, idx);
const end = Math.max(lastClickedIndex, idx);
const itemsToSelect = filteredValues.slice(start, end + 1);
const newSelected = new Set([...selectedValues, ...itemsToSelect]);
onSelectAll(Array.from(newSelected));
} else {
onToggle(val);
}
setLastClickedIndex(idx);
}}
onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); setLastClickedIndex(idx); } }}
className={cn(
"flex items-center gap-2 p-1.5 rounded cursor-pointer group transition-colors select-none",
isDragSelected ? "bg-blue-600/40" : "hover:bg-slate-700/50"
)}
>
<div className={cn(
"w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
selectedValues.includes(val) ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
)}>
{selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
</div>
<span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
</div>
);
})}
{filteredValues.length === 0 && (
<div className="text-[10px] text-slate-500 text-center py-4 italic">No values found</div>
)}
</div>
<X className="w-4 h-4" />
</button>
<div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
<div className="flex items-center gap-3">
<button
onClick={() => {
if (isAllSelected) {
onSelectAll([]);
} else {
onSelectAll(uniqueValues);
}
}}
className="text-[10px] font-black text-indigo-400 hover:text-indigo-300 transition-colors uppercase tracking-tight"
>
{isAllSelected ? 'Deselect All' : 'Select All'}
</button>
<span className="text-slate-600 font-bold">•</span>
<button
onClick={onClear}
className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
>
Clear
</button>
</div>
{title && <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">{title}</div>}
<div className="flex gap-1 border-b border-slate-700 pb-2">
<button
onClick={onClose}
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95 uppercase"
onClick={() => setActiveTab('values')}
className={cn(
"flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors",
activeTab === 'values' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
)}
>
OK
Values ({selectedValues.length})
</button>
<button
onClick={() => setActiveTab('condition')}
className={cn(
"flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors flex items-center justify-center gap-1",
activeTab === 'condition' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
)}
>
<Filter className="w-3 h-3" />
Condition
</button>
</div>
</>
) : (
<>
<div className="space-y-2">
<div>
<label className="text-[10px] text-slate-400 uppercase">Condition Type</label>
<select
value={condition.type}
onChange={e => setCondition({ ...condition, type: e.target.value as FilterType })}
className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
>
<option value="equals">Equals (=)</option>
<option value="notEquals">Not Equals (≠)</option>
<option value="contains">Contains</option>
<option value="startsWith">Starts With</option>
<option value="endsWith">Ends With</option>
<option value="greaterThan">Greater Than (&gt;)</option>
<option value="lessThan">Less Than (&lt;)</option>
<option value="between">Between</option>
</select>
</div>
<div>
<label className="text-[10px] text-slate-400 uppercase">Value</label>
<input
type="text"
value={condition.value}
onChange={e => setCondition({ ...condition, value: e.target.value })}
onKeyDown={(e) => {
if (e.key === 'Enter' && condition.value) {
e.preventDefault();
applyCondition();
}
}}
placeholder="Enter value..."
className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
/>
</div>
{condition.type === 'between' && (
<div>
<label className="text-[10px] text-slate-400 uppercase">And</label>
{activeTab === 'values' ? (
<>
<div className="relative">
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
<input
type="text"
value={condition.value2 || ''}
onChange={e => setCondition({ ...condition, value2: e.target.value })}
placeholder="Filter values..."
value={search}
onChange={e => setSearch(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && condition.value && condition.value2) {
if (e.key === 'Enter' && search) {
e.preventDefault();
applyCondition();
onSelectAll(filteredValues);
onClose();
}
}}
placeholder="Enter second value..."
className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500"
autoFocus
/>
{search && (
<button
onClick={() => setSearch('')}
className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
>
<X className="w-3 h-3" />
</button>
)}
</div>
)}
<button
onClick={applyCondition}
className="w-full py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors"
>
Apply Condition
</button>
</div>
<div
ref={listRef}
className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar"
>
{filteredValues.map((val, idx) => {
const isDragSelected = isDragging && dragStart !== null && hoveredIndex !== null &&
((idx >= dragStart && idx <= hoveredIndex) || (idx <= dragStart && idx >= hoveredIndex));
return (
<div
key={val}
role="checkbox"
aria-checked={selectedValues.includes(val)}
tabIndex={0}
onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
onMouseEnter={() => handleMouseEnter(idx)}
onClick={(e) => {
if (didDragRef.current) return;
if (e.shiftKey && lastClickedIndex !== null) {
const start = Math.min(lastClickedIndex, idx);
const end = Math.max(lastClickedIndex, idx);
const itemsToSelect = filteredValues.slice(start, end + 1);
const newSelected = new Set([...selectedValues, ...itemsToSelect]);
onSelectAll(Array.from(newSelected));
} else {
onToggle(val);
}
setLastClickedIndex(idx);
}}
onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); setLastClickedIndex(idx); } }}
className={cn(
"flex items-center gap-2 p-1.5 rounded cursor-pointer group transition-colors select-none",
isDragSelected ? "bg-blue-600/40" : "hover:bg-slate-700/50"
)}
>
<div className={cn(
"w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
selectedValues.includes(val) ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
)}>
{selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
</div>
<span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
</div>
);
})}
{filteredValues.length === 0 && (
<div className="text-[10px] text-slate-500 text-center py-4 italic">No values found</div>
)}
</div>
{conditionResult.length > 0 && (
<div className="text-[10px] text-green-400 text-center pt-2 border-t border-slate-700">
Found {conditionResult.length} matching value{conditionResult.length !== 1 ? 's' : ''}
</div>
<div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
<div className="flex items-center gap-3">
<button
onClick={() => {
if (isAllSelected) {
onSelectAll([]);
} else {
onSelectAll(uniqueValues);
}
}}
className="text-[10px] font-black text-indigo-400 hover:text-indigo-300 transition-colors uppercase tracking-tight"
>
{isAllSelected ? 'Deselect All' : 'Select All'}
</button>
<span className="text-slate-600 font-bold">•</span>
<button
onClick={onClear}
className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
>
Clear
</button>
</div>
<button
onClick={onClose}
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95 uppercase"
>
OK
</button>
</div>
</>
) : (
<>
<div className="space-y-2">
<div>
<label className="text-[10px] text-slate-400 uppercase">Condition Type</label>
<select
value={condition.type}
onChange={e => setCondition({ ...condition, type: e.target.value as FilterType })}
className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
>
<option value="equals">Equals (=)</option>
<option value="notEquals">Not Equals (≠)</option>
<option value="contains">Contains</option>
<option value="startsWith">Starts With</option>
<option value="endsWith">Ends With</option>
<option value="greaterThan">Greater Than (&gt;)</option>
<option value="lessThan">Less Than (&lt;)</option>
<option value="between">Between</option>
</select>
</div>
<div>
<label className="text-[10px] text-slate-400 uppercase">Value</label>
<input
type="text"
value={condition.value}
onChange={e => setCondition({ ...condition, value: e.target.value })}
onKeyDown={(e) => {
if (e.key === 'Enter' && condition.value) {
e.preventDefault();
applyCondition();
}
}}
placeholder="Enter value..."
className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
/>
</div>
{condition.type === 'between' && (
<div>
<label className="text-[10px] text-slate-400 uppercase">And</label>
<input
type="text"
value={condition.value2 || ''}
onChange={e => setCondition({ ...condition, value2: e.target.value })}
onKeyDown={(e) => {
if (e.key === 'Enter' && condition.value && condition.value2) {
e.preventDefault();
applyCondition();
}
}}
placeholder="Enter second value..."
className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
/>
</div>
)}
<button
onClick={applyCondition}
className="w-full py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors"
>
Apply Condition
</button>
</div>
{conditionResult.length > 0 && (
<div className="text-[10px] text-green-400 text-center pt-2 border-t border-slate-700">
Found {conditionResult.length} matching value{conditionResult.length !== 1 ? 's' : ''}
</div>
)}
</>
)}
</>
</div>,
portalContainer
)}
</div>
);
src/components/PricingView.tsx
+75 -20
View File
@@ -1151,7 +1151,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
<table ref={tableRef} className="w-full text-sm border-collapse table-fixed">
<thead className="sticky top-0 z-10 bg-slate-900 border-b border-slate-700">
<tr>
<th style={{ width: columnWidths.articleNo, ...(isPinned('articleNo') ? { left: getStickyLeft('articleNo') ?? 0, zIndex: getHeaderStickyRank('articleNo') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.articleNo,
...(isPinned('articleNo')
? { left: getStickyLeft('articleNo') ?? 0, zIndex: openFilter === 'sku' ? 500 : (getHeaderStickyRank('articleNo') ?? 0) }
: (openFilter === 'sku' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('articleNo') && "sticky bg-slate-900"
)} onClick={() => handleSort('articleNo')}>
@@ -1175,12 +1180,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
value={articleNoColFilter}
onChange={setArticleNoColFilter}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('articleNo') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleNo', columnWidths.articleNo); }} />
</th>
<th style={{ width: columnWidths.articleName, ...(isPinned('articleName') ? { left: getStickyLeft('articleName') ?? 0, zIndex: getHeaderStickyRank('articleName') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.articleName,
...(isPinned('articleName')
? { left: getStickyLeft('articleName') ?? 0, zIndex: openFilter === 'name' ? 500 : (getHeaderStickyRank('articleName') ?? 0) }
: (openFilter === 'name' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('articleName') && "sticky bg-slate-900"
)} onClick={() => handleSort('articleName')}>
@@ -1203,12 +1213,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
value={nameColFilter}
onChange={setNameColFilter}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('articleName') ? 200 : 50}
zIndex={500}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleName', columnWidths.articleName); }} />
</th>
<th style={{ width: columnWidths.line, ...(isPinned('line') ? { left: getStickyLeft('line') ?? 0, zIndex: getHeaderStickyRank('line') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.line,
...(isPinned('line')
? { left: getStickyLeft('line') ?? 0, zIndex: openFilter === 'line' ? 500 : (getHeaderStickyRank('line') ?? 0) }
: (openFilter === 'line' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('line') && "sticky bg-slate-900"
)} onClick={() => handleSort('line')}>
@@ -1234,12 +1249,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setLineMultiFilter(vals)}
onClear={() => { setLineMultiFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('line') ? 200 : 50}
zIndex={500}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'line', columnWidths.line); }} />
</th>
<th style={{ width: columnWidths.classification, ...(isPinned('classification') ? { left: getStickyLeft('classification') ?? 0, zIndex: getHeaderStickyRank('classification') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.classification,
...(isPinned('classification')
? { left: getStickyLeft('classification') ?? 0, zIndex: openFilter === 'classification' ? 500 : (getHeaderStickyRank('classification') ?? 0) }
: (openFilter === 'classification' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('classification') && "sticky bg-slate-900"
)} onClick={() => handleSort('classification')}>
@@ -1265,7 +1285,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setClassificationFilter(vals)}
onClear={() => { setClassificationFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('classification') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'classification', columnWidths.classification); }} />
@@ -1293,13 +1313,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setProductTypeFilter(vals)}
onClear={() => { setProductTypeFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('productType') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'productType', columnWidths.productType); }} />
</th>
<th style={{ width: columnWidths.itemToLogistic, ...(isPinned('itemToLogistic') ? { left: getStickyLeft('itemToLogistic') ?? 0, zIndex: getHeaderStickyRank('itemToLogistic') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.itemToLogistic,
...(isPinned('itemToLogistic')
? { left: getStickyLeft('itemToLogistic') ?? 0, zIndex: openFilter === 'logistic' ? 500 : (getHeaderStickyRank('itemToLogistic') ?? 0) }
: (openFilter === 'logistic' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-pink-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('itemToLogistic') && "sticky bg-slate-900"
)} onClick={() => handleSort('itemToLogistic')}>
@@ -1313,7 +1338,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
const colKey = `prc_${col.index}`;
const width = columnWidths[colKey] ?? 100;
return (
<th key={col.index} style={{ width, ...(isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getHeaderStickyRank(colKey) ?? 0 } : {}) }} className={cn(
<th key={col.index} style={{
width,
...(isPinned(colKey)
? { left: getStickyLeft(colKey) ?? 0, zIndex: openFilter === colKey ? 500 : (getHeaderStickyRank(colKey) ?? 0) }
: (openFilter === colKey ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned(colKey) && "sticky bg-slate-900"
)} onClick={() => handleSort(col.index)}>
@@ -1355,7 +1385,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
);
})}
<th style={{ width: columnWidths.unitsOuter, ...(isPinned('unitsOuter') ? { left: getStickyLeft('unitsOuter') ?? 0, zIndex: getHeaderStickyRank('unitsOuter') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.unitsOuter,
...(isPinned('unitsOuter')
? { left: getStickyLeft('unitsOuter') ?? 0, zIndex: openFilter === 'unitsOuter' ? 500 : (getHeaderStickyRank('unitsOuter') ?? 0) }
: (openFilter === 'unitsOuter' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('unitsOuter') && "sticky bg-slate-900"
)} onClick={() => handleSort('unitsOuter')}>
@@ -1381,13 +1416,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setUnitsOuterFilter(vals)}
onClear={() => { setUnitsOuterFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('unitsOuter') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'unitsOuter', columnWidths.unitsOuter); }} />
</th>
<th style={{ width: columnWidths.outerW, ...(isPinned('outerW') ? { left: getStickyLeft('outerW') ?? 0, zIndex: getHeaderStickyRank('outerW') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.outerW,
...(isPinned('outerW')
? { left: getStickyLeft('outerW') ?? 0, zIndex: openFilter === 'outerW' ? 500 : (getHeaderStickyRank('outerW') ?? 0) }
: (openFilter === 'outerW' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('outerW') && "sticky bg-slate-900"
)} onClick={() => handleSort('outerW')}>
@@ -1413,13 +1453,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterWFilter(vals)}
onClear={() => { setOuterWFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerW') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerW', columnWidths.outerW); }} />
</th>
<th style={{ width: columnWidths.outerL, ...(isPinned('outerL') ? { left: getStickyLeft('outerL') ?? 0, zIndex: getHeaderStickyRank('outerL') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.outerL,
...(isPinned('outerL')
? { left: getStickyLeft('outerL') ?? 0, zIndex: openFilter === 'outerL' ? 500 : (getHeaderStickyRank('outerL') ?? 0) }
: (openFilter === 'outerL' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('outerL') && "sticky bg-slate-900"
)} onClick={() => handleSort('outerL')}>
@@ -1445,13 +1490,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterLFilter(vals)}
onClear={() => { setOuterLFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerL') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerL', columnWidths.outerL); }} />
</th>
<th style={{ width: columnWidths.outerH, ...(isPinned('outerH') ? { left: getStickyLeft('outerH') ?? 0, zIndex: getHeaderStickyRank('outerH') ?? 0 } : {}) }} className={cn(
<th style={{
width: columnWidths.outerH,
...(isPinned('outerH')
? { left: getStickyLeft('outerH') ?? 0, zIndex: openFilter === 'outerH' ? 500 : (getHeaderStickyRank('outerH') ?? 0) }
: (openFilter === 'outerH' ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned('outerH') && "sticky bg-slate-900"
)} onClick={() => handleSort('outerH')}>
@@ -1477,7 +1527,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onSelectAll={vals => setOuterHFilter(vals)}
onClear={() => { setOuterHFilter([]); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
zIndex={isPinned('outerH') ? 200 : 50}
zIndex={50}
/>
)}
<ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerH', columnWidths.outerH); }} />
@@ -1487,7 +1537,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
const colKey = `con_${col.index}`;
const width = columnWidths[colKey] ?? 110;
return (
<th key={col.index} style={{ width, ...(isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getHeaderStickyRank(colKey) ?? 0 } : {}) }} className={cn(
<th key={col.index} style={{
width,
...(isPinned(colKey)
? { left: getStickyLeft(colKey) ?? 0, zIndex: openFilter === colKey ? 500 : (getHeaderStickyRank(colKey) ?? 0) }
: (openFilter === colKey ? { zIndex: 500, position: 'relative' } : {}))
}} className={cn(
"text-left px-3 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
isPinned(colKey) && "sticky bg-slate-900"
)} onClick={() => handleSort(col.index)}>