2026-08-19 18:39:11 +03:00
23 changed files with 1028 additions and 1072 deletions
--- a/web/src/components/RealtimeTable/Cell/Cell/Cell.jsx
+++ b/web/src/components/RealtimeTable/Cell/Cell/Cell.jsx
@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useRealtime } from '../../contexts/RealtimeContext';
+import { useCellLock } from '../../contexts/RealtimeContext';

 // Константы вне компонента
 const BASE_CELL_STYLES = {
@ -136,35 +136,20 @@ const createHighlightedContent = (originalValue, displayValue, searchQueries) =>
 	});
 };

-const CellComponent = ({
-	cell,
-	row,
-	column,
-	onClick,
-	globalFilter,
-	columnFilter,
-	backgroundColor,
-	color,
-	isEditable,
-	isUpdating,
-	onCellNumberClick,
-	isInvalid,
-	vspOptions,
-}) => {
-	const { lockedCells } = useRealtime();
+const CellComponent = ({ cell, row, column, onClick, globalFilter, columnFilter, backgroundColor, isEditable, isInvalid, vspOptions }) => {
 	const cellKey = `${row.id}_${column.id}`;
-	const isLocked = lockedCells.includes(cellKey);
+	const isLocked = useCellLock(cellKey);

 	const isVspDropdown = column?.columnDef?.editType === 'vsp_dropdown';

 	// Мемоизация значения
-	const { rawValue, displayValue, isNumeric } = useMemo(() => {
+	const { rawValue, displayValue } = useMemo(() => {
 		const value = cell.getValue();
 		const isNum = value !== null && value !== undefined && value !== '' && !Number.isNaN(Number(value));
 		let display = String(value || '');

 		if (isVspDropdown && value != null) {
-			const vsp = vspOptions?.find(v => v.id === Number(value));
+			const vsp = vspOptions?.find((v) => v.id === Number(value));
 			if (vsp) {
 				return { rawValue: value, displayValue: vsp.registration_number, isNumeric: false };
 			}
@ -214,7 +199,7 @@ const CellComponent = ({

 	return (
 		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
-		<div type="button" className='cell' style={cellStyles} onClick={handleClick}>
+		<div type='button' className='cell' style={cellStyles} onClick={handleClick}>
 			<span style={CONTAINER_STYLES}>{highlightedContent}</span>
 			{lockBadge}
 		</div>
@ -232,10 +217,8 @@ const Cell = React.memo(CellComponent, (prevProps, nextProps) => {
 		prevProps.backgroundColor === nextProps.backgroundColor &&
 		prevProps.isInvalid === nextProps.isInvalid &&
 		prevProps.isEditable === nextProps.isEditable &&
-		prevProps.isUpdating === nextProps.isUpdating &&
-		prevProps.onCellNumberClick === nextProps.onCellNumberClick &&
 		prevProps.vspOptions === nextProps.vspOptions
 	);
 });

-export default Cell;
+export default Cell;
--- a/web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx
+++ b/web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx
@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useRealtime } from '../../contexts/RealtimeContext';
+import { useRealtimeActions } from '../../contexts/RealtimeContext';
 import { calculateFormula, extractFormula, formatNumber, isFormula } from '../../utils/formulaUtils';
 import { loadFromStorage, saveToStorage } from '../../utils/localStorageUtils';

@ -30,7 +30,7 @@ const TEXTAREA_STYLES = {
 };

 const EditCell = memo(({ refCell, onChange, disabled, value, tableId, cellId, table }) => {
-	const { endEditing: contextEndEditing } = useRealtime();
+	const { endEditing: contextEndEditing } = useRealtimeActions();
 	const storageKey = `formula_${tableId}_${cellId}`;

 	const [state, setState] = useState(() => ({
@ -91,7 +91,7 @@ const EditCell = memo(({ refCell, onChange, disabled, value, tableId, cellId, ta
 		const resize = () => {
 			el.style.minHeight = '3rem';
 			el.style.height = '3rem';
-			el.style.height = el.scrollHeight + 'px';
+			el.style.height = `${el.scrollHeight}px`;
 			el.style.maxHeight = '180px';
 		};

--- a/web/src/components/RealtimeTable/Cell/EditCell/VspDropdownEditCell.jsx
+++ b/web/src/components/RealtimeTable/Cell/EditCell/VspDropdownEditCell.jsx
@ -1,111 +1,120 @@
-import React, { memo, useEffect, useRef, useLayoutEffect, useState, useCallback, useMemo } from 'react';
-import { FormControl, Select, MenuItem } from '@mui/material';
-import { useRealtime } from '../../contexts/RealtimeContext';
+import { FormControl, MenuItem, Select } from '@mui/material';
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useRealtimeActions, useVspOptions } from '../../contexts/RealtimeContext';

 const EDITOR_STYLES = {
-  position: 'absolute',
-  zIndex: 12,
-  top: 0,
+	position: 'absolute',
+	zIndex: 12,
+	top: 0,
 };

 const VspDropdownEditCell = memo(({ refCell, onChange, disabled, value, table }) => {
-  const { endEditing: contextEndEditing, vspOptions } = useRealtime();
+	const { endEditing: contextEndEditing } = useRealtimeActions();
+	const vspOptions = useVspOptions();

-  const [selectedValue, setSelectedValue] = useState(() => value ?? '');
-  const [position, setPosition] = useState();
-  const [open, setOpen] = useState(false);
+	const [selectedValue, setSelectedValue] = useState(() => value ?? '');
+	const [position, setPosition] = useState();
+	const [open, setOpen] = useState(false);

-  const refFinished = useRef(false);
+	const refFinished = useRef(false);

-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setOpen(true);
-    }, 80);
-    return () => clearTimeout(timer);
-  }, []);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setOpen(true);
+		}, 80);
+		return () => clearTimeout(timer);
+	}, []);

-  useLayoutEffect(() => {
-    if (!refCell?.current) return;
+	useLayoutEffect(() => {
+		if (!refCell?.current) return;

-    const td = refCell.current.offsetParent;
-    const tr = td?.offsetParent;
+		const td = refCell.current.offsetParent;
+		const tr = td?.offsetParent;

-    if (td && tr) {
-      setPosition({
-        left: td.offsetLeft,
-        width: td.offsetWidth,
-        translateY: tr.style.transform || '',
-      });
-    }
-  }, [refCell]);
+		if (td && tr) {
+			setPosition({
+				left: td.offsetLeft,
+				width: td.offsetWidth,
+				translateY: tr.style.transform || '',
+			});
+		}
+	}, [refCell]);

-  const finishEditing = useCallback(() => {
-    if (refFinished.current) return;
-    refFinished.current = true;
-    table.setEditingCell(null);
-    const editingCell = table.getState().editingCell;
-    if (editingCell) {
-      contextEndEditing?.(editingCell.row, editingCell.column);
-    }
-  }, [table, contextEndEditing]);
+	const finishEditing = useCallback(() => {
+		if (refFinished.current) return;
+		refFinished.current = true;
+		table.setEditingCell(null);
+		const editingCell = table.getState().editingCell;
+		if (editingCell) {
+			contextEndEditing?.(editingCell.row, editingCell.column);
+		}
+	}, [table, contextEndEditing]);

-  const handleSelectChange = useCallback((e) => {
-    const val = e.target.value;
-    if (val == null || val === '') return;
-    refFinished.current = true;
-    setSelectedValue(val);
-    onChange?.(val);
-    const editingCell = table.getState().editingCell;
-    if (editingCell) {
-      contextEndEditing?.(editingCell.row, editingCell.column);
-    }
-  }, [onChange, table, contextEndEditing]);
+	const handleSelectChange = useCallback(
+		(e) => {
+			const val = e.target.value;
+			if (val == null || val === '') return;
+			refFinished.current = true;
+			setSelectedValue(val);
+			onChange?.(val);
+			const editingCell = table.getState().editingCell;
+			if (editingCell) {
+				contextEndEditing?.(editingCell.row, editingCell.column);
+			}
+		},
+		[onChange, table, contextEndEditing],
+	);

-  const handleSelectClose = useCallback((_event, reason) => {
-    if (reason === 'selectOption') return;
-    finishEditing();
-  }, [finishEditing]);
+	const handleSelectClose = useCallback(
+		(_event, reason) => {
+			if (reason === 'selectOption') return;
+			finishEditing();
+		},
+		[finishEditing],
+	);

-  const editorStyles = useMemo(() => ({
-    ...EDITOR_STYLES,
-    left: position?.left || 0,
-    width: position?.width || 0,
-    transform: position?.translateY || 0,
-  }), [position]);
+	const editorStyles = useMemo(
+		() => ({
+			...EDITOR_STYLES,
+			left: position?.left || 0,
+			width: position?.width || 0,
+			transform: position?.translateY || 0,
+		}),
+		[position],
+	);

-  return (
-    <tr>
-      <td>
-        {position &&
-          <div style={editorStyles}>
-            <FormControl fullWidth size="small">
-              <Select
-                value={selectedValue}
-                onChange={handleSelectChange}
-                open={open}
-                onClose={handleSelectClose}
-                displayEmpty
-                disabled={disabled}
-                MenuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-                  transformOrigin: { vertical: 'top', horizontal: 'left' },
-                }}
-              >
-                <MenuItem value="" disabled>
-                  Выберите ВСП
-                </MenuItem>
-                {vspOptions.map((option) => (
-                  <MenuItem key={option.id} value={option.id}>
-                    {option.registration_number}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </div>
-        }
-      </td>
-    </tr>
-  );
+	return (
+		<tr>
+			<td>
+				{position && (
+					<div style={editorStyles}>
+						<FormControl fullWidth size='small'>
+							<Select
+								value={selectedValue}
+								onChange={handleSelectChange}
+								open={open}
+								onClose={handleSelectClose}
+								displayEmpty
+								disabled={disabled}
+								MenuProps={{
+									anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+									transformOrigin: { vertical: 'top', horizontal: 'left' },
+								}}>
+								<MenuItem value='' disabled>
+									Выберите ВСП
+								</MenuItem>
+								{vspOptions.map((option) => (
+									<MenuItem key={option.id} value={option.id}>
+										{option.registration_number}
+									</MenuItem>
+								))}
+							</Select>
+						</FormControl>
+					</div>
+				)}
+			</td>
+		</tr>
+	);
 });

 VspDropdownEditCell.displayName = 'VspDropdownEditCell';
--- a/web/src/components/RealtimeTable/ColumnSelectionOverlay/ColumnSelectionOverlay.jsx
+++ b/web/src/components/RealtimeTable/ColumnSelectionOverlay/ColumnSelectionOverlay.jsx
@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';

 const toLocalCoord = (value, scale) => value / scale;
@ -54,7 +54,7 @@ const getOverlayRect = (container, overlayParent, selectedColumnId, columnPinnin
 	return { top, left, width, height };
 };

-export const ColumnSelectionOverlay = ({ selectedColumnId, containerRef, scale = 1, columnSizing, columnPinning, showColumnFilters }) => {
+const ColumnSelectionOverlayComponent = ({ selectedColumnId, containerRef, scale = 1, columnSizing, columnPinning, showColumnFilters }) => {
 	const [rect, setRect] = useState(null);
 	const [portalTarget, setPortalTarget] = useState(null);

@ -135,3 +135,5 @@ export const ColumnSelectionOverlay = ({ selectedColumnId, containerRef, scale =
 		portalTarget,
 	);
 };
+
+export const ColumnSelectionOverlay = memo(ColumnSelectionOverlayComponent);
--- a/web/src/components/RealtimeTable/Modals/CreateProgramProjectModal.jsx
+++ b/web/src/components/RealtimeTable/Modals/CreateProgramProjectModal.jsx
@ -1,11 +1,11 @@
 import { Box, Divider, IconButton, Stack } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { DangerOutlinedButton, PrimaryButton } from '../../common/Buttons/Buttons';
 import { HeaderContainer, ModalBackdrop, ModalContainer, ModalTitle } from '../../common/Modal/ModalStyled';
 import { StyledTextField } from '../../common/StyledTextField';
 import { Cancel } from '../../common/icons/icons';

-export const CreateProgramModal = ({ isOpen, onClose, onCreate, title = '', isSaving = false, sheet }) => {
+const CreateProgramModalComponent = ({ isOpen, onClose, onCreate, title = '', isSaving = false }) => {
 	const [name, setName] = useState('');

 	useEffect(() => {
@ -36,7 +36,7 @@ export const CreateProgramModal = ({ isOpen, onClose, onCreate, title = '', isSa

 	return (
 		<ModalBackdrop isOpen={isOpen} onClick={handleBackdropClick}>
-			<ModalContainer height={'max-content'}>
+			<ModalContainer height='max-content'>
 				<HeaderContainer>
 					<Stack direction='row' spacing={2} sx={{ alignItems: 'center' }}>
 						<ModalTitle>{title}</ModalTitle>
@ -50,7 +50,7 @@ export const CreateProgramModal = ({ isOpen, onClose, onCreate, title = '', isSa
 					<Divider sx={{ marginBottom: '0.75rem' }} />

 					{/* <Input */}
-					<StyledTextField label={'Название программы'} onChange={(e) => setName(e.target.value)}></StyledTextField>
+					<StyledTextField label='Название программы' onChange={(e) => setName(e.target.value)} />
 					<Stack
 						direction='row'
 						spacing={0.75}
@ -72,3 +72,5 @@ export const CreateProgramModal = ({ isOpen, onClose, onCreate, title = '', isSa
 		</ModalBackdrop>
 	);
 };
+
+export const CreateProgramModal = memo(CreateProgramModalComponent);
--- a/web/src/components/RealtimeTable/Modals/SelectExpenseItemModal.jsx
+++ b/web/src/components/RealtimeTable/Modals/SelectExpenseItemModal.jsx
@ -1,17 +1,17 @@
 import { Autocomplete, Box, Divider, FormControl, IconButton, Stack, TextField } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { ExpenseItemApi } from '../../../api/expense-item';
 import { DangerOutlinedButton, PrimaryButton } from '../../common/Buttons/Buttons';
 import { HeaderContainer, ModalBackdrop, ModalContainer, ModalTitle } from '../../common/Modal/ModalStyled';
 import { Cancel } from '../../common/icons/icons';

-export const SelectExpenseItemModal = ({ isOpen, onClose, onSelect, formId, title = '', isSaving = false, sheet }) => {
+const SelectExpenseItemModalComponent = ({ isOpen, onClose, onSelect, formId, title = '', isSaving = false, sheet }) => {
 	const [selectedValue, setSelectedValue] = useState('');
 	const [expenseItemOptions, setExpenseItemOption] = useState([]);

 	useEffect(() => {
-		if (formId === null) return;
+		if (!isOpen || formId == null) return;
 		ExpenseItemApi.getAll({ r_start: true, sheet: sheet }).then((data) => {
 			if (data.success) {
 				setExpenseItemOption(data.result);
@ -19,7 +19,7 @@ export const SelectExpenseItemModal = ({ isOpen, onClose, onSelect, formId, titl
 			}
 			toast.error('Ошибка получения статья расходов');
 		});
-	}, [formId]);
+	}, [formId, isOpen, sheet]);

 	useEffect(() => {
 		if (!isOpen) {
@ -49,7 +49,7 @@ export const SelectExpenseItemModal = ({ isOpen, onClose, onSelect, formId, titl

 	return (
 		<ModalBackdrop isOpen={isOpen} onClick={handleBackdropClick}>
-			<ModalContainer height={'max-content'}>
+			<ModalContainer height='max-content'>
 				<HeaderContainer>
 					<Stack direction='row' spacing={2} sx={{ alignItems: 'center' }}>
 						<ModalTitle>{title}</ModalTitle>
@ -72,7 +72,7 @@ export const SelectExpenseItemModal = ({ isOpen, onClose, onSelect, formId, titl
 								getOptionLabel={(option) => option.name || ''}
 								getOptionKey={(option) => option.id}
 								value={selectedValue}
-								onChange={(event, newValue) => {
+								onChange={(_event, newValue) => {
 									setSelectedValue(newValue);
 								}}
 								slotProps={{
@ -118,3 +118,5 @@ export const SelectExpenseItemModal = ({ isOpen, onClose, onSelect, formId, titl
 		</ModalBackdrop>
 	);
 };
+
+export const SelectExpenseItemModal = memo(SelectExpenseItemModalComponent);
--- a/web/src/components/RealtimeTable/Modals/SelectVspModal.jsx
+++ b/web/src/components/RealtimeTable/Modals/SelectVspModal.jsx
@ -1,17 +1,17 @@
 import { Box, Divider, FormControl, IconButton, MenuItem, Select, Stack } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { DictVspApi } from '../../../api/dict-vsp';
 import { DangerOutlinedButton, PrimaryButton } from '../../common/Buttons/Buttons';
 import { HeaderContainer, ModalBackdrop, ModalContainer, ModalTitle } from '../../common/Modal/ModalStyled';
 import { Cancel } from '../../common/icons/icons';

-export const SelectVspModal = ({ isOpen, onClose, onSelect, formId, title = 'Выбор ВСП', isSaving = false }) => {
+const SelectVspModalComponent = ({ isOpen, onClose, onSelect, formId, title = 'Выбор ВСП', isSaving = false }) => {
 	const [selectedValue, setSelectedValue] = useState('');
 	const [vspOptions, setVspOption] = useState([]);

 	useEffect(() => {
-		if (formId === null) return;
+		if (!isOpen || formId == null) return;
 		DictVspApi.getDropdownVsp({ form_id: formId }).then((data) => {
 			if (data.success) {
 				setVspOption(data.result);
@ -19,7 +19,7 @@ export const SelectVspModal = ({ isOpen, onClose, onSelect, formId, title = 'В
 			}
 			toast.error('Ошибка получения ВСП');
 		});
-	}, [formId]);
+	}, [formId, isOpen]);

 	useEffect(() => {
 		if (!isOpen) {
@ -49,7 +49,7 @@ export const SelectVspModal = ({ isOpen, onClose, onSelect, formId, title = 'В

 	return (
 		<ModalBackdrop isOpen={isOpen} onClick={handleBackdropClick}>
-			<ModalContainer height={'max-content'}>
+			<ModalContainer height='max-content'>
 				<HeaderContainer>
 					<Stack direction='row' spacing={2} sx={{ alignItems: 'center' }}>
 						<ModalTitle>{title}</ModalTitle>
@ -99,3 +99,5 @@ export const SelectVspModal = ({ isOpen, onClose, onSelect, formId, title = 'В
 		</ModalBackdrop>
 	);
 };
+
+export const SelectVspModal = memo(SelectVspModalComponent);
--- a/web/src/components/RealtimeTable/RealtimeTable.jsx
+++ b/web/src/components/RealtimeTable/RealtimeTable.jsx
@ -1,70 +1,110 @@
+import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
 import React, { useState, useMemo, useRef, useEffect, useCallback, useTransition } from 'react';
 import { createPortal } from 'react-dom';
-import {
-	useMaterialReactTable,
-	MaterialReactTable,
-} from 'material-react-table';

-import useRealtimeData from './hooks/useRealtimeData';
-import { getTableColumns } from './tableColumns';
-import { Cell, EditCell } from './index';
-import { TableHead } from './TableHead/TableHead';
-import SettingsPanel from './SettingPanel/SettingPanel';
 import { ColumnSelectionOverlay } from './ColumnSelectionOverlay/ColumnSelectionOverlay';
+import SettingsPanel from './SettingPanel/SettingPanel';
+import { TableHead } from './TableHead/TableHead';
+import useRealtimeData from './hooks/useRealtimeData';
+import { Cell, EditCell } from './index';
+import { getTableColumns } from './tableColumns';

-import { useColumnSettings } from './hooks/useColumnSettings';
-import { useTableScale } from './hooks/useTableScale';
-import { useHeaderPortal } from './hooks/useHeaderPortal';
-import { useValidationRules } from './hooks/useValidationRules';
-import {
-	BASE_TABLE_CONFIG,
-	getTableBodyCellProps,
-	getTablePaperStyles,
-	TABLE_ROW_HEIGHT,
-} from './constants/tableConfig';
-import { useRealtime } from './contexts/RealtimeContext';
-import { toast } from 'react-toastify';
 import { CircularProgress } from '@mui/material';
-import { additionExpenseRowTable, additionVspRowTable } from './constants/addingRowConfig';
-import { SelectVspModal } from './Modals/SelectVspModal';
-import { SelectExpenseItemModal } from './Modals/SelectExpenseItemModal';
-import { getRowId } from './utils/rowUtils';
-import { FORM_TYPE_OPTIONS } from '../../constants/constants';
 import { debounce } from '@mui/material';
+import { toast } from 'react-toastify';
 import { CreateProgramModal } from './Modals/CreateProgramProjectModal';
+import { SelectExpenseItemModal } from './Modals/SelectExpenseItemModal';
+import { SelectVspModal } from './Modals/SelectVspModal';
+import { additionExpenseRowTable, additionVspRowTable } from './constants/addingRowConfig';
+import { BASE_TABLE_CONFIG, TABLE_ROW_HEIGHT, getTableBodyCellProps, getTablePaperStyles } from './constants/tableConfig';
+import { useRealtimeActions } from './contexts/RealtimeContext';
+import { useColumnSettings } from './hooks/useColumnSettings';
+import { useHeaderPortal } from './hooks/useHeaderPortal';
+import { useTableScale } from './hooks/useTableScale';
+import { useValidationRules } from './hooks/useValidationRules';
+import { getRowId } from './utils/rowUtils';

-import { FormsNoCanAddRow } from './constants/formConfig';
 import { DictVspApi } from '../../api/dict-vsp';
+import { useAuth } from '../../app/context/AuthProvider';
+import { FormsNoCanAddRow } from './constants/formConfig';
+
+const CONFIG_CACHE = new Map();
+
+const ROW_VIRTUALIZER_OPTIONS = {
+	overscan: 5,
+	scrollPaddingStart: 0,
+	scrollPaddingEnd: 0,
+	estimateSize: () => TABLE_ROW_HEIGHT,
+	measureElement: (element) => element?.offsetHeight || TABLE_ROW_HEIGHT,
+};
+
+const getColumnVirtualizerOptions = ({ table }) => {
+	const orderedVisibleColumns = [
+		...table.getLeftVisibleLeafColumns(),
+		...table.getCenterVisibleLeafColumns(),
+		...table.getRightVisibleLeafColumns(),
+	];
+	const getColumnSize = (index) => orderedVisibleColumns[index]?.getSize() ?? 150;
+
+	return {
+		overscan: 10,
+		estimateSize: getColumnSize,
+		measureElement: (element) => {
+			if (!element) return 150;
+			return getColumnSize(Number(element.getAttribute('data-index')));
+		},
+	};
+};
+
+const hasVspDropdown = (columns) =>
+	columns.some((column) => column.editType === 'vsp_dropdown' || (column.columns?.length && hasVspDropdown(column.columns)));
+
+const tableContentStyle = {
+	position: 'relative',
+	width: '100%',
+	flex: 1,
+	minHeight: 0,
+	height: '100%',
+};
+
+const loadingOverlayStyle = {
+	position: 'absolute',
+	inset: 0,
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	background: 'rgba(255, 255, 255, 0.6)',
+	zIndex: 2,
+};

 const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
-	const { data, setData, columnsCurStage, isLoading: isTableLoading, editingCells: dataEditingCells } = useRealtimeData(formId, sheetName, direction, formType, year);
+	const { user } = useAuth();
+	const userRoleId = user?.role_id;
+	const {
+		data,
+		columnsCurStage,
+		isLoading: isTableLoading,
+		editingCells: dataEditingCells,
+	} = useRealtimeData(formId, sheetName, direction, formType, year);
 	const [globalFilter, setGlobalFilter] = useState('');
 	const [showColumnFilters, setShowColumnFilters] = useState(false);
 	const [selectedColumnId, setSelectedColumnId] = useState();
 	const [rowSelection, setRowSelection] = useState({});
-	const [isLoadingData, setIsLoadingData] = useState(false);
-	const [isPending, startTransition] = useTransition();
+	const rowSelectionRef = useRef(rowSelection);
+	rowSelectionRef.current = rowSelection;
+	const [, startTransition] = useTransition();
 	const [editingCell, setEditingCell] = useState(null);
 	const [columnsConfig, setColumnsConfig] = useState(null);
-	const { errors: validationErrors, isCellInvalid } = useValidationRules(
-		data,
-		columnsConfig?.columns,
-		formType,
-		sheetName,
-	);
+	const { errors: validationErrors, isCellInvalid } = useValidationRules(data, columnsConfig?.columns, formType, sheetName);

 	const [expanded, setExpanded] = useState(true);
 	const [showOnlyDepth2, setShowOnlyDepth2] = useState(false);

 	const [isOpenModalSelectVsp, setIsOpenModalSelectVsp] = useState(false);
 	const [isOpenModalSelectExpenseItem, setIsOpenModalSelectExpenseItem] = useState(false);
-	const [isOpenModalCreateProgram, setIsOpenModalCreateProgram] = useState(false);
-	const [isOpenModalCreateProject, setIsOpenModalCreateProject] = useState(false);
-	const [isProgramCreate, setIsProgramCreate] = useState(false)
+	const [createModalType, setCreateModalType] = useState(null);

-	const [isFormNoCanAddRow, setIsFormNoCanAddRow] = useState(() => {
-		return (FormsNoCanAddRow[formType].includes(sheetName));
-	})
+	const isFormNoCanAddRow = useMemo(() => FormsNoCanAddRow[formType]?.includes(sheetName) ?? false, [formType, sheetName]);

 	const isVspAdditionRow = useMemo(() => {
 		if (!formType || !sheetName) return false;
@ -78,21 +118,19 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		return additionExpenseRowTable[formType].includes(sheetName);
 	}, [formType, sheetName]);

-	const handleGlobalFilterChange = useCallback(
-		debounce((value) => {
-			startTransition(() => {
-				setGlobalFilter(value);
-			});
-		}, 300),
-		[]
+	const handleGlobalFilterChange = useMemo(
+		() =>
+			debounce((value) => {
+				startTransition(() => {
+					setGlobalFilter(value);
+				});
+			}, 300),
+		[startTransition],
 	);

+	useEffect(() => () => handleGlobalFilterChange.clear(), [handleGlobalFilterChange]);
+
 	const {
-		isConnected,
-		isAuthenticated,
-		subscribeToErrors,
-		subscribeToAuthSuccess,
-		error: wsError,
 		updateCell: contextUpdateCell,
 		addRow: contextAddRow,
 		deleteRow: contextDeleteRow,
@ -100,7 +138,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		addProgram: contextAddProgram,
 		addProject: contextAddProject,
 		setVspOptions,
-	} = useRealtime();
+	} = useRealtimeActions();

 	const {
 		columnSizing,
@ -112,73 +150,76 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		handleUnpinColumn,
 		handleSetColumnWidth,
 		handleToggleColumnVisibility,
+		handleSetColumnsVisibility,
 	} = useColumnSettings(`${formId}_${formType}_${sheetName}_${direction}`);

 	const { headerPortalRef, containerRef } = useHeaderPortal();
 	const rowVirtualizerRef = useRef(null);
+	const columnVirtualizerRef = useRef(null);

-	const { sizeMult, setSizeMult, tableScaleStyle, tableWrapperStyle } =
-		useTableScale();
+	const { sizeMult, setSizeMult, tableScaleStyle, tableWrapperStyle } = useTableScale();

 	useEffect(() => {
 		rowVirtualizerRef.current?.measure?.();
+		columnVirtualizerRef.current?.measure?.();
 	}, [sizeMult]);

-	const configCache = useRef(new Map());
-
 	useEffect(() => {
 		if (!formType || !sheetName) return;
+		let isCancelled = false;
 		const cacheKey = `${formType}_${sheetName}`;

-		if (configCache.current.has(cacheKey)) {
-			setColumnsConfig(configCache.current.get(cacheKey));
+		if (CONFIG_CACHE.has(cacheKey)) {
+			setColumnsConfig(CONFIG_CACHE.get(cacheKey));
 			return;
 		}

 		const loadConfig = async () => {
 			try {
 				const { config } = await import(`./constants/${formType}/${sheetName}.js`);
-				configCache.current.set(cacheKey, config.config);
-				setColumnsConfig(config.config);
+				CONFIG_CACHE.set(cacheKey, config.config);
+				if (!isCancelled) setColumnsConfig(config.config);
 			} catch (error) {
 				console.error(`Failed to load config for ${formType}/${sheetName}:`, error);
-				setColumnsConfig({ columns: [], colors: {} });
+				if (!isCancelled) setColumnsConfig({ columns: [], colors: {} });
 			}
 		};

 		loadConfig();
+		return () => {
+			isCancelled = true;
+		};
 	}, [formType, sheetName]);

 	useEffect(() => {
 		if (!formId || !columnsConfig?.columns) return;

-		const hasVspDropdown = (cols) => {
-			for (const col of cols) {
-				if (col.editType === 'vsp_dropdown') return true;
-				if (col.columns && hasVspDropdown(col.columns)) return true;
-			}
-			return false;
-		};
-
 		if (!hasVspDropdown(columnsConfig.columns)) return;
+		let isCancelled = false;

-		DictVspApi.getDropdownVsp({ form_id: formId }).then(data => {
-			if (data.success) {
+		DictVspApi.getDropdownVsp({ form_id: formId }).then((data) => {
+			if (!isCancelled && data.success) {
 				setVspOptions(data.result);
 			}
 		});
+
+		return () => {
+			isCancelled = true;
+		};
 	}, [formId, columnsConfig, setVspOptions]);

-
-	const handleUpdateCell = useCallback(async (row, column, value) => {
-		return await contextUpdateCell(row, column, value);
-	}, [contextUpdateCell]);
+	const handleUpdateCell = useCallback(
+		(row, column, value) => {
+			return contextUpdateCell(row, column, value);
+		},
+		[contextUpdateCell],
+	);

 	const handleClickRowCell = useCallback((rowId) => {
 		setRowSelection((prev) => ({
 			[rowId]: !prev[rowId],
 		}));
-	}, [])
+	}, []);

 	const handleColumnSelect = useCallback((columnId) => {
 		setSelectedColumnId((prev) => {
@ -215,7 +256,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 				EditCell,
 				columnsConfig,
 				columnsCurStage,
-				onCellUpdate: handleUpdateCell,
+				userRoleId,
 				onCellNumberClick: handleClickRowCell,
 				onCellUpdateError: handleCellUpdateError,
 				isCellInvalid,
@ -224,33 +265,40 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 			console.error('Error creating columns:', error);
 			return [];
 		}
-	}, [
-		columnsConfig,
-		columnsCurStage,
-		handleCellUpdateError,
-		handleClickRowCell,
-		handleUpdateCell,
-		isCellInvalid,
-	]);
+	}, [columnsConfig, columnsCurStage, userRoleId, handleCellUpdateError, handleClickRowCell, handleUpdateCell, isCellInvalid]);

-	const selectedColumnIdRef = useRef(selectedColumnId);
+	// MRT запоминает индексы pinned-колонок до завершения асинхронной
+	// загрузки конфигурации. Новая ссылка на columnPinning заставляет
+	// виртуализатор пересчитать эти индексы уже с полным набором колонок.
+	useEffect(() => {
+		if (!columnsConfig?.columns?.length) return;
+
+		setColumnPinning((currentPinning) => ({
+			left: [...(currentPinning.left || [])],
+			right: [...(currentPinning.right || [])],
+		}));
+	}, [columnsConfig, setColumnPinning]);

 	useEffect(() => {
-		selectedColumnIdRef.current = selectedColumnId;
-	}, [selectedColumnId]);
+		if (!columns.length) return;

-	const tableMeta = useMemo(() => ({
-		updateCell: handleUpdateCell,
-		getSelectedColumnId: () => selectedColumnIdRef.current,
-	}), [handleUpdateCell]);
+		const animationFrameId = requestAnimationFrame(() => {
+			columnVirtualizerRef.current?.measure?.();
+		});

-	const ROW_VIRTUALIZER_OPTIONS = {
-		overscan: 5,
-		scrollPaddingStart: 0,
-		scrollPaddingEnd: 0,
-		estimateSize: () => TABLE_ROW_HEIGHT,
-		measureElement: (el) => el?.offsetHeight || TABLE_ROW_HEIGHT,
-	};
+		return () => cancelAnimationFrame(animationFrameId);
+	}, [columns, columnPinning, columnSizing, columnVisibility]);
+
+	const selectedColumnIdRef = useRef(selectedColumnId);
+	selectedColumnIdRef.current = selectedColumnId;
+
+	const tableMeta = useMemo(
+		() => ({
+			updateCell: handleUpdateCell,
+			getSelectedColumnId: () => selectedColumnIdRef.current,
+		}),
+		[handleUpdateCell],
+	);

 	const createTableConfig = ({
 		columns,
@ -276,27 +324,14 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		enableRowVirtualization: true,
 		enableColumnVirtualization: true,
 		rowVirtualizerInstanceRef: rowVirtualizerRef,
+		columnVirtualizerInstanceRef: columnVirtualizerRef,
 		rowVirtualizerOptions: ROW_VIRTUALIZER_OPTIONS,
 		onEditingCellChange: (cell) => {
 			if (cell && !editingCell) {
 				contextStartEditing?.(cell.row, cell.column);
 			}
 		},
-		columnVirtualizerOptions: ({ table }) => ({
-			overscan: 10,
-			measureElement: (el) => {
-				if (!el) return 150;
-				const index = Number(el?.getAttribute?.('data-index'));
-				const isPinned = Boolean(el?.getAttribute?.('data-pinned'));
-				if (isPinned) {
-					const colId = table.getState().columnPinning.left[index];
-					const column = table.getColumn(colId);
-					return column?.getSize() ?? 150;
-				}
-				const allCols = [...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns()]
-				return allCols[index]?.getSize() ?? 150;
-			},
-		}),
+		columnVirtualizerOptions: getColumnVirtualizerOptions,
 		enableRowSelection: true,
 		onRowSelectionChange: setRowSelection,
 		onColumnSizingChange: setColumnSizing,
@ -311,7 +346,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 			showColumnFilters,
 			rowSelection,
 			editingCell,
-			expanded
+			expanded,
 		},
 		initialState: {
 			expanded: true,
@ -333,7 +368,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 					minHeight: '1px',
 					maxHeight: '1px',
 					visibility: 'hidden',
-				}
+				},
 			},
 		},
 		muiTablePaperProps: getTablePaperStyles(),
@ -352,68 +387,74 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		},
 	});

-	const tableConfig = useMemo(() => createTableConfig({
-		columns,
-		data,
-		columnSizing,
-		columnPinning,
-		columnVisibility,
-		expanded,
-		globalFilter,
-		showColumnFilters,
-		rowSelection,
-		containerRef,
-		tableMeta,
-		setColumnSizing,
-		setColumnPinning,
-		setExpanded,
-		editingCell,
-		contextStartEditing,
-	}), [
-		columns,
-		data,
-		columnSizing,
-		columnPinning,
-		columnVisibility,
-		globalFilter,
-		showColumnFilters,
-		rowSelection,
-		containerRef,
-		tableMeta,
-		setColumnSizing,
-		setColumnPinning,
-		editingCell,
-		expanded,
-	]);
+	const tableConfig = useMemo(
+		() =>
+			createTableConfig({
+				columns,
+				data,
+				columnSizing,
+				columnPinning,
+				columnVisibility,
+				expanded,
+				globalFilter,
+				showColumnFilters,
+				rowSelection,
+				containerRef,
+				tableMeta,
+				setColumnSizing,
+				setColumnPinning,
+				setExpanded,
+				editingCell,
+				contextStartEditing,
+			}),
+		[
+			columns,
+			data,
+			columnSizing,
+			columnPinning,
+			columnVisibility,
+			globalFilter,
+			showColumnFilters,
+			rowSelection,
+			containerRef,
+			tableMeta,
+			setColumnSizing,
+			setColumnPinning,
+			editingCell,
+			expanded,
+		],
+	);

 	const table = useMaterialReactTable(tableConfig);
+	const isLoadingData = columns.length > 0;

-	const handleNavigateToColumn = useCallback((columnId) => {
-		if (!columnId) return;
+	const handleNavigateToColumn = useCallback(
+		(columnId) => {
+			if (!columnId) return;

-		setSelectedColumnId(columnId);
+			setSelectedColumnId(columnId);

-		const container = containerRef.current;
-		if (!container) return;
+			const container = containerRef.current;
+			if (!container) return;

-		const pinnedIds = new Set(columnPinning?.left || []);
-		if (pinnedIds.has(columnId)) return;
+			const pinnedIds = new Set(columnPinning?.left || []);
+			if (pinnedIds.has(columnId)) return;

-		const centerColumns = table
-			.getVisibleLeafColumns()
-			.filter((column) => !pinnedIds.has(column.id));
+			const centerColumns = table.getVisibleLeafColumns().filter((column) => !pinnedIds.has(column.id));

-		let offset = 0;
-		for (const column of centerColumns) {
-			if (column.id === columnId) break;
-			offset += column.getSize();
-		}
+			let offset = 0;
+			for (const column of centerColumns) {
+				if (column.id === columnId) break;
+				offset += column.getSize();
+			}

-		container.scrollTo({
-			left: Math.max(0, offset - 40),
-			behavior: 'smooth',
-		});
-	}, [columnPinning, containerRef, table]);
+			container.scrollTo({
+				left: Math.max(0, offset - 40),
+				behavior: 'smooth',
+			});
+		},
+		[columnPinning, containerRef, table],
+	);

 	useEffect(() => {
 		if (!dataEditingCells?.line_id) {
@ -422,99 +463,90 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		}
 		if (editingCell) return;

-		requestAnimationFrame(() => {
+		const animationFrameId = requestAnimationFrame(() => {
 			try {
 				const row = table.getRow(dataEditingCells.line_id);
-				const cell = row?.getVisibleCells().find(
-					c => c.column.id === dataEditingCells.column
-				);
+				const cell = row?.getVisibleCells().find((c) => c.column.id === dataEditingCells.column);
 				if (cell) setEditingCell(cell);
 			} catch (error) {
 				console.error(error);
 			}
 		});
+
+		return () => cancelAnimationFrame(animationFrameId);
 	}, [dataEditingCells, editingCell, table]);

-	const [isFirstLoad, setIsFirstLoad] = useState(true);
-
-	useEffect(() => {
-		if (isFirstLoad && table && data && columns.length !== 0) {
-			setIsFirstLoad(false);
-			setIsLoadingData(true);
-		}
-	}, [data, columns, table, isFirstLoad]);
+	const getSelectedRow = useCallback(() => table.getRowModel().rows.find((row) => rowSelectionRef.current[row.id]), [table]);

 	const handleAddRow = useCallback(() => {
-		const allRows = table.getRowModel().rows;
-
-		const selectedRows = allRows.filter(row => rowSelection[row.id]);
-		if (selectedRows.length === 0) {
+		const row = getSelectedRow();
+		if (!row) {
 			toast.error('Выделите строку для вставки');
 			return;
 		}
-		const row = selectedRows[0];
-		const expense_item_id = row.original.data.header.expense_item_id;
-		contextAddRow({ expense_item_id: expense_item_id })
-	}, [rowSelection, table])
+		contextAddRow({ expense_item_id: row.original.data.header.expense_item_id });
+	}, [contextAddRow, getSelectedRow]);

-	const handleAddVspRow = useCallback((vsp_id) => {
-		contextAddRow({ vsp_id: vsp_id });
-	}, []);
+	const handleAddVspRow = useCallback(
+		(vsp_id) => {
+			contextAddRow({ vsp_id });
+		},
+		[contextAddRow],
+	);

-	const handleAddExpenseItemRow = useCallback((expense_item) => {
-		const allRows = table.getRowModel().rows;
-		const selectedRows = allRows.filter(row => rowSelection[row.id]);
-		const row = selectedRows[0];
-		contextAddRow({ expense_item_id: expense_item.id, project_id: row.original.data.header.project_id });
-	}, [rowSelection]);
+	const handleAddExpenseItemRow = useCallback(
+		(expense_item) => {
+			const row = getSelectedRow();
+			if (!row) return;
+			contextAddRow({ expense_item_id: expense_item.id, project_id: row.original.data.header.project_id });
+		},
+		[contextAddRow, getSelectedRow],
+	);

-	const handleAddProgramRow = useCallback((name) => {
-		contextAddProgram({ name: name });
-	}, []);
+	const handleAddProgramRow = useCallback(
+		(name) => {
+			contextAddProgram({ name });
+		},
+		[contextAddProgram],
+	);

-	const handleAddProjectRow = useCallback((name) => {
-		const allRows = table.getRowModel().rows;
-		const selectedRows = allRows.filter(row => rowSelection[row.id]);
-		const row = selectedRows[0];
-		contextAddProject({ name: name, program_id: row.original.data.header.program_id });
-	}, [rowSelection]);
+	const handleAddProjectRow = useCallback(
+		(name) => {
+			const row = getSelectedRow();
+			if (!row) return;
+			contextAddProject({ name, program_id: row.original.data.header.program_id });
+		},
+		[contextAddProject, getSelectedRow],
+	);

 	const handleOpenModalSelectVsp = useCallback(() => {
 		setIsOpenModalSelectVsp(true);
-	}, [])
+	}, []);

 	const handleOpenModalSelectExpenseItem = useCallback(() => {
-		const allRows = table.getRowModel().rows;
-
-		const selectedRows = allRows.filter(row => rowSelection[row.id]);
-		if (selectedRows.length === 0) {
+		const row = getSelectedRow();
+		if (!row) {
 			toast.error('Выделите строку для вставки');
 			return;
 		}
-		const row = selectedRows[0];
 		if (row.original.row_type !== 'ITEM') {
 			toast.error('Выделите строку проекта');
 			return;
 		}
 		setIsOpenModalSelectExpenseItem(true);
-	}, [rowSelection])
+	}, [getSelectedRow]);

 	const handleDeleteRow = useCallback(() => {
-		const allRows = table.getRowModel().rows;
-
-		const selectedRows = allRows.filter(row => rowSelection[row.id]);
-		if (selectedRows.length === 0) {
+		const row = getSelectedRow();
+		if (!row) {
 			toast.error('Выделите строку для удаления');
 			return;
 		}
-		const row = selectedRows[0];
-		const rowId = getRowId(row);
-		contextDeleteRow(rowId);
+		contextDeleteRow(getRowId(row));
 		setRowSelection({});
-	}, [rowSelection, table])
+	}, [contextDeleteRow, getSelectedRow]);

 	const addRow = useCallback(() => {
-
 		if (isVspAdditionRow) {
 			return handleOpenModalSelectVsp();
 		}
@ -525,45 +557,39 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 	}, [isVspAdditionRow, isAdditionExpenseItem, handleOpenModalSelectVsp, handleAddRow, handleOpenModalSelectExpenseItem]);

 	const addProgram = useCallback(() => {
-		setIsProgramCreate(true);
-		setIsOpenModalCreateProgram(true);
-	}, [])
+		setCreateModalType('program');
+	}, []);

 	const addProject = useCallback(() => {
-		setIsProgramCreate(false);
-		const allRows = table.getRowModel().rows;
-
-		const selectedRows = allRows.filter(row => rowSelection[row.id]);
-		if (selectedRows.length === 0) {
+		const row = getSelectedRow();
+		if (!row) {
 			toast.error('Выделите строку для вставки');
 			return;
 		}
-		const row = selectedRows[0];
 		if (row.original.row_type !== 'GROUP') {
 			toast.error('Выделите строку программы');
 			return;
 		}
-		setIsOpenModalCreateProgram(true);
-	}, [setIsOpenModalCreateProgram, rowSelection])
+		setCreateModalType('project');
+	}, [getSelectedRow]);
+
+	const closeSelectVspModal = useCallback(() => setIsOpenModalSelectVsp(false), []);
+	const closeSelectExpenseItemModal = useCallback(() => setIsOpenModalSelectExpenseItem(false), []);
+	const closeCreateModal = useCallback(() => setCreateModalType(null), []);

 	useEffect(() => {
 		return () => {
-			setData([]);
-			setRowSelection({});
-			setEditingCell(null);
-			if (rowVirtualizerRef.current) {
-				rowVirtualizerRef.current = null;
-			}
+			rowVirtualizerRef.current = null;
+			columnVirtualizerRef.current = null;
 		};
 	}, []);

 	const handleToggleDepthVisibility = useCallback(() => {
-		setShowOnlyDepth2(prev => {
+		setShowOnlyDepth2((prev) => {
 			const newState = !prev;

 			if (newState) {
 				const allRows = table.getRowModel().flatRows;
-				console.log(allRows);
 				const newExpanded = {};

 				for (const row of allRows) {
@ -588,22 +614,22 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 			<SettingsPanel
 				selectedColumnId={selectedColumnId}
 				columnPinning={columnPinning}
-				table={table}
 				columns={columns}
 				onPinColumn={handlePinColumn}
 				onUnpinColumn={handleUnpinColumn}
 				onToggleColumnVisibility={handleToggleColumnVisibility}
+				onSetColumnsVisibility={handleSetColumnsVisibility}
 				columnVisibility={columnVisibility}
 				columnsCurStage={columnsCurStage}
 				onChangeSizeMult={setSizeMult}
 				onGlobalFilterChange={handleGlobalFilterChange}
 				sizeMult={sizeMult}
 				onChangeShowColumnFilters={setShowColumnFilters}
+				showColumnFilters={showColumnFilters}
 				onAddRow={addRow}
 				onAddProgram={addProgram}
 				onAddProject={addProject}
 				onDeleteRow={handleDeleteRow}
-				isLoadingData={isLoadingData}
 				formId={formId}
 				sheetName={sheetName}
 				direction={direction}
@ -618,15 +644,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {

 			<div style={tableWrapperStyle}>
 				<div style={tableScaleStyle}>
-					<div
-						style={{
-							position: 'relative',
-							width: '100%',
-							flex: 1,
-							minHeight: 0,
-							height: '100%',
-						}}
-					>
+					<div style={tableContentStyle}>
 						<MaterialReactTable table={table} />

 						<ColumnSelectionOverlay
@ -639,17 +657,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 						/>

 						{isTableLoading && (
-							<div
-								style={{
-									position: 'absolute',
-									inset: 0,
-									display: 'flex',
-									alignItems: 'center',
-									justifyContent: 'center',
-									background: 'rgba(255, 255, 255, 0.6)',
-									zIndex: 2,
-								}}
-							>
+							<div style={loadingOverlayStyle}>
 								<CircularProgress />
 							</div>
 						)}
@ -658,7 +666,12 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 							createPortal(
 								<TableHead
 									table={table}
-									style={{ zIndex: (theme) => theme.zIndex.modal - 1 }}
+									columns={columns}
+									columnPinning={columnPinning}
+									columnSizing={columnSizing}
+									columnVisibility={columnVisibility}
+									columnFilters={table.getState().columnFilters}
+									showColumnFilters={showColumnFilters}
 									selectedColumnId={selectedColumnId}
 									onColumnSelect={handleColumnSelect}
 									onChangeWidth={handleSetColumnWidth}
@ -671,24 +684,24 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 			</div>
 			<SelectVspModal
 				isOpen={isOpenModalSelectVsp}
-				onClose={() => setIsOpenModalSelectVsp(false)}
+				onClose={closeSelectVspModal}
 				formId={formId}
 				onSelect={handleAddVspRow}
-				title="Выбор ВСП"
+				title='Выбор ВСП'
 			/>
 			<SelectExpenseItemModal
 				isOpen={isOpenModalSelectExpenseItem}
-				onClose={() => setIsOpenModalSelectExpenseItem(false)}
+				onClose={closeSelectExpenseItemModal}
 				formId={formId}
 				onSelect={handleAddExpenseItemRow}
-				title="Добавление строки"
+				title='Добавление строки'
 				sheet={sheetName}
 			/>
 			<CreateProgramModal
-				isOpen={isOpenModalCreateProgram}
-				onClose={() => setIsOpenModalCreateProgram(false)}
-				title={isProgramCreate ? "Создание программы" : "Создание проекта"}
-				onCreate={isProgramCreate ? handleAddProgramRow : handleAddProjectRow}
+				isOpen={createModalType !== null}
+				onClose={closeCreateModal}
+				title={createModalType === 'program' ? 'Создание программы' : 'Создание проекта'}
+				onCreate={createModalType === 'program' ? handleAddProgramRow : handleAddProjectRow}
 			/>
 		</>
 	);
--- a/web/src/components/RealtimeTable/SettingPanel/SettingPanel.jsx
+++ b/web/src/components/RealtimeTable/SettingPanel/SettingPanel.jsx
@ -1,7 +1,8 @@
 import { Divider, IconButton, Stack, Tooltip } from '@mui/material';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { FORM_TYPE_OPTIONS } from '../../../constants/constants';
 import { exportSheet, exportSheetProject } from '../../../utils/exportFile';
+import { stageColumnsHiddenFromPicker } from '../../Stages/constants';
 import { ExportDefaultButton } from '../../common/Buttons/ButtonsActions';
 import CollapsibleTree from '../../common/CollapsibleTree';
 import SearchComponent from '../../common/SearchComponent';
@ -19,37 +20,39 @@ import {
 	Search,
 	VisibleExpenseItems,
 } from '../../common/icons/icons';
+import { collectLeafColumns } from '../utils/columnUtils';
 import { GroupByObject } from './GroupByObject/GroupByObject';
 import { Panel } from './SettingPanel.style';
 import ValidationErrorsAlert from './ValidationErrorsAlert';
 import ZoomSlider from './ZoomSlider';
-import { collectLeafColumns } from '../utils/columnUtils';
-import { stageColumnsHiddenFromPicker } from '../../Stages/constants';

 const controlSx = {
 	minHeight: '2.5rem',
 	flex: '0 0 2.5rem',
 };

+const searchSx = { height: '2.5rem' };
+const exportButtonSx = { height: '2.5rem', minHeight: '2.5rem' };
+
 const SettingPanel = ({
 	selectedColumnId,
 	columnPinning,
-	table,
 	columns,
 	onPinColumn,
 	onUnpinColumn,
 	onToggleColumnVisibility,
+	onSetColumnsVisibility,
 	columnVisibility,
 	columnsCurStage,
 	onChangeSizeMult,
 	onGlobalFilterChange,
 	sizeMult,
 	onChangeShowColumnFilters,
+	showColumnFilters,
 	onAddRow,
 	onAddProgram,
 	onAddProject,
 	onDeleteRow,
-	isLoadingData,
 	formId,
 	sheetName,
 	direction,
@ -61,54 +64,39 @@ const SettingPanel = ({
 	showOnlyDepth2,
 	onToggleDepthVisibility,
 }) => {
-	const [isPinned, setIsPinned] = useState(false);
 	const [isExporting, setIsExporting] = useState(false);
-	const [selectedColumnIds, setSelectedColumnIds] = useState();
-	const [showColumnFilters, setShowColumnFilters] = useState(false);
-
-	useEffect(() => {
-		if (!selectedColumnId) {
-			setIsPinned(false);
-			return;
-		}
-		const pinningColumn = columnPinning?.left || table.getState().columnPinning.left || [];
-		const pinned = pinningColumn.includes(selectedColumnId);
-		setIsPinned(pinned);
-	}, [selectedColumnId, columnPinning, table]);
-
-	useEffect(() => {
-		setSelectedColumnIds(Object.keys(columnVisibility).filter((key) => !columnVisibility[key]));
-	}, [columnVisibility]);
-
-	//TO DO: сделать
-	const { addColorForCells } = {};
-
-	const handleChangeShowColumnFilters = () => {
-		const show = table.getState().showColumnFilters;
-		setShowColumnFilters(!show);
-		onChangeShowColumnFilters(!show);
-	};
-
-	const handleExport = async () => {
-		if (isExporting) return;
-		if (formType === 'PROJECT') {
-			if (!formId || !sheetName || !year) return;
-			setIsExporting(true);
-			await exportSheetProject(formId, sheetName, year);
-			setIsExporting(false);
-			return;
-		}
-
-		if (!formId || !sheetName) return;
-		setIsExporting(true);
-		await exportSheet(formId, sheetName, direction);
-		setIsExporting(false);
-	};
-	const leafColumns = useMemo(() => collectLeafColumns({ columns }), [columns]);
-	const stageColumnIds = useMemo(
-		() => new Set([...stageColumnsHiddenFromPicker, ...(columnsCurStage || [])]),
-		[columnsCurStage],
+	const isPinned = useMemo(
+		() => Boolean(selectedColumnId && columnPinning?.left?.includes(selectedColumnId)),
+		[columnPinning, selectedColumnId],
 	);
+	const selectedColumnIds = useMemo(() => Object.keys(columnVisibility).filter((key) => !columnVisibility[key]), [columnVisibility]);
+
+	const handleChangeShowColumnFilters = useCallback(() => {
+		onChangeShowColumnFilters(!showColumnFilters);
+	}, [onChangeShowColumnFilters, showColumnFilters]);
+
+	const handleExport = useCallback(async () => {
+		if (isExporting) return;
+		if (!formId || !sheetName || (formType === 'PROJECT' && !year)) return;
+
+		setIsExporting(true);
+		try {
+			if (formType === 'PROJECT') {
+				await exportSheetProject(formId, sheetName, year);
+			} else {
+				await exportSheet(formId, sheetName, direction);
+			}
+		} finally {
+			setIsExporting(false);
+		}
+	}, [direction, formId, formType, isExporting, sheetName, year]);
+
+	const handleTogglePin = useCallback(() => {
+		if (!selectedColumnId) return;
+		isPinned ? onUnpinColumn?.(selectedColumnId) : onPinColumn?.(selectedColumnId);
+	}, [isPinned, onPinColumn, onUnpinColumn, selectedColumnId]);
+	const leafColumns = useMemo(() => collectLeafColumns({ columns }), [columns]);
+	const stageColumnIds = useMemo(() => new Set([...stageColumnsHiddenFromPicker, ...(columnsCurStage || [])]), [columnsCurStage]);
 	const showOnlyCurrentStageColumns = useMemo(() => {
 		if (!columnsCurStage?.length || !leafColumns.length) return false;
 		return leafColumns.every((column) =>
@ -121,10 +109,20 @@ const SettingPanel = ({
 			console.warn('Нет столбцов для текущего этапа');
 			return;
 		}
+		const visibilityByColumnId = {};
 		for (const column of leafColumns) {
-			onToggleColumnVisibility(column, showOnlyCurrentStageColumns || stageColumnIds.has(column.id));
+			visibilityByColumnId[column.id] = showOnlyCurrentStageColumns || stageColumnIds.has(column.id);
 		}
-	}, [columnsCurStage, leafColumns, onToggleColumnVisibility, showOnlyCurrentStageColumns, stageColumnIds]);
+		onSetColumnsVisibility(visibilityByColumnId);
+	}, [columnsCurStage, leafColumns, onSetColumnsVisibility, showOnlyCurrentStageColumns, stageColumnIds]);
+
+	const handleSetAllColumnsVisibility = useCallback(
+		(columnIds, isVisible) => {
+			const visibilityByColumnId = Object.fromEntries(columnIds.map((columnId) => [columnId, isVisible]));
+			onSetColumnsVisibility(visibilityByColumnId);
+		},
+		[onSetColumnsVisibility],
+	);

 	return (
 		<>
@ -140,19 +138,12 @@ const SettingPanel = ({
 								data-active={isPinned}
 								disabled={!selectedColumnId}
 								onMouseDown={(e) => e.stopPropagation()}
-								onClick={() => {
-									if (!selectedColumnId) {
-										console.warn('[ColumnPin] клик Pin: selectedColumnId пустой');
-										return;
-									}
-									isPinned ? onUnpinColumn?.(selectedColumnId) : onPinColumn?.(selectedColumnId);
-								}}>
+								onClick={handleTogglePin}>
 								<Pin />
 							</IconButton>
 						</Tooltip>
 					</GroupByObject>

-
 					<Divider orientation='vertical' flexItem />
 					<GroupByObject title='Строки'>
 						{!isFormNoCanAddRow && (
@ -200,7 +191,12 @@ const SettingPanel = ({
 					<Divider orientation='vertical' flexItem />
 					<GroupByObject title='Столбцы'>
 						{columns ? (
-							<CollapsibleTree columnTree={columns} onSelectNode={onToggleColumnVisibility} selectedIds={selectedColumnIds} />
+							<CollapsibleTree
+								columnTree={columns}
+								onSelectNode={onToggleColumnVisibility}
+								onSelectAllNodes={handleSetAllColumnsVisibility}
+								selectedIds={selectedColumnIds}
+							/>
 						) : (
 							''
 						)}
@ -211,8 +207,7 @@ const SettingPanel = ({
 								color='success'
 								data-active={showOnlyCurrentStageColumns}
 								onClick={handleToggleCurrentStageColumns}
-								disabled={!columnsCurStage || columnsCurStage.length === 0}
-							>
+								disabled={!columnsCurStage || columnsCurStage.length === 0}>
 								{showOnlyCurrentStageColumns ? <AllStageColumns /> : <CurrentStageColumns />}
 							</IconButton>
 						</Tooltip>
@ -223,7 +218,7 @@ const SettingPanel = ({
 					</GroupByObject>
 					<Divider orientation='vertical' flexItem />
 					<GroupByObject title='Поиск'>
-						<SearchComponent onChange={onGlobalFilterChange} height='2.5rem' sx={{ height: '2.5rem' }} />
+						<SearchComponent onChange={onGlobalFilterChange} height='2.5rem' sx={searchSx} />
 						<Tooltip title='Поиск по колонкам'>
 							<IconButton
 								variant='outlined'
@ -243,14 +238,14 @@ const SettingPanel = ({
 							onClick={handleExport}
 							disabled={!formId || !sheetName || isExporting}
 							text={isExporting ? 'Экспорт...' : 'Экспорт'}
-							sx={{ height: '2.5rem', minHeight: '2.5rem' }}
+							sx={exportButtonSx}
 						/>
 					</GroupByObject>
 				</Stack>
 				<ValidationErrorsAlert errors={validationErrors} onNavigateToColumn={onNavigateToColumn} />
-			</Panel >
+			</Panel>
 		</>
 	);
 };

-export default SettingPanel;
+export default memo(SettingPanel);
--- a/web/src/components/RealtimeTable/SettingPanel/ValidationErrorsAlert.jsx
+++ b/web/src/components/RealtimeTable/SettingPanel/ValidationErrorsAlert.jsx
@ -1,7 +1,7 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
 import { Button, Menu, MenuItem, Stack } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';

 const warningColors = {
 	bg: '#fff7e6',
@ -115,4 +115,4 @@ const ValidationErrorsAlert = ({ errors = [], onNavigateToColumn }) => {
 	);
 };

-export default ValidationErrorsAlert;
+export default memo(ValidationErrorsAlert);
--- a/web/src/components/RealtimeTable/SettingPanel/ZoomSlider.jsx
+++ b/web/src/components/RealtimeTable/SettingPanel/ZoomSlider.jsx
@ -1,32 +1,32 @@
 import { Box, Slider } from '@mui/material';
-import { useState } from 'react';
+import { memo } from 'react';
+
+const sliderContainerSx = { width: 200, height: '2.5rem', display: 'flex', alignItems: 'center', gap: 2 };
+const zoomMarks = [
+	{ value: 0.5, label: '50%' },
+	{ value: 1, label: '100%' },
+	{ value: 2, label: '200%' },
+];

 const ZoomSlider = ({ onChange, width = 200, curScale }) => {
-	const [scale, setScale] = useState(curScale);
-
-	const handleChange = (event, newValue) => {
-		setScale(newValue);
+	const handleChange = (_event, newValue) => {
 		if (onChange) onChange(newValue);
 	};

 	return (
-		<Box sx={{ width, height: '2.5rem', display: 'flex', alignItems: 'center', gap: 2 }}>
+		<Box sx={width === 200 ? sliderContainerSx : { ...sliderContainerSx, width }}>
 			<Slider
-				value={scale}
+				value={curScale}
 				onChange={handleChange}
 				min={0.5}
 				max={2}
 				step={0.01}
 				valueLabelDisplay='auto'
 				valueLabelFormat={(value) => `${Math.round(value * 100)}%`}
-				marks={[
-					{ value: 0.5, label: '50%' },
-					{ value: 1, label: '100%' },
-					{ value: 2, label: '200%' },
-				]}
+				marks={zoomMarks}
 			/>
 		</Box>
 	);
 };

-export default ZoomSlider;
+export default memo(ZoomSlider);
--- a/web/src/components/RealtimeTable/TableHead/TableHead.jsx
+++ b/web/src/components/RealtimeTable/TableHead/TableHead.jsx
@ -1,75 +1,18 @@
 import React, { useMemo } from 'react';
-import { columnPinningDefault } from '../constants/columnConfig';
 import ColumnResizer from './ColumnResizer';

-const getPinnedColumnIds = (table) => (table.getState().columnPinning.left || []).filter(Boolean);
-
 const getSortedColumns = (table) => {
-	const allLeafColumns = table.getAllLeafColumns();
-	const pinnedColumns = getPinnedColumnIds(table);
-
-	return [...allLeafColumns].sort((a, b) => {
-		const aIsPinned = pinnedColumns.includes(a.id);
-		const bIsPinned = pinnedColumns.includes(b.id);
-
-		if (aIsPinned && bIsPinned) {
-			return pinnedColumns.indexOf(a.id) - pinnedColumns.indexOf(b.id);
-		}
-		if (aIsPinned) return -1;
-		if (bIsPinned) return 1;
-		return 0;
-	});
+	return [...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getRightVisibleLeafColumns()];
 };

-const getColumnId = (header) => {
-	//в header.id содержаться колонки по типу depth_idColParent_idChild, а в pinningColumn только idCol, которые закреплены
-	//header.id.split('_').at(-1) - получение самой нижней колонки
-	let columnId = header?.id?.match(/data\..*$/)?.[0] || header?.id || header;
-	columnPinningDefault.left.forEach((colPinned) => {
-		if (columnId.includes(colPinned)) {
-			columnId = colPinned;
-		}
-	});
-	return columnId;
-};
+const getColumnPinnedStyles = (column) => {
+	const pinningPosition = column.getIsPinned();

-// Ширина закреплённых дочерних колонок группового заголовка
-const getPinnedColumnsWidth = (header, pinningColumn) => {
-	let width = 0;
-	for (const leaf of header.getLeafHeaders()) {
-		if (pinningColumn.includes(leaf.column.id)) {
-			width += leaf.column.getSize();
-		} else {
-			break;
-		}
-	}
-	return width;
-};
-
-const calculateLeftOffset = (table, columnOrHeader) => {
-	const columnId = getColumnId(columnOrHeader);
-	const pinnedColumns = getPinnedColumnIds(table);
-	const currentPinnedIndex = pinnedColumns.indexOf(columnId);
-
-	let leftOffset = 0;
-
-	if (currentPinnedIndex > 0) {
-		for (let i = 0; i < currentPinnedIndex; i++) {
-			const prevColumn = table.getColumn(pinnedColumns[i]);
-			if (prevColumn) {
-				leftOffset += prevColumn.getSize();
-			}
-		}
-	}
-
-	return leftOffset;
-};
-
-const isColumnPin = (table, header) => {
-	const pinningColumn = getPinnedColumnIds(table);
-	const columnId = getColumnId(header);
-	const isPinned = pinningColumn.includes(columnId);
-	return isPinned;
+	return {
+		isPinned: Boolean(pinningPosition),
+		left: pinningPosition === 'left' ? column.getStart('left') : undefined,
+		right: pinningPosition === 'right' ? column.getAfter('right') : undefined,
+	};
 };

 const ColumnNumbersRow = ({ table, selectedColumnId, onColumnSelect }) => {
@ -102,10 +45,9 @@ const ColumnNumbersRow = ({ table, selectedColumnId, onColumnSelect }) => {
 };

 const ColumnNumberCell = ({ column, table, selectedColumnId, onColumnSelect }) => {
-	const isPinned = isColumnPin(table, column);
+	const { isPinned, left, right } = getColumnPinnedStyles(column);
 	const allLeafColumns = table.getAllLeafColumns();
 	const originalIndex = allLeafColumns.findIndex((col) => col.id === column.id);
-	const leftOffset = calculateLeftOffset(table, column);
 	const selected = selectedColumnId === column.id;

 	return (
@ -133,7 +75,8 @@ const ColumnNumberCell = ({ column, table, selectedColumnId, onColumnSelect }) =
 				border: '.063rem solid rgba(209, 213, 220, 1)',
 				borderBottom: 'none',
 				position: isPinned ? 'sticky' : 'relative',
-				left: isPinned ? leftOffset : 'auto',
+				left,
+				right,
 				zIndex: selected ? 16 : isPinned ? 20 : 'auto',
 				cursor: 'pointer',
 				userSelect: 'none',
@ -161,15 +104,12 @@ const getColorBrightness = (hexColor) => {
 	return 0.299 * r + 0.587 * g + 0.114 * b;
 };

-const HeaderCell = ({ header, table, onClick, onChangeWidth }) => {
+const HeaderCell = ({ header, table, pinningPosition, onClick, onChangeWidth }) => {
 	const column = header.column;
-	const pinningColumn = getPinnedColumnIds(table);
-	const isGroup = header.subHeaders?.length > 0;
-	const isPinned = isColumnPin(table, header);
-	const leftOffset = calculateLeftOffset(table, header);
 	const headerSize = header.getSize();
-	const pinnedBandWidth = isGroup ? getPinnedColumnsWidth(header, pinningColumn) : 0;
-	const splitGroup = isGroup && isPinned && pinnedBandWidth > 0 && pinnedBandWidth < headerSize;
+	const isPinned = Boolean(pinningPosition);
+	const leftOffset = pinningPosition === 'left' ? header.getStart() : undefined;
+	const rightOffset = pinningPosition === 'right' ? table.getRightTotalSize() - header.getStart() - headerSize : undefined;

 	const customBgColor = column.columnDef?.muiTableHeadCellProps?.sx?.backgroundColor;

@ -185,34 +125,24 @@ const HeaderCell = ({ header, table, onClick, onChangeWidth }) => {
 		onChangeWidth(header, size + deltaWidth);
 	};

-	// Вычисляем отступ для текста внутри ячейки
-	// Если колонка закреплена, текст должен быть привязан к левому краю ячейки
-	// Если колонка не закреплена, текст должен начинаться после всех закрепленных колонок
-	const getTextLeftOffset = () => {
-		if (isPinned) {
-			return '0';
-		}
-		// Для незакрепленных колонок текст должен начинаться после всех закрепленных
-		// Получаем общую ширину всех закрепленных колонок
-		const pinnedColumns = getPinnedColumnIds(table);
-		let totalPinnedWidth = 0;
-		for (const pinnedId of pinnedColumns) {
-			const pinnedCol = table.getColumn(pinnedId);
-			if (pinnedCol) {
-				totalPinnedWidth += pinnedCol.getSize();
-			}
-		}
-		return `${totalPinnedWidth}px`;
-	};
-
-	const renderCell = (width, textLeft) => (
-		<div style={{ position: 'relative' }}>
+	return (
+		<div
+			style={{
+				position: isPinned ? 'sticky' : 'relative',
+				left: leftOffset,
+				right: rightOffset,
+				zIndex: isPinned ? 21 : 'auto',
+				width: `${headerSize}px`,
+				minWidth: `${headerSize}px`,
+				maxWidth: `${headerSize}px`,
+				flex: '0 0 auto',
+			}}>
 			<div
 				onClick={() => onClick(header)}
 				style={{
-					width: width + 'px',
-					minWidth: width + 'px',
-					maxWidth: width + 'px',
+					width: '100%',
+					minWidth: '100%',
+					maxWidth: '100%',
 					position: 'relative',
 					padding: '4px 6px',
 					textAlign: 'center',
@ -231,9 +161,7 @@ const HeaderCell = ({ header, table, onClick, onChangeWidth }) => {
 				<div
 					style={{
 						textAlign: 'center',
-						position: 'sticky',
-						left: textLeft,
-						right: 0,
+						position: 'relative',
 						paddingRight: '0.5rem',
 						paddingLeft: '0.5rem',
 						backgroundColor: backgroundColor,
@ -245,26 +173,6 @@ const HeaderCell = ({ header, table, onClick, onChangeWidth }) => {
 			</div>
 		</div>
 	);
-
-	if (splitGroup) {
-		return (
-			<>
-				<div style={{ position: 'sticky', left: leftOffset, zIndex: 21, flexShrink: 0 }}>{renderCell(pinnedBandWidth, '0')}</div>
-				<div style={{ position: 'relative', flexShrink: 0 }}>{renderCell(headerSize - pinnedBandWidth, getTextLeftOffset(true))}</div>
-			</>
-		);
-	}
-
-	return (
-		<div
-			style={{
-				position: isPinned ? 'sticky' : 'relative',
-				left: isPinned ? leftOffset : 'auto',
-				zIndex: isPinned ? 21 : 'auto',
-			}}>
-			{renderCell(headerSize, getTextLeftOffset())}
-		</div>
-	);
 };

 const FilterRow = ({ table }) => {
@ -285,16 +193,15 @@ const FilterRow = ({ table }) => {
 				backgroundColor: 'white',
 			}}>
 			{filteredColumns.map((column) => (
-				<FilterCell key={`filter-${column.id}`} column={column} table={table} />
+				<FilterCell key={`filter-${column.id}`} column={column} />
 			))}
 		</div>
 	);
 };

 // Компонент ячейки фильтра
-const FilterCell = ({ column, table }) => {
-	const isPinned = isColumnPin(table, column);
-	const leftOffset = calculateLeftOffset(table, column);
+const FilterCell = ({ column }) => {
+	const { isPinned, left, right } = getColumnPinnedStyles(column);

 	// Определяем тип фильтра на основе колонки
 	const filterVariant = column.columnDef.filterVariant || 'text';
@ -396,7 +303,8 @@ const FilterCell = ({ column, table }) => {
 				border: '.063rem solid rgba(209, 213, 220, 1)',
 				borderTop: 'none',
 				position: isPinned ? 'sticky' : 'relative',
-				left: isPinned ? leftOffset : 'auto',
+				left,
+				right,
 				zIndex: isPinned ? 19 : 'auto',
 			}}>
 			{renderFilterInput()}
@ -404,7 +312,7 @@ const FilterCell = ({ column, table }) => {
 	);
 };

-export const TableHead = ({ table, selectedColumnId, onColumnSelect, onChangeWidth, isLoadingData }) => {
+const TableHeadComponent = ({ table, selectedColumnId, onColumnSelect, onChangeWidth, isLoadingData }) => {
 	const handleHeaderClick = (header) => {
 		if (!header.subHeaders?.length && header.column?.id) {
 			onColumnSelect?.(header.column.id);
@ -415,6 +323,13 @@ export const TableHead = ({ table, selectedColumnId, onColumnSelect, onChangeWid
 		return <div></div>;
 	}

+	const headerSections = [
+		{ groups: table.getLeftHeaderGroups(), pinningPosition: 'left' },
+		{ groups: table.getCenterHeaderGroups(), pinningPosition: undefined },
+		{ groups: table.getRightHeaderGroups(), pinningPosition: 'right' },
+	];
+	const headerRowsCount = Math.max(...headerSections.map(({ groups }) => groups.length));
+
 	return (
 		<>
 			<div
@ -428,17 +343,26 @@ export const TableHead = ({ table, selectedColumnId, onColumnSelect, onChangeWid

 				{table.getState().showColumnFilters && <FilterRow table={table} />}

-				{/* Существующие строки заголовков */}
-				{table.getHeaderGroups().map((headerGroup) => (
-					<div key={headerGroup.id} style={{ display: 'flex' }}>
-						{headerGroup.headers.map((header) => (
-							<React.Fragment key={header.id}>
-								<HeaderCell header={header} table={table} onClick={handleHeaderClick} onChangeWidth={onChangeWidth} />
-							</React.Fragment>
-						))}
+				{/* Pinned и обычные заголовки строятся отдельными группами. */}
+				{Array.from({ length: headerRowsCount }, (_, rowIndex) => (
+					<div key={`header-row-${rowIndex}`} style={{ display: 'flex' }}>
+						{headerSections.flatMap(({ groups, pinningPosition }) =>
+							(groups[rowIndex]?.headers || []).map((header) => (
+								<HeaderCell
+									key={`${pinningPosition || 'center'}-${header.id}`}
+									header={header}
+									table={table}
+									pinningPosition={pinningPosition}
+									onClick={handleHeaderClick}
+									onChangeWidth={onChangeWidth}
+								/>
+							)),
+						)}
 					</div>
 				))}
 			</div>
 		</>
 	);
 };
+
+export const TableHead = React.memo(TableHeadComponent);
--- a/web/src/components/RealtimeTable/constants/PROJECT/CURRENT_EXPENSES.js
+++ b/web/src/components/RealtimeTable/constants/PROJECT/CURRENT_EXPENSES.js
@ -279,7 +279,7 @@ export const config = {
 						accessorKey: 'otchet_ob_ispolnenii_tekuschikh_raskhodov_v_i_kvartale_korrektirovka_limita',
 						columns: [
 							{
-								header: 'По статьям сметы *',
+								header: 'По статьям сметы*',
 								accessorKey: 'data.q1.adj_by_items',
 								columnLetter: 'E',
 								size: 180,
@ -292,7 +292,7 @@ export const config = {
 								},
 							},
 							{
-								header: 'Увеличение сметы **',
+								header: 'Увеличение сметы**',
 								accessorKey: 'data.q1.adj_increase',
 								columnLetter: 'F',
 								size: 200,
@ -368,7 +368,7 @@ export const config = {
 								},
 							},
 							{
-								header: 'За',
+								header: 'За март',
 								accessorKey: 'data.q1.m3',
 								columnLetter: 'J',
 								size: 150,
@ -462,7 +462,7 @@ export const config = {
 						accessorKey: 'otchet_ob_ispolnenii_tekuschikh_raskhodov_v_ii_kvartale_korrektirovka_limita',
 						columns: [
 							{
-								header: 'По статьям сметы *',
+								header: 'По статьям сметы*',
 								accessorKey: 'data.q2.adj_by_items',
 								columnLetter: 'O',
 								size: 180,
@ -475,7 +475,7 @@ export const config = {
 								},
 							},
 							{
-								header: 'Увеличение сметы **',
+								header: 'Увеличение сметы**',
 								accessorKey: 'data.q2.adj_increase',
 								columnLetter: 'P',
 								size: 200,
@ -551,7 +551,7 @@ export const config = {
 								},
 							},
 							{
-								header: 'За',
+								header: 'За июнь',
 								accessorKey: 'data.q2.m3',
 								columnLetter: 'T',
 								size: 150,
@ -645,7 +645,7 @@ export const config = {
 						accessorKey: 'otchet_ob_ispolnenii_tekuschikh_raskhodov_v_iii_kvartale_korrektirovka_limita',
 						columns: [
 							{
-								header: 'По статьям сметы *',
+								header: 'По статьям сметы*',
 								accessorKey: 'data.q3.adj_by_items',
 								columnLetter: 'Y',
 								size: 180,
@ -658,7 +658,7 @@ export const config = {
 								},
 							},
 							{
-								header: 'Увеличение сметы **',
+								header: 'Увеличение сметы**',
 								accessorKey: 'data.q3.adj_increase',
 								columnLetter: 'Z',
 								size: 200,
@ -734,7 +734,7 @@ export const config = {
 								},
 							},
 							{
-								header: 'За',
+								header: 'За сентябрь',
 								accessorKey: 'data.q3.m3',
 								columnLetter: 'AD',
 								size: 150,
@ -828,7 +828,7 @@ export const config = {
 						accessorKey: 'otchet_ob_ispolnenii_tekuschikh_raskhodov_v_iv_kvartale_korrektirovka_limita',
 						columns: [
 							{
-								header: 'По статьям сметы *',
+								header: 'По статьям сметы*',
 								accessorKey: 'data.q4.adj_by_items',
 								columnLetter: 'AI',
 								size: 180,
@ -841,7 +841,7 @@ export const config = {
 								},
 							},
 							{
-								header: 'Увеличение сметы **',
+								header: 'Увеличение сметы**',
 								accessorKey: 'data.q4.adj_increase',
 								columnLetter: 'AJ',
 								size: 200,
@ -917,7 +917,7 @@ export const config = {
 								},
 							},
 							{
-								header: 'За',
+								header: 'За декабрь',
 								accessorKey: 'data.q4.m3',
 								columnLetter: 'AN',
 								size: 150,
--- a/web/src/components/RealtimeTable/constants/tableConfig.js
+++ b/web/src/components/RealtimeTable/constants/tableConfig.js
@ -28,6 +28,10 @@ export const BASE_TABLE_CONFIG = {
 	defaultColumn: { filterFn: 'contains' },
 	columnResizeMode: 'onChange',
 	localization: {
+		expand: 'Раскрыть',
+		expandAll: 'Раскрыть все',
+		collapse: 'Свернуть',
+		collapseAll: 'Свернуть все',
 		noRecordsToDisplay: <span>Нет данных для отображения</span>,
 	},
 };
--- a/web/src/components/RealtimeTable/contexts/RealtimeContext.js
+++ b/web/src/components/RealtimeTable/contexts/RealtimeContext.js
@ -1,116 +1,162 @@
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
-import { toast } from "react-toastify";
-import { useWebSocket } from "../hooks/useWebSocket";
-import { getRowId } from "../utils/rowUtils";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { toast } from 'react-toastify';
+import { useWebSocket } from '../hooks/useWebSocket';
+import { getRowId } from '../utils/rowUtils';

-const RealtimeContext = createContext(null);
+const RealtimeActionsContext = createContext(null);
+const RealtimeConnectionContext = createContext(null);
+const RealtimeVspOptionsContext = createContext(null);
+const LockedCellsStoreContext = createContext(null);

-export const useRealtime = () => {
-	const context = useContext(RealtimeContext);
-	if (!context) {
-		throw new Error("useRealtime must be used within RealtimeProvider");
+const useRequiredContext = (context, hookName) => {
+	const value = useContext(context);
+	if (value === null) {
+		throw new Error(`${hookName} must be used within RealtimeProvider`);
 	}
-	return context;
+	return value;
 };

-export const RealtimeProvider = ({
-	children,
-	formId,
-	sheetName,
-	direction,
-	year,
-	userId,
-	isProject = false,
-}) => {
+const createLockedCellsStore = () => {
+	let cells = new Set();
+	const listenersByCell = new Map();
+
+	const subscribeCell = (cellKey, listener) => {
+		const listeners = listenersByCell.get(cellKey) || new Set();
+		listeners.add(listener);
+		listenersByCell.set(cellKey, listeners);
+
+		return () => {
+			listeners.delete(listener);
+			if (listeners.size === 0) listenersByCell.delete(cellKey);
+		};
+	};
+
+	const setCells = (nextValue) => {
+		const currentCells = [...cells];
+		const resolvedValue = typeof nextValue === 'function' ? nextValue(currentCells) : nextValue;
+		const nextCells = new Set(resolvedValue || []);
+		const changedCells = new Set([
+			...[...cells].filter((cellKey) => !nextCells.has(cellKey)),
+			...[...nextCells].filter((cellKey) => !cells.has(cellKey)),
+		]);
+
+		if (changedCells.size === 0) return;
+		cells = nextCells;
+		changedCells.forEach((cellKey) => {
+			listenersByCell.get(cellKey)?.forEach((listener) => listener());
+		});
+	};
+
+	return {
+		subscribeCell,
+		setCells,
+		hasCell: (cellKey) => cells.has(cellKey),
+		getCells: () => [...cells],
+	};
+};
+
+export const useRealtimeActions = () => useRequiredContext(RealtimeActionsContext, 'useRealtimeActions');
+
+export const useRealtimeConnection = () => useRequiredContext(RealtimeConnectionContext, 'useRealtimeConnection');
+
+export const useVspOptions = () => useRequiredContext(RealtimeVspOptionsContext, 'useVspOptions');
+
+export const useCellLock = (cellKey) => {
+	const store = useRequiredContext(LockedCellsStoreContext, 'useCellLock');
+	const subscribe = useCallback((listener) => store.subscribeCell(cellKey, listener), [cellKey, store]);
+	const getSnapshot = useCallback(() => store.hasCell(cellKey), [cellKey, store]);
+
+	return useSyncExternalStore(subscribe, getSnapshot, () => false);
+};
+
+export const useRealtime = () => {
+	const actions = useRealtimeActions();
+	const connection = useRealtimeConnection();
+	const vspOptions = useVspOptions();
+
+	return { ...actions, ...connection, vspOptions };
+};
+
+export const RealtimeProvider = ({ children, formId, sheetName, direction, year, isProject = false }) => {
 	// Формируем URL (кастомные секреты на фронте пока недоступны, делаем через REACT_APP_ROOT_PATH)
 	const wsUrl = `${(
-		process.env.REACT_APP_API_URL ||
-			process.env.REACT_APP_API_URL ||
-			process.env.REACT_APP_ROOT_PATH ||
-			"ws://localhost:8000"
-	).replace(/^http/, "ws")}${
+		process.env.REACT_APP_API_URL || process.env.REACT_APP_API_URL || process.env.REACT_APP_ROOT_PATH || 'ws://localhost:8000'
+	).replace(/^http/, 'ws')}${
 		!isProject
-			? `/api/v1/ws/form/${formId}/sheet/${sheetName}${direction ? `?direction=${direction}` : ""}`
+			? `/api/v1/ws/form/${formId}/sheet/${sheetName}${direction ? `?direction=${direction}` : ''}`
 			: `/api/v1/ws/projects/${formId}/report/${year}/${sheetName}`
 	}`;

-	//для ячеек которые редактируются другими пользователями
-	const [lockedCells, setLockedCells] = useState([]);
 	const [vspOptions, setVspOptions] = useState([]);
+	const lockedCellsStoreRef = useRef(null);
+	if (lockedCellsStoreRef.current === null) {
+		lockedCellsStoreRef.current = createLockedCellsStore();
+	}
+	const lockedCellsStore = lockedCellsStoreRef.current;

 	const handleMessage = useCallback((data) => {
 		// Обработка ошибок
 		if (data.error) {
 			console.log(data.error.message);
-			toast.error(`Server error:${data.error.message}` || "");
+			toast.error(`Server error:${data.error.message}` || '');
 			onErrorRef.current?.(data.error);
 			return;
 		}

 		switch (data.event) {
-			case "cell_edit_start":
-				console.log("Cell edit started:", data);
+			case 'cell_edit_start':
+				console.log('Cell edit started:', data);
 				if (onCellEditStartRef.current) {
 					onCellEditStartRef.current(data);
 				}
 				break;

-			case "cell_edit_end":
-				console.log("Cell edit ended:", data);
+			case 'cell_edit_end':
+				console.log('Cell edit ended:', data);
 				if (onCellEditEndRef.current) {
 					onCellEditEndRef.current(data);
 				}
 				break;

-			case "cell_updated":
+			case 'cell_updated':
 				if (data.result && onCellUpdateRef.current) {
-					const updatedCells = Array.isArray(data.result)
-						? data.result
-						: [data.result];
+					const updatedCells = Array.isArray(data.result) ? data.result : [data.result];
 					onCellUpdateRef.current(updatedCells);
 				}
 				break;

-			case "row_added":
+			case 'row_added':
 				if (data.result && onRowAddRef.current) {
 					onRowAddRef.current(data);
 				}
 				break;

-			case "row_deleted":
+			case 'row_deleted':
 				if (data.result && onRowDeleteRef.current) {
 					onRowDeleteRef.current(data);
 				}
 				break;

-			case "program_added":
-				console.log("Program added:", data);
+			case 'program_added':
+				console.log('Program added:', data);
 				if (data.result && onProgramAddRef.current) {
 					onProgramAddRef.current(data);
 				}
 				break;

-			case "project_added":
-				console.log("Project added:", data);
+			case 'project_added':
+				console.log('Project added:', data);
 				if (data.result && onProjectAddRef.current) {
 					onProjectAddRef.current(data);
 				}
 				break;

 			default:
-				console.log("Unknown event:", data.event);
+				console.log('Unknown event:', data.event);
 		}
 	}, []);

-	const { isConnectedRef, isConnected, sendMessage, disconnect, lastError } =
-		useWebSocket(wsUrl, handleMessage);
+	const { isConnectedRef, isConnected, sendMessage } = useWebSocket(wsUrl, handleMessage);

 	const onCellUpdateRef = useRef(null);
 	const onRowAddRef = useRef(null);
@ -122,21 +168,20 @@ export const RealtimeProvider = ({
 	const onCellEditStartRef = useRef(null);
 	const onCellEditEndRef = useRef(null);
 	const authAttemptedRef = useRef(false);
-	const reconnectTimerRef = useRef(null);

 	// Функция для получения токена из localStorage
 	const getAccessToken = useCallback(() => {
 		try {
-			const token = localStorage.getItem("access_token");
+			const token = localStorage.getItem('access_token');

 			if (!token) {
-				console.warn("No access token found in localStorage");
+				console.warn('No access token found in localStorage');
 				return null;
 			}

 			return token;
 		} catch (error) {
-			console.error("Error reading token from localStorage:", error);
+			console.error('Error reading token from localStorage:', error);
 			return null;
 		}
 	}, []);
@ -144,13 +189,13 @@ export const RealtimeProvider = ({
 	const sendLogin = useCallback(() => {
 		const token = getAccessToken();
 		if (!token) {
-			console.error("Cannot login: no token available");
-			onErrorRef.current?.("Токен авторизации не найден");
+			console.error('Cannot login: no token available');
+			onErrorRef.current?.('Токен авторизации не найден');
 			return false;
 		}

 		const loginMessage = {
-			event: "user_login",
+			event: 'user_login',
 			data: { token },
 		};

@ -160,10 +205,11 @@ export const RealtimeProvider = ({
 	useEffect(() => {
 		if (isConnected && !authAttemptedRef.current) {
 			authAttemptedRef.current = true;
-			console.log("WebSocket connected, sending login...");
-			setTimeout(() => {
+			console.log('WebSocket connected, sending login...');
+			const timeoutId = setTimeout(() => {
 				sendLogin();
 			}, 100);
+			return () => clearTimeout(timeoutId);
 		}
 	}, [isConnected, sendLogin]);

@ -173,27 +219,29 @@ export const RealtimeProvider = ({
 		}
 	}, [isConnected]);

-	const addCommonField = (message) => {
-		if (isProject) {
-			message.report_type = sheetName;
-			message.project_id = formId;
-			message.year = year;
-		} else {
-			message.sheet = sheetName;
-			message.form_id = formId;
-			message.direction = direction;
-		}
-		return message;
-	};
+	const addCommonField = useCallback(
+		(message) => {
+			if (isProject) {
+				message.report_type = sheetName;
+				message.project_id = formId;
+				message.year = year;
+			} else {
+				message.sheet = sheetName;
+				message.form_id = formId;
+				message.direction = direction;
+			}
+			return message;
+		},
+		[direction, formId, isProject, sheetName, year],
+	);

 	// Функция для начала редактирования ячейки
 	const startEditing = useCallback(
-		async (row, column) => {
+		(row, column) => {
 			const columnId = column.id;
-			const rowId = row.id;

-			if (!isConnectedRef) {
-				onErrorRef.current?.("WebSocket не подключен");
+			if (!isConnectedRef.current) {
+				onErrorRef.current?.('WebSocket не подключен');
 				return false;
 			}

@ -201,7 +249,7 @@ export const RealtimeProvider = ({
 			const colId = columnId.slice(5); // убираем префикс "data."

 			const message = {
-				event: "cell_edit_start",
+				event: 'cell_edit_start',
 				data: {
 					line_id: lineId,
 					column: colId,
@ -215,17 +263,16 @@ export const RealtimeProvider = ({

 			return true;
 		},
-		[isConnected, sendMessage],
+		[isConnectedRef, sendMessage],
 	);

 	// Функция для завершения редактирования ячейки
 	const endEditing = useCallback(
-		async (row, column) => {
+		(row, column) => {
 			const columnId = column.id;
-			const rowId = row.id;

-			if (!isConnectedRef) {
-				onErrorRef.current?.("WebSocket не подключен");
+			if (!isConnectedRef.current) {
+				onErrorRef.current?.('WebSocket не подключен');
 				return false;
 			}

@ -233,7 +280,7 @@ export const RealtimeProvider = ({
 			const colId = columnId.slice(5);

 			const message = {
-				event: "cell_edit_end",
+				event: 'cell_edit_end',
 				data: {
 					line_id: lineId,
 					column: colId,
@ -247,22 +294,21 @@ export const RealtimeProvider = ({

 			return true;
 		},
-		[isConnected, sendMessage],
+		[isConnectedRef, sendMessage],
 	);

 	const updateCell = useCallback(
-		async (row, column, value) => {
+		(row, column, value) => {
 			const columnId = column.id;
-			const rowId = row.id;
-			if (!isConnectedRef) {
-				onErrorRef.current?.("WebSocket не подключен");
+			if (!isConnectedRef.current) {
+				onErrorRef.current?.('WebSocket не подключен');
 				return false;
 			}

 			const lineId = getRowId(row);
 			const colId = columnId.slice(5);
 			const message = {
-				event: "cell_updated",
+				event: 'cell_updated',
 				data: {
 					line_id: lineId,
 					line_id_code: row.id,
@ -278,79 +324,79 @@ export const RealtimeProvider = ({

 			return true;
 		},
-		[isConnected, sendMessage],
+		[isConnectedRef, sendMessage],
 	);

 	const addRow = useCallback(
-		async (rowData) => {
-			if (!isConnectedRef) {
-				onErrorRef.current?.("Нет подключения или авторизации");
+		(rowData) => {
+			if (!isConnectedRef.current) {
+				onErrorRef.current?.('Нет подключения или авторизации');
 				return false;
 			}

 			const message = {
-				event: "row_added",
+				event: 'row_added',
 				data: rowData,
 			};
 			addCommonField(message);

 			return sendMessage(message);
 		},
-		[isConnected, sendMessage, sheetName, formId, direction],
+		[addCommonField, isConnectedRef, sendMessage],
 	);

 	const addProject = useCallback(
-		async (rowData) => {
-			if (!isConnectedRef) {
-				onErrorRef.current?.("Нет подключения или авторизации");
+		(rowData) => {
+			if (!isConnectedRef.current) {
+				onErrorRef.current?.('Нет подключения или авторизации');
 				return false;
 			}

 			const message = {
-				event: "project_added",
+				event: 'project_added',
 				data: rowData,
 			};
 			addCommonField(message);

 			return sendMessage(message);
 		},
-		[isConnected, sendMessage, sheetName, formId, direction],
+		[addCommonField, isConnectedRef, sendMessage],
 	);

 	const addProgram = useCallback(
-		async (rowData) => {
-			if (!isConnectedRef) {
-				onErrorRef.current?.("Нет подключения или авторизации");
+		(rowData) => {
+			if (!isConnectedRef.current) {
+				onErrorRef.current?.('Нет подключения или авторизации');
 				return false;
 			}

 			const message = {
-				event: "program_added",
+				event: 'program_added',
 				data: rowData,
 			};
 			addCommonField(message);

 			return sendMessage(message);
 		},
-		[isConnected, sendMessage, sheetName, formId, direction],
+		[addCommonField, isConnectedRef, sendMessage],
 	);

 	const deleteRow = useCallback(
-		async (rowId) => {
-			if (!isConnectedRef) {
-				onErrorRef.current?.("Нет подключения или авторизации");
+		(rowId) => {
+			if (!isConnectedRef.current) {
+				onErrorRef.current?.('Нет подключения или авторизации');
 				return false;
 			}

 			const message = {
-				event: "row_deleted",
+				event: 'row_deleted',
 				data: { row_id: rowId },
 			};
 			addCommonField(message);

 			return sendMessage(message);
 		},
-		[isConnected, sendMessage, sheetName, formId, direction],
+		[addCommonField, isConnectedRef, sendMessage],
 	);

 	const subscribeToCellUpdates = useCallback((callback) => {
@ -417,42 +463,65 @@ export const RealtimeProvider = ({
 	}, []);

 	const retryLogin = useCallback(() => {
-		if (isConnected) {
+		if (isConnectedRef.current) {
 			authAttemptedRef.current = false;
 			sendLogin();
 		}
-	}, [isConnected, sendLogin]);
+	}, [isConnectedRef, sendLogin]);
+
+	const actions = useMemo(
+		() => ({
+			startEditing,
+			endEditing,
+			updateCell,
+			addRow,
+			addProgram,
+			addProject,
+			deleteRow,
+			subscribeToRowAdds,
+			subscribeToRowDeletes,
+			subscribeToProgramAdds,
+			subscribeToProjectAdds,
+			subscribeToErrors,
+			subscribeToAuthSuccess,
+			subscribeToCellEditStart,
+			subscribeToCellEditEnd,
+			subscribeToCellUpdates,
+			retryLogin,
+			setLockedCells: lockedCellsStore.setCells,
+			setVspOptions,
+		}),
+		[
+			addProgram,
+			addProject,
+			addRow,
+			deleteRow,
+			endEditing,
+			lockedCellsStore,
+			retryLogin,
+			startEditing,
+			subscribeToAuthSuccess,
+			subscribeToCellEditEnd,
+			subscribeToCellEditStart,
+			subscribeToCellUpdates,
+			subscribeToErrors,
+			subscribeToProgramAdds,
+			subscribeToProjectAdds,
+			subscribeToRowAdds,
+			subscribeToRowDeletes,
+			updateCell,
+		],
+	);
+
+	const connection = useMemo(() => ({ isConnected }), [isConnected]);

 	return (
-		<RealtimeContext.Provider
-			value={{
-				isConnected,
-				error: lastError,
-				startEditing,
-				endEditing,
-				updateCell,
-				addRow,
-				addProgram,
-				addProject,
-				deleteRow,
-				subscribeToRowAdds,
-				subscribeToRowDeletes,
-				subscribeToProgramAdds,
-				subscribeToProjectAdds,
-				subscribeToErrors,
-				subscribeToAuthSuccess,
-				subscribeToCellEditStart,
-				subscribeToCellEditEnd,
-				subscribeToCellUpdates,
-				retryLogin,
-				lockedCells,
-				setLockedCells,
-				vspOptions,
-				setVspOptions,
-				releaseAllLocks: () => releaseAllLocks(userId),
-			}}
-		>
-			{children}
-		</RealtimeContext.Provider>
+		<RealtimeActionsContext.Provider value={actions}>
+			<RealtimeConnectionContext.Provider value={connection}>
+				<RealtimeVspOptionsContext.Provider value={vspOptions}>
+					<LockedCellsStoreContext.Provider value={lockedCellsStore}>{children}</LockedCellsStoreContext.Provider>
+				</RealtimeVspOptionsContext.Provider>
+			</RealtimeConnectionContext.Provider>
+		</RealtimeActionsContext.Provider>
 	);
 };
--- a/web/src/components/RealtimeTable/hooks/useColumnSettings.js
+++ b/web/src/components/RealtimeTable/hooks/useColumnSettings.js
@ -33,7 +33,10 @@ export const useColumnSettings = (tableKey) => {
 	}, [tableKey]);

 	const handlePinColumn = useCallback((colId) => {
-		setColumnPinning((prev) => ({ ...prev, left: [...prev.left, colId] }));
+		setColumnPinning((prev) => {
+			if (!colId || prev.left.includes(colId)) return prev;
+			return { ...prev, left: [...prev.left, colId] };
+		});
 	}, []);

 	const handleUnpinColumn = useCallback((colId) => {
@ -63,7 +66,18 @@ export const useColumnSettings = (tableKey) => {
 			return acc;
 		}, {});

-		setColumnVisibility((prev) => ({ ...prev, ...leafCols }));
+		setColumnVisibility((prev) => {
+			const hasChanges = Object.entries(leafCols).some(([columnId, isVisible]) => prev[columnId] !== isVisible);
+			return hasChanges ? { ...prev, ...leafCols } : prev;
+		});
+	}, []);
+
+	const handleSetColumnsVisibility = useCallback((visibilityByColumnId) => {
+		setColumnVisibility((prev) => {
+			const entries = Object.entries(visibilityByColumnId);
+			const hasChanges = entries.some(([columnId, isVisible]) => prev[columnId] !== isVisible);
+			return hasChanges ? { ...prev, ...visibilityByColumnId } : prev;
+		});
 	}, []);

 	// Опционально: функция для сброса всех настроек
@ -84,6 +98,7 @@ export const useColumnSettings = (tableKey) => {
 		handleUnpinColumn,
 		handleSetColumnWidth,
 		handleToggleColumnVisibility,
+		handleSetColumnsVisibility,
 		resetAllSettings, // добавляем функцию сброса
 		tableKey, // опционально возвращаем tableKey
 	};
--- a/web/src/components/RealtimeTable/hooks/useRealtimeData.js
+++ b/web/src/components/RealtimeTable/hooks/useRealtimeData.js
@ -1,29 +1,54 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { toast } from "react-toastify";
-import { FormsSheetApi } from "../../../api/form_sheet";
-import { ProjectsApi } from "../../../api/projects";
-import { useRealtime } from "../contexts/RealtimeContext";
-import {
-	addRootRow,
-	deleteRow,
-	insertCell,
-	insertProjectRow,
-	updateCells,
-} from "../utils/cellUtils";
-import { getParentId, isVspNewRow } from "../utils/rowUtils";
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { FormsSheetApi } from '../../../api/form_sheet';
+import { ProjectsApi } from '../../../api/projects';
+import { useRealtimeActions, useRealtimeConnection } from '../contexts/RealtimeContext';
+import { addRootRow, deleteRow, insertCell, insertProjectRow, updateCells } from '../utils/cellUtils';
+import { getParentId, isVspNewRow } from '../utils/rowUtils';
+
+const ROW_TYPE_LEVELS = {
+	ROOT: 0,
+	GROUP: 1,
+	ITEM: 2,
+	SUB_ITEM: 3,
+	INPUT: 4,
+};
+
+const buildHierarchy = (items) => {
+	const result = [];
+	const stack = [];
+
+	for (const item of items) {
+		const currentLevel = ROW_TYPE_LEVELS[item.row_type] ?? 999;
+
+		while (stack.length > 0 && (ROW_TYPE_LEVELS[stack.at(-1).row_type] ?? 999) >= currentLevel) {
+			stack.pop();
+		}
+
+		const parent = stack.at(-1);
+		const newNode = { ...item, subRows: [] };
+
+		if (parent) {
+			parent.subRows.push(newNode);
+		} else {
+			result.push(newNode);
+		}
+
+		if (item.row_type !== 'INPUT') {
+			stack.push(newNode);
+		}
+	}
+
+	return result;
+};

 const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 	const [data, setData] = useState([]);
 	const [columnsCurStage, setColumnsCurStage] = useState([]);
-	const [isConnected, setIsConnected] = useState(false);
-	const [error, setError] = useState(null);
 	const [isLoading, setIsLoading] = useState(true);
 	const [editingCells, setEditingCells] = useState({});
-	const dataRef = useRef(data);

 	const {
-		isConnected: wsConnected,
-		error: wsError,
 		subscribeToCellUpdates,
 		subscribeToRowAdds,
 		subscribeToProgramAdds,
@ -33,62 +58,19 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 		subscribeToCellEditStart,
 		subscribeToCellEditEnd,
 		setLockedCells,
-	} = useRealtime();
-
-	const formatedToSubRows = useCallback((depth, oldData) => {
-		if (depth === 0) return oldData;
-
-		const dataFiltered = oldData.filter((d) => d.depth < depth);
-
-		for (let i = 0; i < dataFiltered.length; i++) {
-			const curRow = dataFiltered[i];
-
-			// Находим следующий элемент на том же или более высоком уровне
-			let nextRow = null;
-			for (let j = i + 1; j < dataFiltered.length; j++) {
-				if (dataFiltered[j].depth <= curRow.depth) {
-					nextRow = dataFiltered[j];
-					break;
-				}
-			}
-
-			// Находим всех потомков для текущей строки
-			const subRows = oldData.filter((d) => {
-				// Потомок должен иметь глубину больше чем у родителя
-				if (d.depth <= curRow.depth) return false;
-
-				// Потомок должен идти после родителя по sort_order
-				if (d.sort_order <= curRow.sort_order) return false;
-
-				// Если есть следующий элемент на том же уровне - потомок должен быть до него
-				if (nextRow && d.sort_order >= nextRow.sort_order) return false;
-
-				return true;
-			});
-
-			if (subRows.length > 0) {
-				curRow.subRows = subRows;
-			}
-		}
-
-		// Рекурсивно обрабатываем следующий уровень
-		// Находим максимальную глубину в текущем dataFiltered
-		const maxDepth = Math.max(...dataFiltered.map((d) => d.depth));
-		if (maxDepth > 0) {
-			return formatedToSubRows(maxDepth, dataFiltered);
-		}
-
-		return dataFiltered;
-	}, []);
+	} = useRealtimeActions();
+	const { isConnected: wsConnected } = useRealtimeConnection();

 	// Загрузка начальных данных
 	useEffect(() => {
+		let isCancelled = false;
+
 		const loadInitialData = async () => {
 			try {
 				setIsLoading(true);
 				let res;

-				if (formType === "PROJECT") {
+				if (formType === 'PROJECT') {
 					res = await ProjectsApi.getTableData(formId, sheetName, year);
 				} else if (direction !== null) {
 					res = await FormsSheetApi.get(formId, sheetName, {
@ -97,15 +79,12 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 				} else {
 					res = await FormsSheetApi.get(formId, sheetName);
 				}
+				if (isCancelled) return;
+
 				const data = res.result.filter((d) => d.depth > -1);
 				const curStageColumns = res.result.filter((d) => d.depth === -1)[0];
-				if (curStageColumns) {
-					const cols = [];
-					for (const col of curStageColumns.data.editable) {
-						cols.push(`data.${col.column}`);
-					}
-					setColumnsCurStage(cols);
-				}
+				const stageColumns = (curStageColumns?.data?.editable || []).map((column) => `data.${column.column}`);
+				setColumnsCurStage(stageColumns);

 				if (!data || data.length === 0) {
 					setData([]);
@ -115,74 +94,18 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 				const hierarchicalData = buildHierarchy(data);
 				setData(hierarchicalData);
 			} catch (err) {
-				console.error("Failed to load initial data:", err);
-				setError(err.message);
+				if (!isCancelled) console.error('Failed to load initial data:', err);
 			} finally {
-				setIsLoading(false);
+				if (!isCancelled) setIsLoading(false);
 			}
 		};

 		loadInitialData();
-	}, [formId, sheetName]);

-	const buildHierarchy = (items) => {
-		const result = [];
-		const stack = [];
-
-		const getTypeLevel = (type) => {
-			const levels = {
-				ROOT: 0,
-				GROUP: 1,
-				ITEM: 2,
-				SUB_ITEM: 3,
-				INPUT: 4,
-			};
-			return levels[type] ?? 999;
+		return () => {
+			isCancelled = true;
 		};
-
-		for (const item of items) {
-			const currentLevel = getTypeLevel(item.row_type);
-
-			while (
-				stack.length > 0 &&
-				getTypeLevel(stack[stack.length - 1].row_type) >= currentLevel
-			) {
-				stack.pop();
-			}
-
-			const parent = stack.length > 0 ? stack[stack.length - 1] : null;
-
-			const newNode = { ...item, subRows: [] };
-
-			if (parent) {
-				if (!parent.subRows) {
-					parent.subRows = [];
-				}
-				parent.subRows.push(newNode);
-			} else {
-				result.push(newNode);
-			}
-
-			// Добавляем текущий узел в стек, если он может иметь детей
-			if (item.row_type !== "INPUT") {
-				stack.push(newNode);
-			}
-		}
-
-		return result;
-	};
-
-	useEffect(() => {
-		setIsConnected(wsConnected);
-	}, [wsConnected]);
-
-	useEffect(() => {
-		setError(wsError);
-	}, [wsError]);
-
-	useEffect(() => {
-		dataRef.current = data;
-	}, [data]);
+	}, [direction, formId, formType, sheetName, year]);

 	// Подписка на обновления WebSocket
 	useEffect(() => {
@ -213,12 +136,12 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 				[[], null],
 			);
 			if (newRow === null) {
-				toast.error("Ошибка получения данных");
+				toast.error('Ошибка получения данных');
 				return;
 			}
 			setData((prevData) => {
 				let data = structuredClone(prevData);
-				if (prevData[0]?.row_type !== "ROOT" && updates[0][0] === 'ROOT') {
+				if (prevData[0]?.row_type !== 'ROOT' && updates[0][0] === 'ROOT') {
 					const newRowRoot = updates[0];
 					data = addRootRow(data, newRowRoot);
 				}
@ -233,7 +156,7 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 			const program_id = data.data.program_id;
 			const [updatedCells, newRow] = updates.reduce(
 				(res, row) => {
-					if (row[0] === "ITEM") {
+					if (row[0] === 'ITEM') {
 						res[1] = row;
 					} else {
 						res[0].push(row);
@ -243,7 +166,7 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 				[[], null],
 			);
 			if (newRow === null) {
-				toast.error("Ошибка получения данных");
+				toast.error('Ошибка получения данных');
 				return;
 			}
 			setData((prevData) => {
@ -256,7 +179,7 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 		const unsubscribeProgramAdds = subscribeToProgramAdds((msg) => {
 			let newRow = msg.result[1][0];
 			setData((prevData) => {
-				const hasRoot = prevData.length > 0 && prevData[0].row_type === "ROOT";
+				const hasRoot = prevData.length > 0 && prevData[0].row_type === 'ROOT';
 				if (hasRoot) {
 					newRow = msg.result[1][1];
 				}
@ -291,7 +214,7 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 		// Обработчик начала редактирования ячейки
 		const unsubscribeCellEditStart = subscribeToCellEditStart((data) => {
 			const dataCell = data.data;
-			dataCell.column = "data." + dataCell.column;
+			dataCell.column = `data.${dataCell.column}`;
 			if (data.is_self) {
 				setEditingCells(dataCell);
 				return;
@ -318,9 +241,7 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 		});

 		const unsubscribeErrors = subscribeToErrors((err) => {
-			console.error("WebSocket error:", err);
-			setError(err);
-			setTimeout(() => setError(null), 5000);
+			console.error('WebSocket error:', err);
 		});

 		return () => {
@ -343,35 +264,12 @@ const useRealtimeData = (formId, sheetName, direction, formType, year) => {
 		subscribeToCellEditEnd,
 		subscribeToProgramAdds,
 		subscribeToProjectAdds,
-		formatedToSubRows,
 	]);

-	const updateData = useCallback(
-		(newData) => {
-			if (Array.isArray(newData) && !newData[0]?.subRows) {
-				const maxDepth = newData.reduce(
-					(prev, current) => {
-						return (prev.depth || 0) > (current.depth || 0) ? prev : current;
-					},
-					{ depth: 0 },
-				).depth;
-
-				const formattedData = formatedToSubRows(maxDepth, newData);
-				setData(formattedData);
-			} else {
-				setData(newData);
-			}
-		},
-		[formatedToSubRows],
-	);
-
 	return {
 		data,
-		setData,
 		columnsCurStage,
-		isConnected,
 		isLoading,
-		error,
 		editingCells,
 	};
 };
--- a/web/src/components/RealtimeTable/hooks/useValidationRules.js
+++ b/web/src/components/RealtimeTable/hooks/useValidationRules.js
@ -1,32 +1,49 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { validationRules } from '../constants/validation';
 import { buildColumnHeaderPaths, collectInvalidErrors, isValidationRuleEnabled } from '../utils/validationUtils';

-export const useValidationRules = (data = [], columns = [], formType, sheetName) => {
-	const headerPaths = useMemo(() => buildColumnHeaderPaths(columns), [columns]);
+const EMPTY_ARRAY = [];
+
+export const useValidationRules = (data, columns, formType, sheetName) => {
+	const safeData = data || EMPTY_ARRAY;
+	const safeColumns = columns || EMPTY_ARRAY;
+	const stableErrorsRef = useRef([]);
+	const headerPaths = useMemo(() => buildColumnHeaderPaths(safeColumns), [safeColumns]);
 	const activeRules = useMemo(
 		() => validationRules.filter((rule) => isValidationRuleEnabled(rule, { formType, sheetName })),
 		[formType, sheetName],
 	);

-	const errors = useMemo(() => {
+	const calculatedErrors = useMemo(() => {
 		const result = [];
 		const seen = new Set();

 		for (const rule of activeRules) {
-			collectInvalidErrors(data, rule, headerPaths, result, seen);
+			collectInvalidErrors(safeData, rule, headerPaths, result, seen);
 		}

 		return result;
-	}, [activeRules, data, headerPaths]);
+	}, [activeRules, headerPaths, safeData]);
+
+	const previousErrors = stableErrorsRef.current;
+	const errorsAreEqual =
+		previousErrors.length === calculatedErrors.length &&
+		previousErrors.every(
+			(error, index) =>
+				error.id === calculatedErrors[index].id &&
+				error.columnId === calculatedErrors[index].columnId &&
+				error.message === calculatedErrors[index].message,
+		);
+	if (!errorsAreEqual) {
+		stableErrorsRef.current = calculatedErrors;
+	}
+	const errors = stableErrorsRef.current;

 	const isCellInvalid = useCallback(
 		(columnId, value, row) =>
 			activeRules.some(
 				(rule) =>
-					rule.columnKeys.includes(columnId) &&
-					(!rule.appliesToRow || rule.appliesToRow(row)) &&
-					rule.isInvalid(value, row, columnId),
+					rule.columnKeys.includes(columnId) && (!rule.appliesToRow || rule.appliesToRow(row)) && rule.isInvalid(value, row, columnId),
 			),
 		[activeRules],
 	);
--- a/web/src/components/RealtimeTable/tableColumns.jsx
+++ b/web/src/components/RealtimeTable/tableColumns.jsx
@ -1,32 +1,19 @@
 import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useParams } from 'react-router';
-import { useRealtime } from './contexts/RealtimeContext';
+import { useVspOptions } from './contexts/RealtimeContext';

-import { sectionCodeColor } from './constants/columnConfig';
-import { blueColumn, greenColumn } from './constants/columnColors';
-import { useAuth } from '../../app/context/AuthProvider';
 import { ROLES_NAME_ID } from '../../constants/constants';
+import { blueColumn } from './constants/columnColors';
+import { sectionCodeColor } from './constants/columnConfig';

 import VspDropdownEditCell from './Cell/EditCell/VspDropdownEditCell';

-const EditCellPortal = React.memo(({
-	cell,
-	table,
-	EditCell,
-	onSaveStart,
-	onSaveEnd,
-	onError,
-	isEditable
-}) => {
+const EditCellPortal = React.memo(({ cell, table, EditCell, onError, isEditable }) => {
 	const { formId, formType, sheetName, direction } = useParams();
 	const tableKey = `${formId}_${formType}_${sheetName}_${direction}`;
 	const ref = useRef(null);
 	const [refTbody, setRefTbody] = useState(null);
-	const [isSaving, setIsSaving] = useState(false);
-
-	const { endEditing: contextEndEditing } = useRealtime();
-
 	useEffect(() => {
 		if (ref.current) {
 			const tbodyRef = ref.current.offsetParent?.offsetParent?.offsetParent;
@ -36,54 +23,50 @@ const EditCellPortal = React.memo(({
 		}
 	}, []);

-	const handleChange = useCallback((val) => {
-		table.setEditingCell(null);
-		try {
-			if (table.options.meta?.updateCell) {
-				const success = table.options.meta.updateCell(
-					cell.row,
-					cell.column,
-					val
-				);
-				if (!success) {
-					console.error('Failed to update cell via WebSocket');
-					onError?.('Не удалось сохранить изменение');
+	const handleChange = useCallback(
+		(val) => {
+			table.setEditingCell(null);
+			try {
+				if (table.options.meta?.updateCell) {
+					const success = table.options.meta.updateCell(cell.row, cell.column, val);
+					if (!success) {
+						console.error('Failed to update cell via WebSocket');
+						onError?.('Не удалось сохранить изменение');
+					}
 				}
+			} catch (error) {
+				console.error('Error updating cell:', error);
+				onError?.(error.message);
 			}
-		} catch (error) {
-			console.error('Error updating cell:', error);
-			onError?.(error.message);
-		}
-	}, [table, cell, onError]);
+		},
+		[table, cell, onError],
+	);

-	const editCellProps = useMemo(() => ({
-		refCell: ref,
-		cell,
-		value: cell.getValue(),
-		disabled: !isEditable,
-		onChange: handleChange,
-		tableId: tableKey,
-		table,
-		cellId: `${cell.row.id}_${cell.column.id}`,
-	}), [cell, isEditable, handleChange, tableKey, table]);
+	const editCellProps = useMemo(
+		() => ({
+			refCell: ref,
+			cell,
+			value: cell.getValue(),
+			disabled: !isEditable,
+			onChange: handleChange,
+			tableId: tableKey,
+			table,
+			cellId: `${cell.row.id}_${cell.column.id}`,
+		}),
+		[cell, isEditable, handleChange, tableKey, table],
+	);

 	const editType = cell.column.columnDef?.editType;

 	const portalContent = useMemo(() => {
-		if (!refTbody || isSaving) return null;
+		if (!refTbody) return null;

 		if (editType === 'vsp_dropdown') {
-			return createPortal(
-				<VspDropdownEditCell {...editCellProps} />,
-				refTbody
-			);
+			return createPortal(<VspDropdownEditCell {...editCellProps} />, refTbody);
 		}

-		return createPortal(
-			<EditCell {...editCellProps} />,
-			refTbody
-		);
-	}, [refTbody, isSaving, editCellProps, EditCell, editType]);
+		return createPortal(<EditCell {...editCellProps} />, refTbody);
+	}, [refTbody, editCellProps, EditCell, editType]);

 	return (
 		<>
@ -94,18 +77,41 @@ const EditCellPortal = React.memo(({
 });

 function getColorCell(colors, column, row) {
-	if (row.original.data.section_code) {
-		const section_code = row.original.data.section_code[0];
-		return (sectionCodeColor[section_code] || blueColumn)[row.original?.row_type || row.row_type];
+	const rowType = row?.original?.row_type || row?.row_type;
+	const sectionCodeValue = row?.original?.data?.section_code ?? row?.original?.data?.header?.section_code;
+
+	if (sectionCodeValue !== null && sectionCodeValue !== undefined && sectionCodeValue !== '') {
+		const sectionCode = String(sectionCodeValue)[0];
+		return (sectionCodeColor[sectionCode] || blueColumn)[rowType];
 	}
-	return colors[column.id]?.color_type?.[row.original?.row_type || row.row_type];
+
+	return colors[column.id]?.color_type?.[rowType];
 }

+const UPPERCASE_MONTH_PATTERN = /ЯНВАРЬ|ФЕВРАЛЬ|МАРТ|АПРЕЛЬ|МАЙ|ИЮНЬ|ИЮЛЬ|АВГУСТ|СЕНТЯБРЬ|ОКТЯБРЬ|НОЯБРЬ|ДЕКАБРЬ/g;
+
+const normalizeMonthHeader = (header) => {
+	if (typeof header !== 'string') return header;
+
+	return header.replace(UPPERCASE_MONTH_PATTERN, (month, offset) => {
+		const normalizedMonth = month.toLowerCase();
+		if (offset !== 0) return normalizedMonth;
+
+		return normalizedMonth[0].toUpperCase() + normalizedMonth.slice(1);
+	});
+};
+
+const CellWithVspOptions = React.memo(({ CellComponent, cellProps }) => {
+	const vspOptions = useVspOptions();
+	return <CellComponent {...cellProps} vspOptions={vspOptions} />;
+});
+
 export const getTableColumns = ({
 	Cell,
 	EditCell,
 	columnsConfig,
 	columnsCurStage,
+	userRoleId,
 	onCellUpdateError,
 	onCellNumberClick,
 	isCellInvalid,
@ -113,24 +119,23 @@ export const getTableColumns = ({
 	const columnColors = { ...columnsConfig.colors };
 	const columns = structuredClone(columnsConfig.columns);

-	const { user } = useAuth();
-
 	const cellPropsCache = new WeakMap();
 	const editPropsCache = new WeakMap();

 	const isEditable = (row, column) => {
 		if (row.original?.row_type !== 'INPUT') return false;
-		if (user.role_id === ROLES_NAME_ID.admin) return true;
+		if (userRoleId === ROLES_NAME_ID.admin) return true;
 		const keyCol = column.id;
 		if (columnsCurStage.includes(keyCol)) return true;
 		return false;
-	}
+	};

 	const getCachedCellProps = (row, column, table) => {
 		const key = `${row.id}_${column.id}`;
 		const value = row.getValue(column.id);
 		const isInvalid = isCellInvalid?.(column.id, value, row.original) || false;
-
+		const isEditableCell = isEditable(row, column);
+		const backgroundColor = getColorCell(columnColors, column, row);
 		if (!cellPropsCache.has(row)) {
 			cellPropsCache.set(row, {});
 		}
@ -139,35 +144,37 @@ export const getTableColumns = ({
 		if (rowCache[key]) {
 			const cached = rowCache[key];
 			const currentGlobalFilter = table.getState().globalFilter;
-			const currentColumnFilter = table.getState().columnFilters?.find(f => f.id === column.id)?.value;
+			const currentColumnFilter = table.getState().columnFilters?.find((f) => f.id === column.id)?.value;

-			if (cached.globalFilter === currentGlobalFilter &&
+			if (
+				cached.globalFilter === currentGlobalFilter &&
 				cached.columnFilter === currentColumnFilter &&
 				cached.value === value &&
-				cached.isInvalid === isInvalid) {
+				cached.isInvalid === isInvalid &&
+				cached.backgroundColor === backgroundColor
+			) {
 				return cached;
 			}
 		}

 		const globalFilter = table.getState().globalFilter;
-		const columnFilter = table.getState().columnFilters?.find(f => f.id === column.id)?.value;
+		const columnFilter = table.getState().columnFilters?.find((f) => f.id === column.id)?.value;

 		const props = {
 			globalFilter,
 			columnFilter,
-			isEditable: isEditable(row, column),
-			backgroundColor: getColorCell(columnColors, column, row),
-			isUpdating: table.options.meta?.updatingCells?.[`${row.id}_${column.id}`],
+			isEditable: isEditableCell,
+			backgroundColor,
 			isInvalid,
 			value,
-			_hash: `${globalFilter}_${columnFilter}_${row.id}_${column.id}_${value}_${isInvalid}`,
+			_hash: `${globalFilter}_${columnFilter}_${key}_${value}_${isInvalid}_${backgroundColor}`,
 		};

 		rowCache[key] = props;
 		return props;
 	};

-	const getCachedEditProps = (row, column, table) => {
+	const getCachedEditProps = (row, column) => {
 		const key = `${row.id}_${column.id}`;

 		if (!editPropsCache.has(row)) {
@ -190,33 +197,32 @@ export const getTableColumns = ({
 	// Оптимизированная функция processColumns
 	const processColumns = (columns) => {
 		for (const col of columns) {
+			col.header = normalizeMonthHeader(col.header);
+			const usesVspOptions = col.editType === 'vsp_dropdown';
+
 			col.Cell = ({ cell, table, column, row }) => {
-				const { vspOptions } = useRealtime();
 				const props = getCachedCellProps(row, column, table);

-				const cellProps = useMemo(() => ({
-					row,
-					column,
-					cell,
-					vspOptions,
-					...props,
-				}), [row, column, cell, props, vspOptions,]);
+				const cellProps = useMemo(
+					() => ({
+						row,
+						column,
+						cell,
+						...props,
+					}),
+					[row, column, cell, props],
+				);

-				return <Cell {...cellProps} />;
+				return usesVspOptions ? <CellWithVspOptions CellComponent={Cell} cellProps={cellProps} /> : <Cell {...cellProps} />;
 			};

 			col.Edit = ({ cell, table, row, column }) => {
-				const props = getCachedEditProps(row, column, table);
+				const props = getCachedEditProps(row, column);

-				const editComponent = useMemo(() => (
-					<EditCellPortal
-						cell={cell}
-						table={table}
-						EditCell={EditCell}
-						onError={onCellUpdateError}
-						isEditable={props.isEditable}
-					/>
-				), [cell, table, EditCell, onCellUpdateError, props.isEditable]);
+				const editComponent = useMemo(
+					() => <EditCellPortal cell={cell} table={table} EditCell={EditCell} onError={onCellUpdateError} isEditable={props.isEditable} />,
+					[cell, table, EditCell, onCellUpdateError, props.isEditable],
+				);

 				return editComponent;
 			};
@ -229,23 +235,22 @@ export const getTableColumns = ({
 				processColumns(col.columns);
 			}
 		}
-	}
-
+	};

 	processColumns(columns);

 	const rowNumber = {
 		accessorKey: 'sort_order',
-		header: '#',
+		header: '№',
 		size: 50,
 		enableEditing: false,
 		Cell: ({ cell, row }) => {
 			const handleClick = useCallback(() => {
 				onCellNumberClick(row.id);
 			}, [row.id, onCellNumberClick]);
-			return <button type="button" onClick={handleClick}>{`${cell.getValue()}   `}</button>;
+			return <button type='button' onClick={handleClick}>{`${cell.getValue()}   `}</button>;
 		},
 	};

 	return [rowNumber, ...columns];
-};
+};
--- a/web/src/components/common/CollapsibleTree.jsx
+++ b/web/src/components/common/CollapsibleTree.jsx
@ -2,35 +2,38 @@ import { ArrowDropDown, ChevronRight, ExpandMore } from '@mui/icons-material';
 import { CheckBox, CheckBoxOutlineBlank, IndeterminateCheckBox } from '@mui/icons-material';
 import { Box, Checkbox, InputAdornment, Popover, TextField, Typography } from '@mui/material';
 import { SimpleTreeView, TreeItem } from '@mui/x-tree-view';
-import { useEffect, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { filterColumnTree, getColumnTreeLeafKeys } from '../RealtimeTable/utils/columnUtils';

+const EMPTY_IDS = [];
+
 const CollapsibleTree = ({
 	columnTree,
-	excludeColumnKeys = [],
+	excludeColumnKeys = EMPTY_IDS,
 	placeholder = 'Скрыть столбцы',
 	placeholderSelect = 'Скрыто столбцов: ',
-	selectedIds = [],
+	selectedIds = EMPTY_IDS,
 	onSelectNode,
+	onSelectAllNodes,
 	forStage = false,
 }) => {
 	const [expandedItems, setExpandedItems] = useState([]);
 	const [anchorEl, setAnchorEl] = useState(null);
-	const [selectedNodes, setSelectedNodes] = useState([]);
-
-	useEffect(() => {
-		setSelectedNodes(selectedIds);
-	}, [selectedIds]);
+	const selectedNodes = selectedIds;

 	const visibleColumnTree = useMemo(() => filterColumnTree(columnTree, excludeColumnKeys), [columnTree, excludeColumnKeys]);

 	const visibleLeafKeys = useMemo(() => getColumnTreeLeafKeys(visibleColumnTree), [visibleColumnTree]);

-	const handleExpandedItemsChange = (event, itemIds) => {
+	const handleExpandedItemsChange = (_event, itemIds) => {
 		setExpandedItems(itemIds);
 	};

 	const handleSelectAll = (isSelected) => {
+		if (onSelectAllNodes) {
+			onSelectAllNodes(visibleLeafKeys, !isSelected);
+			return;
+		}
 		for (const col of visibleColumnTree) {
 			onSelectNode?.(col, !isSelected);
 		}
@ -248,4 +251,4 @@ const CollapsibleTree = ({
 	);
 };

-export default CollapsibleTree;
+export default memo(CollapsibleTree);
--- a/web/src/components/common/SearchComponent.jsx
+++ b/web/src/components/common/SearchComponent.jsx
@ -1,5 +1,5 @@
 import { InputAdornment, TextField } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { Search } from './icons/icons';

 function SearchComponent({ placeholder = 'Поиск...', value = '', onChange, debounceMs = 0, height = '2rem', sx: sxProp, ...rest }) {
@ -75,4 +75,4 @@ function SearchComponent({ placeholder = 'Поиск...', value = '', onChange,
 	);
 }

-export default SearchComponent;
+export default memo(SearchComponent);
--- a/web/src/pages/AdminPanel/UsersPage/UserTableForAdd.jsx
+++ b/web/src/pages/AdminPanel/UsersPage/UserTableForAdd.jsx
@ -281,6 +281,9 @@ const UserTableForAdd = ({ usersEmail = [], sspOptions = [], onDeleteUser, onCha
 				maxHeight: '18.38rem',
 			},
 		},
+		localization: {
+			noRecordsToDisplay: 'Нет данных для отображения',
+		},
 		enableRowNumbers: false,
 		muiToolbarAlertBannerProps: false,
 	});
--- a/web/src/pages/ProjectPages/SummaryPage.jsx
+++ b/web/src/pages/ProjectPages/SummaryPage.jsx
@ -472,6 +472,13 @@ const SummaryPage = () => {
 		columns: firstColumns,
 		data: filteredData,
 		...projectsTableOptions,
+		localization: {
+			expand: 'Раскрыть',
+			expandAll: 'Раскрыть все',
+			collapse: 'Свернуть',
+			collapseAll: 'Свернуть все',
+			noRecordsToDisplay: 'Нет данных для отображения',
+		},
 		initialState: {
 			columnPinning: { right: ['actions'], left: ['mrt-row-expand', 'project'] },
 		},
@ -482,6 +489,9 @@ const SummaryPage = () => {
 		columns: secondColumns,
 		data: summaryData,
 		...summaryProjectTableOptions,
+		localization: {
+			noRecordsToDisplay: 'Нет данных для отображения',
+		},
 		initialState: {
 			columnPinning: { left: ['data.header.name'] },
 		},