оптимизацмя таблицы

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -134,6 +134,11 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
     return () => document.removeEventListener('mousedown', handleDocumentClick);
   }, [selectedColumnId]);
 
+  const handleCellUpdateError = useCallback((rowId, columnId, error) => {
+    console.error(`Error updating cell ${rowId}_${columnId}:`, error);
+    toast.error('Ошибка обновления ячейки');
+  }, []);
+
   const columns = useMemo(() => {
     if (!columnsConfig || !columnsConfig.columns) return [];
     try {
@@ -143,41 +148,58 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
         columnsConfig,
         onCellUpdate: handleUpdateCell,
         onCellNumberClick: handleClickRowCell,
-        onCellUpdateError: (rowId, columnId, error) => {
-          console.error(`Error updating cell ${rowId}_${columnId}:`, error);
-          toast.error('Ошибка обновления ячейки')
-        }
+        onCellUpdateError: handleCellUpdateError,
       });
     } catch (error) {
       console.error('Error creating columns:', error);
       return [];
     }
-  }, [columnsConfig, handleUpdateCell, handleClickRowCell]);
+  }, [columnsConfig, handleUpdateCell, handleClickRowCell, handleCellUpdateError]);
+
+  const selectedColumnIdRef = useRef(selectedColumnId);
+
+  useEffect(() => {
+    selectedColumnIdRef.current = selectedColumnId;
+  }, [selectedColumnId]);
 
   const tableMeta = useMemo(() => ({
     updateCell: handleUpdateCell,
-    selectedColumnId,
-  }), [handleUpdateCell, selectedColumnId]);
+    getSelectedColumnId: () => selectedColumnIdRef.current,
+  }), [handleUpdateCell]);
 
-  // Конфигурация таблицы
-  const tableConfig = useMemo(
-    () => ({
-      ...BASE_TABLE_CONFIG,
-      columns,
-      data: data,
-      enableRowVirtualization: true,
-      enableColumnVirtualization: true,
-      rowVirtualizerInstanceRef: rowVirtualizerRef,
-      rowVirtualizerOptions: {
+  const ROW_VIRTUALIZER_OPTIONS = {
     overscan: 30,
     scrollPaddingStart: 0,
     scrollPaddingEnd: 0,
     estimateSize: () => TABLE_ROW_HEIGHT,
     measureElement: (el) => el?.offsetHeight || TABLE_ROW_HEIGHT,
-      },
+  };
+
+  const createTableConfig = ({
+    columns,
+    data,
+    columnSizing,
+    columnPinning,
+    columnVisibility,
+    globalFilter,
+    showColumnFilters,
+    rowSelection,
+    containerRef,
+    tableMeta,
+    setColumnSizing,
+    setColumnPinning,
+    editingCell,
+    contextStartEditing,
+  }) => ({
+    ...BASE_TABLE_CONFIG,
+    columns,
+    data,
+    enableRowVirtualization: true,
+    enableColumnVirtualization: true,
+    rowVirtualizerInstanceRef: rowVirtualizerRef,
+    rowVirtualizerOptions: ROW_VIRTUALIZER_OPTIONS,
     onEditingCellChange: (cell) => {
-        if (cell) {
-          if (editingCell) return;
+      if (cell && !editingCell) {
         contextStartEditing?.(cell.row, cell.column);
       }
     },
@@ -194,7 +216,6 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
         }
         const allCols = [...table.getLeftVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns()]
         return allCols[index]?.getSize() ?? 150;
-
       },
     }),
     enableRowSelection: true,
@@ -248,23 +269,39 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
       placeholder: 'Поиск...',
       size: 'small',
     },
-    }),
-    [
+  });
+
+  // Конфигурация таблицы
+  const tableConfig = useMemo(() => createTableConfig({
     columns,
     data,
-      setColumnSizing,
-      setColumnPinning,
     columnSizing,
     columnPinning,
     columnVisibility,
     globalFilter,
     showColumnFilters,
+    rowSelection,
     containerRef,
     tableMeta,
+    setColumnSizing,
+    setColumnPinning,
+    editingCell,
+    contextStartEditing,
+  }), [
+    columns,
+    data,
+    columnSizing,
+    columnPinning,
+    columnVisibility,
+    globalFilter,
+    showColumnFilters,
     rowSelection,
-      editingCell
-    ],
-  );
+    containerRef,
+    tableMeta,
+    setColumnSizing,
+    setColumnPinning,
+    editingCell,
+  ]);
 
   const table = useMaterialReactTable(tableConfig);
 
@@ -342,6 +379,17 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
     setRowSelection({});
   }, [rowSelection, table])
 
+  useEffect(() => {
+    return () => {
+      setData([]);
+      setRowSelection({});
+      setEditingCell(null);
+      if (rowVirtualizerRef.current) {
+        rowVirtualizerRef.current = null;
+      }
+    };
+  }, []);
+
   return (
     <>
       <SettingsPanel