diff --git a/web/src/components/RealtimeTable/RealtimeTable.jsx b/web/src/components/RealtimeTable/RealtimeTable.jsx index 39e6f0b..654b88a 100644 --- a/web/src/components/RealtimeTable/RealtimeTable.jsx +++ b/web/src/components/RealtimeTable/RealtimeTable.jsx @@ -22,9 +22,10 @@ import { } from './constants/tableConfig'; import { useRealtime } from './contexts/RealtimeContext'; import { toast } from 'react-toastify'; +import { CircularProgress } from '@mui/material'; const RealtimeTable = ({ formType, formId, sheetName, direction }) => { - const { data, setData } = useRealtimeData(formId, sheetName, direction); + const { data, setData, isLoading: isTableLoading } = useRealtimeData(formId, sheetName, direction); const [globalFilter, setGlobalFilter] = useState(''); const [showColumnFilters, setShowColumnFilters] = useState(false); const [selectedColumn, setSelectedColumn] = useState(); @@ -65,7 +66,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 +126,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, @@ -141,20 +150,15 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => { columnVisibility, globalFilter, showColumnFilters, - rowSelection + rowSelection, }, initialState: { expanded: true }, meta: tableMeta, - muiTableHeadCellProps: ({ column }) => ({ - sx: { - width: column.getSize(), - minWidth: column.getSize(), - maxWidth: column.getSize(), - boxSizing: 'border-box', - }, - }), + muiTableHeadCellProps: { + sx: { boxSizing: 'border-box' }, + }, muiTableBodyCellProps: getTableHeadCellStyles, muiTableHeadProps: { sx: { @@ -231,10 +235,6 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => { setRowSelection({}); }, [rowSelection, table]) - if (!data) { - return
Загрузка...
; - } - return ( <> { > + {isTableLoading && ( +
+ +
+ )} + {headerPortalRef.current && createPortal(