[AURORA-1060] - Вирутальный рендеринг

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -65,7 +65,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
   const { headerPortalRef, containerRef } = useHeaderPortal();
 
   const { sizeMult, setSizeMult, tableScaleStyle, tableWrapperStyle } =
-    useTableScale(containerRef);
+    useTableScale();
 
   const [columnsConfig, setColumnsConfig] = useState(null);
 
@@ -125,11 +125,19 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
       columns,
       data: data,
       enableRowVirtualization: true,
+      enableColumnVirtualization: true,
       rowVirtualizerOptions: {
-        overscan: 50,  
+        overscan: 30,
         scrollPaddingStart: 0,
         scrollPaddingEnd: 0,
       },
+      columnVirtualizerOptions: ({ table }) => ({
+        overscan: 5,
+        measureElement: (el) => {
+          const index = Number(el?.getAttribute?.('data-index'));
+          return table.getVisibleLeafColumns()[index]?.getSize() ?? 0;
+        },
+      }),
       enableRowSelection: true,
       onRowSelectionChange: setRowSelection,
       onColumnSizingChange: setColumnSizing,
@@ -147,14 +155,9 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
         expanded: true
       },
       meta: tableMeta,
-      muiTableHeadCellProps: ({ column }) => ({
+      muiTableHeadCellProps: {
-        sx: {
+        sx: { boxSizing: 'border-box' },
-          width: column.getSize(),
+      },
-          minWidth: column.getSize(),
-          maxWidth: column.getSize(),
-          boxSizing: 'border-box',
-        },
-      }),
       muiTableBodyCellProps: getTableHeadCellStyles,
       muiTableHeadProps: {
         sx: {