\n
\n \n \n
(\n \n )}>\n {(close) => (\n <>\n \n \n {sd && }\n \n \n {(config.frozen ?? 1) > 1 && }\n \n \n )}\n \n {header.column.getCanResize() && (\n
e.stopPropagation()}\n className=\"absolute right-0 top-0 h-full w-1 cursor-col-resize opacity-0 group-hover/h:opacity-100 hover:bg-[var(--color-focus)]\"\n style={{ touchAction: \"none\" }} />\n )}\n
\n );\n}\n\n/** Перетаскиваемая строка-обёртка (drag-reorder через ручку-grip). */\nfunction RowDnd({ id, children }: { id: number; children: (drag: { ref: (el: HTMLElement | null) => void; listeners: any; attributes: any }) => ReactNode }) {\n const drop = useDroppable({ id: `row:${id}` });\n const drag = useDraggable({ id: `row:${id}` });\n return (\n
\n {children({ ref: drag.setNodeRef, listeners: drag.listeners, attributes: drag.attributes })}\n
\n );\n}\n\nexport default function TableView({\n fields, rows, config, onEdit, onConfigChange, onAddRow, onDeleteRows, onDuplicateRow, onReorderRow, loading, error, onRetry,\n}: {\n fields: Field[];\n rows: Row[];\n config: ViewConfig;\n onEdit: (rowId: number, fieldId: string, value: any) => void;\n onConfigChange: (c: ViewConfig) => void;\n onAddRow?: () => void;\n onDeleteRows?: (ids: number[]) => void;\n onDuplicateRow?: (id: number) => void;\n onReorderRow?: (activeId: number, overId: number) => void;\n loading?: boolean;\n error?: string | null;\n onRetry?: () => void;\n}) {\n const [expanded, setExpanded] = useState
(true);\n const [rowSelection, setRowSelection] = useState({});\n const [openRow, setOpenRow] = useState(null);\n const [dragRow, setDragRow] = useState(null);\n const [agg, setAgg] = useState>({});\n const [active, setActive] = useState<{ r: number; c: string } | null>(null);\n const [fill, setFill] = useState<{ startR: number; col: string; endR: number } | null>(null);\n const parentRef = useRef(null);\n const rowsRef = useRef(rows); rowsRef.current = rows;\n const editRef = useRef<(rowId: number, fieldId: string, value: any) => void>(() => {});\n const undoStack = useRef([]);\n const redoStack = useRef([]);\n\n const data = useMemo(\n () => rows.filter((row) => evalFilters(row, config)),\n [rows, config.filters, config.filterTree, config.conjunction]\n );\n\n const columns = useMemo[]>(\n () => fields.map((f) => ({\n id: f.id, accessorKey: f.id, header: f.name, size: f.width ?? 140,\n minSize: 60, enableGrouping: true,\n aggregationFn: f.type === \"number\" ? \"sum\" : undefined,\n meta: { field: f },\n cell: (ctx) => renderCell(\n f,\n f.type === \"formula\" || f.type === \"rollup\" ? computeValue(f, ctx.row.original, fields) : ctx.row.original[f.id],\n (v) => editRef.current(ctx.row.original.id, f.id, v),\n ),\n })),\n [fields]\n );\n\n const grouping = config.grouping ? [config.grouping] : [];\n const columnVisibility = Object.fromEntries(config.hidden.map((h) => [h, false]));\n const columnOrder = config.fieldOrder ?? fields.map((f) => f.id);\n const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));\n\n const table = useReactTable({\n data, columns,\n state: { sorting: config.sorting, grouping, columnVisibility, columnOrder, globalFilter: config.search, expanded, rowSelection },\n onExpandedChange: setExpanded,\n onRowSelectionChange: setRowSelection,\n enableRowSelection: true,\n getRowId: (r) => String(r.id),\n globalFilterFn: \"includesString\",\n columnResizeMode: \"onChange\",\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getGroupedRowModel: getGroupedRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n enableGrouping: true,\n manualPagination: true,\n });\n\n const rowsModel = table.getRowModel().rows;\n const h = ROW_H[config.rowHeight];\n const virt = useVirtualizer({\n count: rowsModel.length, getScrollElement: () => parentRef.current,\n estimateSize: () => h, overscan: 14,\n });\n\n const leafCols = table.getVisibleLeafColumns();\n const firstId = leafCols[0]?.id;\n const totalW = table.getTotalSize();\n const frozenCount = config.frozen ?? 1;\n const frozenLeft: Record = {};\n { let acc = 0; leafCols.forEach((c, i) => { if (i < frozenCount) { frozenLeft[c.id] = acc; acc += c.getSize(); } }); }\n const groupField = fields.find((f) => f.id === config.grouping);\n const leaves = table.getFilteredRowModel().flatRows.filter((r) => !r.getIsGrouped());\n const selCount = Object.keys(rowSelection).length;\n const stickyBg = \"var(--color-card)\";\n const rowTint = (r: Row) => rowColor(config, r, fields);\n const wrap = !!config.wrap;\n const numFields = fields.filter((f) => f.type === \"number\" && !config.hidden.includes(f.id));\n const rowsDraggable = !!onReorderRow && !config.grouping && config.sorting.length === 0;\n\n /* ── правка / история / буфер / fill-handle ─────────────────────────── */\n const colById = (id: string) => fields.find((f) => f.id === id);\n const visibleLeafIds = leafCols.map((c) => c.id);\n const rowAtIndex = (i: number): Row | null => { const rm = rowsModel[i]; return rm && !rm.getIsGrouped() ? (rm.original as Row) : null; };\n const cellText = (row: Row, f: Field) => { const v = row[f.id]; return v == null ? \"\" : Array.isArray(v) ? v.join(\",\") : String(v); };\n const coerce = (f: Field, raw: string): any => {\n if (raw === \"\") return null;\n if (f.type === \"number\") { const n = Number(raw); return Number.isNaN(n) ? null : n; }\n if (f.type === \"checkbox\") return [\"true\", \"1\", \"да\", \"✓\", \"yes\"].includes(raw.toLowerCase());\n if (f.type === \"multiselect\") return raw.split(\",\").map((s) => s.trim()).filter(Boolean);\n return raw;\n };\n const pushHistory = (batch: CellEdit[]) => { if (!batch.length) return; undoStack.current.push(batch); if (undoStack.current.length > 100) undoStack.current.shift(); redoStack.current = []; };\n const handleEdit = (rowId: number, fieldId: string, value: any) => {\n const old = rowsRef.current.find((r) => r.id === rowId)?.[fieldId];\n pushHistory([{ rowId, fieldId, old, new: value }]);\n onEdit(rowId, fieldId, value);\n };\n editRef.current = handleEdit;\n const applyBatch = (edits: { rowId: number; fieldId: string; value: any }[]) => {\n if (!edits.length) return;\n const batch: CellEdit[] = edits.map((e) => ({ rowId: e.rowId, fieldId: e.fieldId, old: rowsRef.current.find((r) => r.id === e.rowId)?.[e.fieldId], new: e.value }));\n pushHistory(batch);\n edits.forEach((e) => onEdit(e.rowId, e.fieldId, e.value));\n };\n const undo = () => { const b = undoStack.current.pop(); if (!b) return; [...b].reverse().forEach((e) => onEdit(e.rowId, e.fieldId, e.old)); redoStack.current.push(b); };\n const redo = () => { const b = redoStack.current.pop(); if (!b) return; b.forEach((e) => onEdit(e.rowId, e.fieldId, e.new)); undoStack.current.push(b); };\n const copySel = () => {\n let text = \"\";\n if (Object.keys(rowSelection).length > 0) {\n const cols = leafCols.map((c) => colById(c.id)).filter(Boolean) as Field[];\n const selRows = leaves.filter((r) => r.getIsSelected()).map((r) => r.original as Row);\n text = selRows.map((row) => cols.map((f) => cellText(row, f)).join(\"\\t\")).join(\"\\n\");\n } else if (active) {\n const row = rowAtIndex(active.r); const f = colById(active.c);\n if (row && f) text = cellText(row, f);\n }\n if (text) navigator.clipboard?.writeText(text);\n };\n const pasteAt = (text: string) => {\n if (!active || !text) return;\n const startCol = visibleLeafIds.indexOf(active.c); if (startCol < 0) return;\n const matrix = text.replace(/\\r/g, \"\").replace(/\\n$/, \"\").split(\"\\n\").map((l) => l.split(\"\\t\"));\n const edits: { rowId: number; fieldId: string; value: any }[] = [];\n matrix.forEach((line, ri) => {\n const row = rowAtIndex(active.r + ri); if (!row) return;\n line.forEach((cv, ci) => {\n const colId = visibleLeafIds[startCol + ci]; if (!colId) return;\n const f = colById(colId); if (!f || f.editable === false) return;\n edits.push({ rowId: row.id, fieldId: colId, value: coerce(f, cv) });\n });\n });\n applyBatch(edits);\n };\n const onFillStart = (e: any) => {\n e.preventDefault(); e.stopPropagation();\n if (!active) return;\n const col = active.c, startR = active.r;\n const findR = (cx: number, cy: number) => { const cell = (document.elementFromPoint(cx, cy) as HTMLElement | null)?.closest(\"[data-r]\") as HTMLElement | null; return cell ? Number(cell.dataset.r) : startR; };\n const move = (ev: PointerEvent) => setFill({ startR, col, endR: Math.max(findR(ev.clientX, ev.clientY), startR) });\n const upFn = (ev: PointerEvent) => {\n document.removeEventListener(\"pointermove\", move); document.removeEventListener(\"pointerup\", upFn);\n const endR = Math.max(findR(ev.clientX, ev.clientY), startR); setFill(null);\n const src = rowAtIndex(startR), f = colById(col);\n if (src && f && f.editable !== false && endR > startR) {\n const val = src[col]; const edits: { rowId: number; fieldId: string; value: any }[] = [];\n for (let i = startR + 1; i <= endR; i++) { const row = rowAtIndex(i); if (row) edits.push({ rowId: row.id, fieldId: col, value: val }); }\n applyBatch(edits);\n }\n };\n document.addEventListener(\"pointermove\", move); document.addEventListener(\"pointerup\", upFn);\n };\n\n const setSort = (id: string, desc: boolean) =>\n onConfigChange({ ...config, sorting: [...config.sorting.filter((s) => s.id !== id), { id, desc }] });\n const clearSort = (id: string) => onConfigChange({ ...config, sorting: config.sorting.filter((s) => s.id !== id) });\n const hideField = (id: string) => onConfigChange({ ...config, hidden: [...config.hidden, id] });\n const groupBy = (id: string | null) => onConfigChange({ ...config, grouping: id });\n const setFrozen = (n: number) => onConfigChange({ ...config, frozen: n });\n const onColDragEnd = (e: DragEndEvent) => {\n const { active, over } = e;\n if (over && active.id !== over.id) {\n const cur = config.fieldOrder ?? fields.map((f) => f.id);\n onConfigChange({ ...config, fieldOrder: arrayMove(cur, cur.indexOf(active.id as string), cur.indexOf(over.id as string)) });\n }\n };\n const onRowDragEnd = (e: DragEndEvent) => {\n setDragRow(null);\n const { active, over } = e;\n if (!over || active.id === over.id) return;\n onReorderRow?.(Number(String(active.id).replace(\"row:\", \"\")), Number(String(over.id).replace(\"row:\", \"\")));\n };\n\n const groupAgg = (subRows: typeof rowsModel, f: Field) =>\n formatNumber(subRows.reduce((s, sr) => s + (Number((sr.original as any)[f.id]) || 0), 0), f);\n\n return (\n \n {/* toolbar выделения */}\n {selCount > 0 && (\n
\n {selCount} выбрано\n {onDeleteRows && (\n \n )}\n \n
\n )}\n\n
{ const c = (e.target as HTMLElement).closest(\"[data-r]\") as HTMLElement | null; if (c) setActive({ r: Number(c.dataset.r), c: c.dataset.c! }); }}\n onKeyDown={(e) => {\n const el = e.target as HTMLElement;\n const tag = el.tagName;\n const isText = tag === \"INPUT\" && (el as HTMLInputElement).type === \"text\";\n const mod = e.metaKey || e.ctrlKey;\n if (mod && (e.key === \"z\" || e.key === \"Z\")) { e.preventDefault(); e.shiftKey ? redo() : undo(); return; }\n if (mod && (e.key === \"y\" || e.key === \"Y\")) { e.preventDefault(); redo(); return; }\n if (mod && (e.key === \"c\" || e.key === \"C\")) { const s = window.getSelection?.(); if (Object.keys(rowSelection).length > 0 || (active && !(isText && s && String(s).length))) { e.preventDefault(); copySel(); } return; }\n if (mod && (e.key === \"v\" || e.key === \"V\")) { if (active) { e.preventDefault(); navigator.clipboard?.readText().then(pasteAt).catch(() => {}); } return; }\n const cell = el.closest(\"[data-r]\") as HTMLElement | null;\n if (!cell) return;\n const isField = tag === \"INPUT\" || tag === \"SELECT\";\n if (e.key === \"Escape\") { (el as HTMLInputElement).blur?.(); return; }\n const move = (dir: -1 | 1) => {\n const r = Number(cell.dataset.r); const c = cell.dataset.c;\n const tr = r + dir;\n if (tr < 0 || tr >= rowsModel.length) return;\n e.preventDefault();\n virt.scrollToIndex(tr, { align: \"auto\" });\n requestAnimationFrame(() => requestAnimationFrame(() => {\n const t = parentRef.current?.querySelector(`[data-r=\"${tr}\"][data-c=\"${c}\"]`) as HTMLElement | null;\n (t?.querySelector(\"input,select,button\") as HTMLElement | null)?.focus();\n }));\n };\n if (e.key === \"ArrowDown\") { if (!isText) move(1); }\n else if (e.key === \"ArrowUp\") { if (!isText) move(-1); }\n else if (e.key === \"Enter\" && isField) move(1);\n }}>\n {error ? (\n
\n
\n
{error}\n {onRetry && (\n
\n )}\n
\n ) : loading ? (\n
\n {Array.from({ length: 8 }).map((_, i) => (\n
\n ))}\n
\n ) : (\n
\n {/* header */}\n
\n
\n {table.getHeaderGroups().map((hg) => (\n he.column.id)} strategy={horizontalListSortingStrategy}>\n \n {hg.headers.map((header, ci) => (\n \n ))}\n
\n \n ))}\n \n
\n\n {/* body */}\n
setDragRow(Number(String(e.active.id).replace(\"row:\", \"\")))} onDragEnd={onRowDragEnd}>\n \n {rowsModel.length === 0 && (\n
\n \n Нет записей\n
\n )}\n {virt.getVirtualItems().map((vi) => {\n const row = rowsModel[vi.index];\n const style: CSSProperties = {\n position: \"absolute\", top: 0, left: 0, width: \"100%\",\n height: wrap ? undefined : vi.size, transform: `translateY(${vi.start}px)`,\n };\n if (row.getIsGrouped()) {\n const val = String(row.getGroupingValue(config.grouping!) ?? \"\");\n const opt = groupField?.options?.find((o) => o.value === val);\n return (\n
\n \n {groupField?.type === \"select\" || groupField?.type === \"status\"\n ? \n : {val || \"—\"}}\n {row.subRows.length}\n {numFields.map((f) => (\n Σ {f.name} {groupAgg(row.subRows as any, f)}\n ))}\n
\n );\n }\n const sel = row.getIsSelected();\n const tint = rowTint(row.original);\n const rowInner = (drag?: { ref: (el: HTMLElement | null) => void; listeners: any; attributes: any }) => (\n
\n {row.getVisibleCells().map((cell) => {\n const f = (cell.column.columnDef.meta as any)?.field as Field;\n const isFirst = cell.column.id === firstId;\n const left = frozenLeft[cell.column.id];\n const frozen = left !== undefined;\n const num = f?.type === \"number\";\n const isActiveCell = active?.r === vi.index && active.c === cell.column.id;\n const inFill = !!fill && fill.col === cell.column.id && vi.index > fill.startR && vi.index <= fill.endR;\n return (\n
\n {isFirst && (\n
\n {rowsDraggable && drag && (\n \n \n \n )}\n \n \n {(onDuplicateRow || onDeleteRows) && (\n \n }>\n {(close) => (\n <>\n \n {onDuplicateRow && }\n {onDeleteRows && }\n \n )}\n \n \n )}\n \n )}\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {isActiveCell && (\n
\n )}\n
\n );\n })}\n
\n );\n return (\n
\n {rowsDraggable ? {(drag) => rowInner(drag)} : rowInner()}\n
\n );\n })}\n
{t ? String(r[t.id] ?? \"—\") : `#${r.id}`}
: null;\n })()}\n \n \n
\n )}\n
\n\n {onAddRow && (\n
\n )}\n\n {/* footer — кликабельные агрегаты */}\n
\n count {leaves.length}\n {numFields.map((f) => {\n const mode = agg[f.id] ?? \"sum\";\n const vals = leaves.map((r) => (r.original as any)[f.id]);\n const nums = vals.map((v) => Number(v) || 0);\n const sum = nums.reduce((a, b) => a + b, 0);\n const emptyCount = vals.filter((v) => v == null || v === \"\").length;\n const raw =\n mode === \"sum\" ? sum\n : mode === \"avg\" ? (nums.length ? sum / nums.length : 0)\n : mode === \"min\" ? (nums.length ? Math.min(...nums) : 0)\n : mode === \"max\" ? (nums.length ? Math.max(...nums) : 0)\n : mode === \"count\" ? nums.length : 0;\n const out = mode === \"count\" ? nums.length\n : mode === \"empty\" ? (vals.length ? `${Math.round((emptyCount / vals.length) * 100)}%` : \"0%\")\n : formatNumber(mode === \"avg\" ? Number(raw.toFixed(2)) : raw, f);\n return (\n \n );\n })}\n
\n\n {openRow != null && (() => {\n const r = rows.find((x) => x.id === openRow);\n return r ?
setOpenRow(null)} /> : null;\n })()}\n Нет поля-даты для таймлайна.
;\n const xOf = (v: any) => ((t(v) - min) / span) * 100;\n\n const pctAt = (clientX: number) => {\n const r = trackRef.current?.getBoundingClientRect();\n if (!r || r.width === 0) return 0;\n return Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100));\n };\n const dateAtPct = (pct: number) => new Date(min + (pct / 100) * span).toISOString().slice(0, 10);\n const startResize = (e: any, id: number, edge: \"l\" | \"r\") => {\n e.preventDefault(); e.stopPropagation();\n const move = (ev: PointerEvent) => setResize({ id, edge, pct: pctAt(ev.clientX) });\n const up = (ev: PointerEvent) => {\n document.removeEventListener(\"pointermove\", move); document.removeEventListener(\"pointerup\", up);\n const date = dateAtPct(pctAt(ev.clientX)); setResize(null);\n const row = data.find((x) => x.id === id);\n if (!row || !onEdit) return;\n if (rangeF) { const cur = row[rangeF.id] || {}; onEdit(id, rangeF.id, edge === \"r\" ? { start: cur.start, end: date } : { start: date, end: cur.end }); }\n else if (edge === \"r\" && endF) onEdit(id, endF.id, date);\n else if (edge === \"l\" && startF) onEdit(id, startF.id, date);\n };\n document.addEventListener(\"pointermove\", move); document.addEventListener(\"pointerup\", up);\n };\n\n // детерминированная геометрия: лента на лейн, отдельная под-строка на запись\n const lanes = laneField ? [...(laneField.options ?? []), { value: \"\", color: undefined }] : [{ value: \"\", color: undefined }];\n const geom = new Map();\n const bands: { value: string; color?: string; top: number; h: number; rows: Row[] }[] = [];\n let y = HEADER;\n for (const lane of lanes) {\n const laneRows = data.filter((r) => String(laneField ? r[laneField.id] ?? \"\" : \"\") === lane.value)\n .sort((a, b) => t(getStart(a)) - t(getStart(b)));\n if (laneRows.length === 0 && lane.value !== \"\") continue;\n const top = y;\n laneRows.forEach((r, idx) => {\n const yc = top + idx * ROW + ROW / 2;\n geom.set(r.id, { x1: xOf(getStart(r)), x2: hasRange && iso(getEnd(r)) ? xOf(getEnd(r)) : null, yc });\n });\n const h = Math.max(laneRows.length, 1) * ROW;\n bands.push({ value: lane.value, color: (lane as any).color, top, h, rows: laneRows });\n y += h + LANE_GAP;\n }\n const totalH = y + 8;\n\n return (\n \n
\n {/* лейблы лейнов слева */}\n {bands.map((b) => (\n
\n {laneField && b.value ? : {b.value || \"—\"}}\n
\n ))}\n\n {/* трек справа от лейблов */}\n
\n {/* шкала */}\n
\n {ticks.map((tk, i) => (\n
{tk.label}
\n ))}\n
\n {/* вертикальные линии сетки */}\n {ticks.map((tk, i) => (\n
\n ))}\n {/* фон лент */}\n {bands.map((b) => (\n
\n ))}\n {/* стрелки зависимостей */}\n {deps.length > 0 && (\n
\n )}\n {/* бары / точки */}\n {data.map((r) => {\n const g = geom.get(r.id); if (!g) return null;\n const lane = lanes.find((l) => String(laneField ? r[laneField.id] ?? \"\" : \"\") === l.value);\n const c = (lane as any)?.color || \"#9b9b9b\";\n const crit = critical.nodes.has(r.id);\n const tip = `${title ? String(r[title.id] ?? \"\") : r.id} · ${iso(getStart(r))}${g.x2 != null ? \"–\" + iso(getEnd(r)) : \"\"}${crit ? \" · крит. путь\" : \"\"}`;\n if (g.x2 != null && g.x2 > g.x1) {\n let x1 = g.x1, x2 = g.x2;\n if (resize?.id === r.id) { if (resize.edge === \"r\") x2 = Math.max(resize.pct, x1 + 0.3); else x1 = Math.min(resize.pct, x2 - 0.3); }\n return (\n
\n {onEdit && (\n <>\n startResize(e, r.id, \"l\")} title=\"Сдвинуть начало\" className=\"absolute left-0 top-0 h-full w-1.5 rounded-l-full cursor-ew-resize opacity-0 group-hover/bar:opacity-100\" style={{ background: \"var(--color-ink)\" }} />\n startResize(e, r.id, \"r\")} title=\"Сдвинуть конец\" className=\"absolute right-0 top-0 h-full w-1.5 rounded-r-full cursor-ew-resize opacity-0 group-hover/bar:opacity-100\" style={{ background: \"var(--color-ink)\" }} />\n \n )}\n
\n );\n }\n return (\n
\n );\n })}\n
\n
\n {hasRange ? `Бар = период (${rangeF ? rangeF.name : `${startF?.name}–${endF?.name}`})` : \"Точка = дата\"}. Наведи для названия.\n
\n
\n
\n {/* табы сохранённых вью */}\n
\n {views.map((v, i) => {\n const I = VIEW_ICON[v.type];\n return (\n
\n );\n })}\n
\n
\n\n {/* контролы вью */}\n
\n
(\n \n )}>\n {(close) => (\n \n {(Object.keys(VIEW_LABEL) as ViewType[]).map((tp) => {\n const I = VIEW_ICON[tp];\n return (\n \n );\n })}\n
\n )}\n \n\n
\n \n up({ search: e.target.value })}\n className=\"form-input\" style={{ paddingLeft: 28, paddingTop: 5, paddingBottom: 5, minWidth: 180 }} />\n
\n\n {/* фильтр + чипы активных условий (дерево AND/OR) */}\n {(() => {\n const root = rootGroup(config);\n const n = countLeaves(root);\n const nested = hasNesting(root);\n const setRoot = (children: typeof root.children) => up({ filterTree: { ...root, children }, filters: flattenLeaves({ ...root, children }), conjunction: root.conjunction });\n const chip = \"inline-flex items-center gap-1 px-2 py-1 rounded-[6px] text-[12px] cursor-pointer\";\n const accent = { background: \"color-mix(in srgb, var(--color-acc) 14%, transparent)\", color: \"var(--color-acc)\" };\n return (\n
(\n \n \n {n > 0 && nested && (\n \n {n} {n === 1 ? \"условие\" : \"условий\"} ({root.conjunction === \"and\" ? \"все\" : \"любое\"} + группы)\n \n \n )}\n {n > 0 && !nested && root.children.map((c, i) => {\n const d = describeFilter(fields, c as FilterRule);\n return (\n \n {d.name} {d.op} {d.value && {d.value}}\n \n \n );\n })}\n \n )}>\n {() => }\n \n );\n })()}\n\n {/* сортировка + чипы */}\n
(\n \n \n {config.sorting.map((s, i) => {\n const name = fields.find((f) => f.id === s.id)?.name ?? s.id;\n return (\n \n {s.desc ? \"↓\" : \"↑\"} {name}\n \n \n );\n })}\n \n )}>\n {() => }\n \n\n
(\n \n )}>\n {(close) => (\n \n \n {fields.map((f) => (\n \n ))}\n
\n )}\n \n\n
(\n \n )}>\n {() => (\n \n {fields.map((f) => (\n \n ))}\n
\n )}\n \n\n
(\n \n )}>\n {() => {\n const rules = config.colorRules ?? [];\n const setRules = (r: typeof rules) => up({ colorRules: r });\n return (\n \n
\n
По полю
\n
\n {fields.filter((f) => f.type === \"select\" || f.type === \"status\").map((f) => (\n
\n ))}\n
\n
\n
По условию
\n {rules.map((rule, i) => (\n
\n
\n setRules(rules.map((r, j) => (j === i ? { ...r, color: e.target.value } : r)))}\n style={{ width: 26, height: 22, padding: 0, border: \"none\", background: \"none\" }} />\n пример строки\n \n
\n
setRules(rules.map((r, j) => (j === i ? { ...r, filter: g } : r)))} />\n \n ))}\n
\n
\n
\n\n
(\n \n )}>\n {() => (\n \n {([[\"s\", \"компактно\"], [\"m\", \"средне\"], [\"l\", \"просторно\"]] as const).map(([v, l]) => (\n \n ))}\n \n
\n )}\n \n
\n
\n onChange(e.target.value)} onBlur={close}\n style={{ colorScheme: \"dark\" } as any} />\n
\n )}\n \n );\n}\n\nfunction NumberCell({ field, value, onChange }: { field: Field; value: any; onChange: (v: any) => void }) {\n const [editing, setEditing] = useState(false);\n if (editing) {\n return (\n e.target.select()}\n onBlur={(e) => { const v = e.target.value; onChange(v === \"\" ? null : Number(v)); setEditing(false); }}\n onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \"Escape\") (e.target as HTMLInputElement).blur(); }}\n className=\"cell-input cell-input--num\" style={{ minWidth: \"5ch\", maxWidth: \"20ch\" }} />\n );\n }\n const display = value == null || value === \"\" ? null : formatNumber(value, field);\n return (\n \n );\n}\n\nfunction TagSelect({ field, value, onChange }: { field: Field; value: any; onChange: (v: any) => void }) {\n const opt = field.options?.find((o) => o.value === value);\n const isPerson = field.type === \"person\";\n return (\n (\n \n )}\n >\n {(close) => (\n <>\n \n {field.options?.map((o) => (\n \n ))}\n \n )}\n \n );\n}\n\nfunction MultiTagSelect({ field, value, onChange }: { field: Field; value: string[]; onChange: (v: any) => void }) {\n const toggle = (v: string) => onChange(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);\n return (\n (\n \n )}>\n {() => (\n <>\n {field.options?.map((o) => (\n \n ))}\n \n )}\n \n );\n}\n\nfunction DateRangeCell({ value, onChange }: { value: any; onChange: (v: any) => void }) {\n const start = value?.start ? String(value.start).split(\"T\")[0] : \"\";\n const end = value?.end ? String(value.end).split(\"T\")[0] : \"\";\n return (\n (\n \n )}>\n {() => (\n \n \n \n
\n )}\n \n );\n}\n\nfunction RelationCell({ field, value, onChange }: { field: Field; value: any; onChange: (v: any) => void }) {\n const multi = !!field.relation?.multi;\n const toggle = (id: string) => {\n if (multi) { const arr: string[] = Array.isArray(value) ? value : []; onChange(arr.map(String).includes(id) ? arr.filter((x) => String(x) !== id) : [...arr, id]); }\n else onChange(id);\n };\n return (\n (\n \n )}>\n {(close) => (\n <>\n {!multi && }\n {field.relation?.rows.map((r) => {\n const id = String(r.id), lbl = String(r[field.relation!.labelField] ?? id);\n const checked = multi ? (Array.isArray(value) && value.map(String).includes(id)) : String(value) === id;\n return (\n \n );\n })}\n \n )}\n \n );\n}\n\nfunction LongTextCell({ value, onChange }: { value: any; onChange: (v: any) => void }) {\n return (\n