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

fix: include dynamic columns in sticky position/z-index calculation

Browse Source 
- Include pricingEditableCols and containerCols in column order for pinned calculation
- Fix z-index stacking so all pinned columns stay visible while scrolling
This commit is contained in:
Christian Vidal Wolf
2026-04-24 13:35:43 +02:00
parent 1c76544e47
commit 43f94b3902
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PricingView.tsx
+20 -9
View File
@@ -599,12 +599,15 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
}); });
}; };
// Column order for sticky positioning
const columnOrder = ['articleNo', 'articleName', 'line', 'classification', 'productType', 'itemToLogistic', 'unitsOuter', 'outerW', 'outerL', 'outerH'];
// Calculate sticky left position for each pinned column // Calculate sticky left position for each pinned column
const getStickyLeft = useMemo(() => { const getStickyLeft = useMemo(() => {
const pinnedOrder = columnOrder.filter(k => pinnedColumns.has(k)); const baseOrder = ['articleNo', 'articleName', 'line', 'classification', 'productType', 'itemToLogistic', 'unitsOuter', 'outerW', 'outerL', 'outerH'];
const dynamicOrder: string[] = [];
pricingEditableCols.forEach(col => dynamicOrder.push(`prc_${col.index}`));
containerCols.forEach(col => dynamicOrder.push(`con_${col.index}`));
const fullOrder = [...baseOrder, ...dynamicOrder];
const pinnedOrder = fullOrder.filter(k => pinnedColumns.has(k));
return (key: string): number | null => { return (key: string): number | null => {
if (!pinnedColumns.has(key)) return null; if (!pinnedColumns.has(key)) return null;
const idx = pinnedOrder.indexOf(key); const idx = pinnedOrder.indexOf(key);
@@ -612,23 +615,31 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
let left = 0; let left = 0;
for (let i = 0; i < idx; i++) { for (let i = 0; i < idx; i++) {
const k = pinnedOrder[i]; const k = pinnedOrder[i];
left += columnWidths[k] || 100; const width = k.startsWith('prc_') || k.startsWith('con_')
? (columnWidths[k] ?? 100)
: (columnWidths[k] || 100);
left += width;
} }
return left; return left;
}; };
}, [pinnedColumns, columnOrder, columnWidths]); }, [pinnedColumns, pricingEditableCols, containerCols, columnWidths]);
// Calculate z-index for sticky columns (so they stack correctly) // Calculate z-index for sticky columns (so they stack correctly)
const getStickyRank = useMemo(() => { const getStickyRank = useMemo(() => {
const pinnedOrder = columnOrder.filter(k => pinnedColumns.has(k)); const baseOrder = ['articleNo', 'articleName', 'line', 'classification', 'productType', 'itemToLogistic', 'unitsOuter', 'outerW', 'outerL', 'outerH'];
const dynamicOrder: string[] = [];
pricingEditableCols.forEach(col => dynamicOrder.push(`prc_${col.index}`));
containerCols.forEach(col => dynamicOrder.push(`con_${col.index}`));
const fullOrder = [...baseOrder, ...dynamicOrder];
const pinnedOrder = fullOrder.filter(k => pinnedColumns.has(k));
return (key: string): number | null => { return (key: string): number | null => {
if (!pinnedColumns.has(key)) return null; if (!pinnedColumns.has(key)) return null;
const idx = pinnedOrder.indexOf(key); const idx = pinnedOrder.indexOf(key);
if (idx === -1) return null; if (idx === -1) return null;
// Higher rank = on top
return pinnedOrder.length - idx + 10; return pinnedOrder.length - idx + 10;
}; };
}, [pinnedColumns, columnOrder]); }, [pinnedColumns, pricingEditableCols, containerCols]);
const isPinned = (key: string) => pinnedColumns.has(key); const isPinned = (key: string) => pinnedColumns.has(key);