)}
);
}
// ── dropdown / multi-select cell editor popover ───────────────────
function CellPicker({ pop, rows, onClose }){
const [q, setQ] = useState('');
const [confirmDel, setConfirmDel] = useState(null);
const col = pop.col;
const opts = PStore.options(col.opts);
const row = rows.find(r => r.id === pop.rowId);
const multi = col.type === 'multi';
const cur = multi ? (row[col.key] || []) : row[col.key];
const ql = q.trim().toLowerCase();
const filtered = ql ? opts.filter(o => o.v.toLowerCase().includes(ql)) : opts;
const exact = opts.some(o => o.v.toLowerCase() === ql);
// how many rows currently use each option value (so deleting is informed)
const usage = (v) => rows.reduce((n,r) => n + (multi ? ((r[col.key]||[]).includes(v)?1:0) : (r[col.key]===v?1:0)), 0);
const pick = (v) => {
if(multi){
const set = new Set(cur); set.has(v) ? set.delete(v) : set.add(v);
PStore.patchCell(pop.rowId, col.key, [...set]); setQ('');
} else { PStore.patchCell(pop.rowId, col.key, v); onClose(); }
};
const createNew = () => { const v = q.trim(); if(!v) return; PStore.addOption(col.opts, v); pick(v); };
const style = (() => {
const left = Math.min(pop.rect.left, window.innerWidth - 296);
const below = window.innerHeight - pop.rect.bottom > 280;
return below ? { left, top: pop.rect.bottom+4 } : { left, bottom: window.innerHeight - pop.rect.top + 4 };
})();
return (
<>
);
}
// ── column header menu ────────────────────────────────────────────
function ColMenu({ menu, sort, onSort, onClose }){
const col = menu.col;
const [name, setName] = useState(col.label);
const style = { left: Math.min(menu.rect.left, window.innerWidth - 196), top: menu.rect.bottom+4 };
return (
<>
);
}
// ── add-column modal ──────────────────────────────────────────────
const COL_TYPES = [
{ t:'text', i:'T', l:'Text' },
{ t:'number', i:'#', l:'Number' },
{ t:'currency', i:'$', l:'Currency' },
{ t:'select', i:'▾', l:'Dropdown' },
{ t:'multi', i:'≣', l:'Multi-select' },
{ t:'date', i:'▤', l:'Date' },
{ t:'checkbox', i:'☑', l:'Checkbox' },
];
function AddColModal({ onClose }){
const [label, setLabel] = useState('');
const [type, setType] = useState('text');
const [options, setOptions] = useState([]);
const [draft, setDraft] = useState('');
const needsOpts = type === 'select' || type === 'multi';
const addOpt = () => { const v = draft.trim(); if(v && !options.includes(v)) setOptions([...options, v]); setDraft(''); };
const create = () => {
if(!label.trim()) return;
PStore.addColumn({ label: label.trim(), type, options, w: type==='checkbox'?90 : type==='select'||type==='multi'?150 : 150 });
RS.toast('Column added · “'+label.trim()+'”');
onClose();
};
return (
);
}
// ── pivot value filter (Excel-style: pick one value of the grouping field) ──
const PIVOT_LABELS = { icp:'ICP', tier:'Tier', stage:'Stage', source:'Source' };
function PivotFilter({ pivot, value, values, counts, total, onChange }){
const [open, setOpen] = useState(false);
const [rect, setRect] = useState(null);
const ref = useRef(null);
const label = PIVOT_LABELS[pivot] || 'Value';
const openIt = () => { setRect(ref.current.getBoundingClientRect()); setOpen(true); };
const meta = (v) => PStore.optMeta(pivot, v) || {};
const choose = (v) => { onChange(v); setOpen(false); };
const menuStyle = rect ? { left: Math.min(rect.left, window.innerWidth - 244), top: rect.bottom + 5, minWidth: Math.max(rect.width, 210) } : {};
return (
{open && rect && (
<>
setOpen(false)} />
e.stopPropagation()}>
{label} · {values.length} value{values.length===1?'':'s'}
{values.map(v => (
))}
)}
);
}
// ── inline cell editor: focuses + shows a blinking caret on every mount ──
function CellEditor({ initial, isNum, isDate, onCommit, onCancel }){
const ref = useRef(null);
const [val, setVal] = useState(initial == null ? '' : String(initial));
useEffect(() => {
const el = ref.current;
if(!el) return;
el.focus();
// place caret at the end so it blinks ready for typing (don't select-all)
if(!isDate){ const n = el.value.length; try { el.setSelectionRange(n, n); } catch(e){} }
}, []);
return (
setVal(e.target.value)}
onBlur={() => onCommit(val, null)}
onKeyDown={e => {
if(e.key==='Enter'){ e.preventDefault(); onCommit(val, {dr:1,dc:0}); }
else if(e.key==='Tab'){ e.preventDefault(); onCommit(val, {dr:0,dc:e.shiftKey?-1:1}); }
else if(e.key==='Escape'){ e.preventDefault(); onCancel(); }
}} />
);
}
// ── value display formatting ──────────────────────────────────────
function fmt(col, v){
if(col.type === 'currency') return v==null||v==='' ? '' : RS.money(v);
if(col.type === 'number') return v==null||v==='' ? '' : String(v);
return v==null ? '' : String(v);
}
// ── outreach-track cell + picker (links a contact to a sequence) ───
function trackColor(seq){ return window.OX.ch((seq.steps[0]||{}).ch).color; }
// ── copyable contact-channel cell (value shown + editable + one-click copy) ─
function CopyCell({ row, col }){
const v = row[col.key];
if(v==null || v===''){ return
—
; }
const ch = (window.OX && col.channel) ? window.OX.ch(col.channel) : null;
const copy = (e) => { e.stopPropagation(); try{ navigator.clipboard.writeText(String(v)); }catch(x){} RS.toast(col.label+' copied to clipboard'); };
return (
{ch &&
{ch.glyph}}
{v}
);
}
function TrackCell({ row }){
const OX = window.OX;
if(!row.isContact) return
—
;
const id = OX.Store.seqOf(row.id);
if(!id) return
＋ Enroll…
;
const s = OX.Store.seq(id);
if(!s) return
—
;
const c = trackColor(s);
return (
{s.id}{s.name}
);
}
function TrackPicker({ pop, onClose }){
const OX = window.OX;
const seqs = OX.Store.seqs();
const cur = OX.Store.seqOf(pop.rowId);
const row = pop.row;
const pick = (seqId) => {
OX.Store.setEnroll(pop.rowId, seqId);
const s = seqId ? seqs.find(x => x.id===seqId) : null;
RS.toast(s ? `${row.name} → ${s.id} · ${s.name}` : `${row.name} removed from sequences`);
onClose();
};
const style = (() => {
const left = Math.min(pop.rect.left, window.innerWidth - 312);
const below = window.innerHeight - pop.rect.bottom > 340;
return below ? { left, top: pop.rect.bottom+4 } : { left, bottom: window.innerHeight - pop.rect.top + 4 };
})();
return (
<>
e.stopPropagation()}>
Outreach track · enroll {row.name}
{seqs.map(s => {
const c = trackColor(s); const on = cur===s.id; const live = OX.contactsFor(s.id).length;
return (
);
})}
);
}
// ── main ──────────────────────────────────────────────────────────
function TabPipeline(){
const st = usePipe();
const cols = PStore.cols();
const rows = st.rows;
const Store = window.RaiseStore;
const [,oxBump] = useState(0);
useEffect(() => { if(window.OX) return window.OX.Store.subscribe(() => oxBump(x => x+1)); }, []);
const [pivot, setPivot] = useState('all'); // all | icp | tier | stage | source
const [pivotVal, setPivotVal] = useState('__all'); // Excel-style single-value filter for the active pivot ('__all' = show every value)
const [query, setQuery] = useState('');
const [view, setView] = useState(() => localStorage.getItem('raiseos.pipeview') || 'grid'); // grid | board
const [boardLayout, setBoardLayout] = useState(() => localStorage.getItem('raiseos.boardlayout') || 'comfortable');
const setViewP = (v) => { setView(v); localStorage.setItem('raiseos.pipeview', v); };
const setLayoutP = (v) => { setBoardLayout(v); localStorage.setItem('raiseos.boardlayout', v); };
const [sort, setSort] = useState({ key:null, dir:'asc' });
const [collapsed, setCollapsed] = useState(() => new Set());
const [sel, setSel] = useState(null); // {rowId, colKey}
const [editing, setEditing] = useState(false);
const [editVal, setEditVal] = useState('');
const [pop, setPop] = useState(null); // dropdown picker
const [trackPop, setTrackPop] = useState(null); // outreach-track picker
const [colMenu, setColMenu] = useState(null);
const [addCol, setAddCol] = useState(false);
const [liveW, setLiveW] = useState(null); // {key,w} while dragging a column edge
const [tip, setTip] = useState(null); // {text,x,y} truncated-text hover box
const [dragCol, setDragCol] = useState(null); // key of column being dragged to reorder
const [overCol, setOverCol] = useState(null); // key of the column we'd drop before
const gridRef = useRef(null);
const cellRefs = useRef({}); // `${rowId}:${colKey}` -> td
const setSortFn = (key, dir) => setSort(key==null ? { key:null, dir:'asc' } : { key, dir });
const toggleSort = (key) => setSort(s => s.key!==key ? { key, dir:'asc' } : s.dir==='asc' ? { key, dir:'desc' } : { key:null, dir:'asc' });
// filter + sort
const filtered = useMemo(() => {
let out = rows;
const q = query.trim().toLowerCase();
if(q) out = out.filter(r => cols.some(c => String(r[c.key]??'').toLowerCase().includes(q)));
if(sort.key){
const col = cols.find(c => c.key === sort.key);
const num = col && col.num;
out = [...out].sort((a,b) => {
let x = a[sort.key], y = b[sort.key];
if(num){ x = x==null?-Infinity:+x; y = y==null?-Infinity:+y; return sort.dir==='asc'? x-y : y-x; }
x = String(x??'').toLowerCase(); y = String(y??'').toLowerCase();
return sort.dir==='asc' ? x.localeCompare(y) : y.localeCompare(x);
});
}
return out;
}, [rows, cols, query, sort]);
// distinct values actually present in the grouping column — always reflects the whole table (Excel auto-filter)
const pivotValues = useMemo(() => {
if(pivot === 'all') return [];
const present = []; const seen = new Set();
rows.forEach(r => { const v = r[pivot]; if(v && !seen.has(v)){ seen.add(v); present.push(v); } });
const order = PStore.options(pivot).map(o => o.v);
const ordered = order.filter(v => seen.has(v));
const extras = present.filter(v => !order.includes(v)).sort((a,b) => a.localeCompare(b));
return [...ordered, ...extras];
}, [rows, pivot, st.options]);
const pivotCounts = useMemo(() => {
const c = {};
if(pivot !== 'all') rows.forEach(r => { const v = r[pivot]; if(v) c[v] = (c[v]||0) + 1; });
return c;
}, [rows, pivot]);
// switching pivots picks the first present value, so exactly one value shows (per request)
const choosePivot = (id) => {
setPivot(id);
if(id === 'all'){ setPivotVal('__all'); return; }
const seen = new Set(); rows.forEach(r => { const v = r[id]; if(v) seen.add(v); });
const order = PStore.options(id).map(o => o.v).filter(v => seen.has(v));
const extras = [...seen].filter(v => !order.includes(v)).sort((a,b) => a.localeCompare(b));
const list = [...order, ...extras];
setPivotVal(list[0] || '__all');
};
// group
const groups = useMemo(() => {
if(pivot === 'all') return [{ key:'__all', label:null, color:null, rows: filtered }];
// single-value filter: show only the chosen value, flat (no group header)
if(pivotVal !== '__all') return [{ key:'val:'+pivotVal, label:null, color:null, rows: filtered.filter(r => r[pivot] === pivotVal) }];
const opts = PStore.options(pivot);
const order = opts.map(o => o.v);
const map = {}; const none = [];
filtered.forEach(r => { const v = r[pivot]; if(!v) none.push(r); else (map[v] = map[v]||[]).push(r); });
const keys = [];
order.forEach(v => { if(map[v]){ keys.push(v); delete map[v]; } });
Object.keys(map).forEach(v => keys.push(v));
const g = keys.map(v => ({ key:v, label:v, color:(PStore.optMeta(pivot,v)||{}).c, rows: map[v] || filtered.filter(r=>r[pivot]===v) }));
if(none.length) g.push({ key:'__none', label:'(none)', color:null, rows: none, none:true });
return g;
}, [filtered, pivot, pivotVal, st.options]);
// rows actually on screen (respects the pivot value filter) — drives totals + footer count
const shownRows = useMemo(() => { const s = []; groups.forEach(g => g.rows.forEach(r => s.push(r))); return s; }, [groups]);
// flat list of visible (non-collapsed) rows for keyboard nav
const flatRows = useMemo(() => {
const out = [];
groups.forEach(g => { if(!collapsed.has(g.key)) g.rows.forEach(r => out.push(r)); });
return out;
}, [groups, collapsed]);
const navRef = useRef({ flatRows, cols });
navRef.current = { flatRows, cols };
const focusGrid = () => { if(gridRef.current) gridRef.current.focus(); };
const selectCell = (rowId, colKey, opts={}) => {
setSel({ rowId, colKey }); setEditing(false);
const col = cols.find(c => c.key === colKey);
if(opts.openEditor){
if(col.type === 'select' || col.type === 'multi'){ openPicker(rowId, col); }
else if(col.type === 'track'){ openTrackPicker(rowId, col); }
else if(col.type === 'checkbox'){ const r = PStore.getRows().find(x=>x.id===rowId) || {}; PStore.patchCell(rowId, colKey, !r[colKey]); }
else { beginEdit(rowId, col); } // text / number / currency / date / contact (inline name entry)
} else { setTimeout(focusGrid, 0); }
};
const openPicker = (rowId, col) => {
const td = cellRefs.current[`${rowId}:${col.key}`];
if(td) setPop({ rowId, col, rect: td.getBoundingClientRect() });
};
const openTrackPicker = (rowId, col) => {
const row = PStore.getRows().find(r => r.id===rowId);
if(row && !row.isContact){ RS.toast('Only active contacts can be enrolled — move them out of the universe first'); return; }
const td = cellRefs.current[`${rowId}:${col.key}`];
if(td) setTrackPop({ rowId, row, rect: td.getBoundingClientRect() });
};
const beginEdit = (rowId, col, initial) => {
const r = PStore.getRows().find(x => x.id === rowId) || {};
setSel({ rowId, colKey: col.key });
setEditVal(initial!=null ? initial : (r[col.key]==null ? '' : String(r[col.key])));
setEditing(true);
};
const commitEdit = (value, move) => {
if(sel && editing){
const col = cols.find(c => c.key === sel.colKey);
let v = value == null ? '' : value;
if(col.num){ const s = String(v); v = s.trim()===''? null : parseFloat(s.replace(/[^0-9.\-]/g,'')); if(isNaN(v)) v = null; }
PStore.patchCell(sel.rowId, sel.colKey, v);
}
setEditing(false);
if(move) moveSel(move.dr, move.dc);
setTimeout(focusGrid, 0);
};
// commit a value typed into the Excel-style formula bar (text-like columns only)
const commitBar = (value) => {
if(!sel) return;
const col = cols.find(c => c.key === sel.colKey);
if(!col || col.type==='select' || col.type==='multi' || col.type==='track' || col.type==='checkbox') return;
let v = value == null ? '' : value;
if(col.num){ const s = String(v); v = s.trim()===''? null : parseFloat(s.replace(/[^0-9.\-]/g,'')); if(isNaN(v)) v = null; }
const row = PStore.getRows().find(r => r.id === sel.rowId);
const cur = row ? (col.num ? (row[col.key]==null?null:row[col.key]) : (row[col.key]==null?'':String(row[col.key]))) : '';
if(String(cur) === String(v)) return; // no-op (e.g. Enter then blur) — don't double-commit or pollute undo
PStore.patchCell(sel.rowId, sel.colKey, v);
};
const moveSel = (dr, dc) => {
const { flatRows, cols } = navRef.current;
if(!sel){ if(flatRows[0]) setSel({ rowId: flatRows[0].id, colKey: cols[0].key }); return; }
let ri = flatRows.findIndex(r => r.id === sel.rowId);
let ci = cols.findIndex(c => c.key === sel.colKey);
if(ri<0) ri = 0; if(ci<0) ci = 0;
ri = Math.max(0, Math.min(flatRows.length-1, ri+dr));
ci = Math.max(0, Math.min(cols.length-1, ci+dc));
const next = flatRows[ri];
if(next) setSel({ rowId: next.id, colKey: cols[ci].key });
};
const onGridKey = (e) => {
if(editing || pop || colMenu || addCol) return;
if(!sel) return;
const col = cols.find(c => c.key === sel.colKey);
const k = e.key;
if(k==='ArrowDown'){ e.preventDefault(); moveSel(1,0); }
else if(k==='ArrowUp'){ e.preventDefault(); moveSel(-1,0); }
else if(k==='ArrowRight'){ e.preventDefault(); moveSel(0,1); }
else if(k==='ArrowLeft'){ e.preventDefault(); moveSel(0,-1); }
else if(k==='Tab'){ e.preventDefault(); moveSel(0, e.shiftKey?-1:1); }
else if(k==='Enter'){
e.preventDefault();
if(col.type==='select'||col.type==='multi') openPicker(sel.rowId, col);
else if(col.type==='track') openTrackPicker(sel.rowId, col);
else if(col.type==='checkbox'){ const r = rows.find(x=>x.id===sel.rowId); PStore.patchCell(sel.rowId, sel.colKey, !r[sel.colKey]); }
else if(col.type!=='contact'||true) beginEdit(sel.rowId, col);
}
else if(k==='Backspace'||k==='Delete'){
e.preventDefault();
if(col.type==='multi') PStore.patchCell(sel.rowId, sel.colKey, []);
else if(col.type==='checkbox') PStore.patchCell(sel.rowId, sel.colKey, false);
else PStore.patchCell(sel.rowId, sel.colKey, col.num?null:'');
}
else if(k.length===1 && !e.metaKey && !e.ctrlKey && !e.altKey){
if(col.type==='select'||col.type==='multi'){ openPicker(sel.rowId, col); }
else if(col.type!=='checkbox'){ e.preventDefault(); beginEdit(sel.rowId, col, k); }
}
};
const toggleGroup = (key) => setCollapsed(s => { const n = new Set(s); n.has(key)?n.delete(key):n.add(key); return n; });
const openProfile = (row) => { if(row.isContact) Store.openPerson(row.id); };
// totals (only the rows currently shown)
const totalCheck = shownRows.reduce((s,r) => s + (typeof r.check==='number'? r.check : 0), 0);
// width of a column, honoring an in-progress drag
const wOf = (col) => (liveW && liveW.key===col.key) ? liveW.w : col.w;
// drag a column's right edge to resize; commit to the store on release
const startResize = (e, col) => {
e.preventDefault(); e.stopPropagation();
const startX = e.clientX, startW = col.w;
document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none';
const onMove = (ev) => setLiveW({ key: col.key, w: Math.max(72, startW + (ev.clientX - startX)) });
const onUp = (ev) => {
const w = Math.max(72, startW + (ev.clientX - startX));
window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp);
document.body.style.cursor = ''; document.body.style.userSelect = '';
setLiveW(null); PStore.setColWidth(col.key, w);
};
window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp);
};
const autoFit = (col) => { // double-click the grip → reset to default width
const def = PStore.cols(); // base widths live in BASE_COLS; clear override
PStore.setColWidth(col.key, (window.RaisePipe.BASE_COLS.find(b=>b.key===col.key)||{}).w || 150);
};
// show a hover box with full text only when the cell content is actually clipped
const showTip = (e, text) => {
const el = e.currentTarget;
if(el.scrollWidth > el.clientWidth + 1){
const r = el.getBoundingClientRect();
setTip({ text, x: Math.round(r.left), y: Math.round(r.bottom + 5) });
}
};
const hideTip = () => setTip(null);
// drag a column header onto another to reorder (the frozen Contact column stays pinned)
const onColDragStart = (e, col) => {
if(col.frozen){ e.preventDefault(); return; }
setDragCol(col.key); hideTip(); e.dataTransfer.effectAllowed = 'move';
try { e.dataTransfer.setData('text/plain', col.key); } catch(x){}
};
const onColDragOver = (e, col) => {
if(!dragCol || col.frozen) return;
e.preventDefault(); e.dataTransfer.dropEffect = 'move';
if(overCol !== col.key) setOverCol(col.key);
};
const onColDrop = (e, col) => {
e.preventDefault();
const k = dragCol; setOverCol(null); setDragCol(null);
if(!k || col.frozen || k === col.key) return;
PStore.moveColumn(k, col.key);
};
const onColDragEnd = () => { setDragCol(null); setOverCol(null); };
const gutterW = 42;
const tableW = gutterW + cols.reduce((s,c) => s+wOf(c), 0) + 44;
const colSpanAll = cols.length + 2;
const PIVOTS = [['all','All'],['icp','By ICP'],['tier','By Tier'],['stage','By Stage'],['source','By Source']];
// ── cell renderer ──
const renderCell = (row, col) => {
const isSel = sel && sel.rowId===row.id && sel.colKey===col.key;
const v = row[col.key];
const refKey = `${row.id}:${col.key}`;
const tdProps = {
key: col.key, ref: el => { cellRefs.current[refKey] = el; },
className: (col.frozen?'gfrozen ':'') + (isSel?'sel':'') + (isSel&&editing?' editing':''),
style: { width: wOf(col), minWidth: wOf(col), maxWidth: wOf(col) },
onClick: () => selectCell(row.id, col.key, { openEditor: col.type==='select'||col.type==='multi'||col.type==='track' }),
onDoubleClick: () => { if(col.type==='text'||col.type==='number'||col.type==='currency'||col.type==='date'||col.type==='copy') selectCell(row.id, col.key, { openEditor:true }); },
};
// editing input
if(isSel && editing && (col.type==='text'||col.type==='number'||col.type==='currency'||col.type==='date'||col.type==='contact'||col.type==='copy')){
return (
commitEdit(val, move)}
onCancel={() => { setEditing(false); setTimeout(focusGrid,0); }} />
|
);
}
let inner;
if(col.type==='contact'){
inner = (
{RS.initials(v||'· ·')}{row.anchor && ★}
showTip(e, v || 'Untitled')} onMouseLeave={hideTip}
onClick={e => { if(row.isContact){ e.stopPropagation(); openProfile(row); } }}>
{v || 'Untitled'}
);
} else if(col.type==='select'){
inner =
{v ? : —}
;
} else if(col.type==='track'){
inner =
;
} else if(col.type==='copy'){
inner =
;
} else if(col.type==='multi'){
const arr = Array.isArray(v)?v:[];
inner =
{arr.length? arr.map(x => ) : —}
;
} else if(col.type==='checkbox'){
inner =
{ e.stopPropagation(); PStore.patchCell(row.id, col.key, !v); }}>{v?'✓':''}
;
} else {
const disp = fmt(col, v);
inner =
disp!=='' && showTip(e, disp)} onMouseLeave={hideTip}>{disp===''?'—':disp}
;
}
return
{inner} | ;
};
return (
r.stage!=='Identified').length} active · ${rows.filter(r=>r.stage==='Identified').length} in universe`}>
{view==='board' ? (
<>
Drag a card between columns to advance or regress a stage.
{[['comfortable','Comfortable'],['compact','Compact'],['swimlanes','Swimlanes']].map(([id,lbl]) =>
)}
) : (
<>
{PIVOTS.map(([id,lbl]) => )}
{pivot !== 'all' && (
)}
{(() => {
const selRow = sel && rows.find(r => r.id === sel.rowId);
const selCol = sel && cols.find(c => c.key === sel.colKey);
const ref = (selRow && selCol) ? `${selRow.name || 'Untitled'} · ${selCol.label}` : 'No cell selected';
const isPicker = selCol && (selCol.type==='select' || selCol.type==='multi' || selCol.type==='track' || selCol.type==='checkbox');
const raw = (selRow && selCol) ? selRow[selCol.key] : '';
const disp = !selCol ? '' :
selCol.type==='multi' ? (Array.isArray(raw) ? raw.join(', ') : '') :
selCol.type==='checkbox' ? (raw ? 'TRUE' : 'FALSE') :
(raw==null ? '' : String(raw));
return (
{ref}
ƒx
{!sel ? (
Click a cell to edit its content here
) : isPicker ? (
) : (
{ if(e.key==='Enter'){ e.preventDefault(); commitBar(e.target.value); e.target.blur(); } if(e.key==='Escape'){ e.target.value = disp; e.target.blur(); } }}
onBlur={e => commitBar(e.target.value)} />
)}
);
})()}
|
{cols.map(col => (
onColDragStart(e, col)}
onDragOver={e => onColDragOver(e, col)}
onDrop={e => onColDrop(e, col)}
onDragEnd={onColDragEnd}>
toggleSort(col.key)}>
{col.label}
{sort.key===col.key && {sort.dir==='asc'?'▲':'▼'}}
startResize(e, col)} onDoubleClick={e => { e.stopPropagation(); autoFit(col); }} />
|
))}
|
{groups.map(g => {
const isCol = collapsed.has(g.key);
const sum = g.rows.reduce((s,r) => s + (typeof r.check==='number'?r.check:0), 0);
return (
{g.label!==null && (
toggleGroup(g.key)}>
{g.color ? : {g.label}}
{g.rows.length}
{RS.money(sum)} capital
|
)}
{!isCol && g.rows.map((row, i) => (
|
{i+1}
|
{cols.map(col => renderCell(row, col))}
|
))}
);
})}
Rows {shownRows.length}
Total capital {RS.money(totalCheck)}
)}
{pop &&
{ setPop(null); setTimeout(focusGrid,0); }} />}
{trackPop && { setTrackPop(null); setTimeout(focusGrid,0); }} />}
{colMenu && setColMenu(null)} />}
{addCol && setAddCol(false)} />}
{tip && {tip.text}
}
);
}
window.TabPipeline = TabPipeline;