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

Fix column resize - make handle more visible and add pointer-events

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-21 08:56:37 +02:00
parent 3462ac9991
commit 6a864a4c35
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PricingView.tsx
+11 -3
View File
@@ -122,6 +122,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
}; };
const handleResizeStart = (e: React.MouseEvent, colKey: string, currentWidth: number) => { const handleResizeStart = (e: React.MouseEvent, colKey: string, currentWidth: number) => {
console.log('Resize started for:', colKey, 'at x:', e.clientX);
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setResizingColumn(colKey); setResizingColumn(colKey);
@@ -661,9 +662,16 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
<table ref={tableRef} className="w-full text-sm border-collapse"> <table ref={tableRef} className="w-full text-sm border-collapse">
<thead className="sticky top-0 z-10 bg-slate-900"> <thead className="sticky top-0 z-10 bg-slate-900">
<tr> <tr>
<th data-col-key="articleNo" style={{ width: columnWidths.articleNo || 100 }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap relative"> <th data-col-key="articleNo" style={{ width: columnWidths.articleNo || 100, minWidth: 60 }} className="text-left px-2 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap relative">
Art. No. <div className="flex items-center justify-between">
<div onMouseDown={(e) => handleResizeStart(e, 'articleNo', columnWidths.articleNo || 100)} className="absolute right-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-blue-500/30" /> <span>Art. No.</span>
<div
onMouseDown={(e) => handleResizeStart(e, 'articleNo', columnWidths.articleNo || 100)}
onClick={(e) => e.stopPropagation()}
className="w-1.5 h-4 bg-slate-600 hover:bg-blue-500 cursor-col-resize rounded-sm ml-1 shrink-0 pointer-events-auto"
title="Drag to resize"
/>
</div>
</th> </th>
<th data-col-key="articleName" style={{ width: columnWidths.articleName || 220 }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 group relative"> <th data-col-key="articleName" style={{ width: columnWidths.articleName || 220 }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 group relative">
<div className="flex items-center gap-1"><span>Article Name</span> <div className="flex items-center gap-1"><span>Article Name</span>