diff --git a/web/src/components/RealtimeTable/RealtimeTable.jsx b/web/src/components/RealtimeTable/RealtimeTable.jsx index b860bca..a0489c9 100644 --- a/web/src/components/RealtimeTable/RealtimeTable.jsx +++ b/web/src/components/RealtimeTable/RealtimeTable.jsx @@ -63,6 +63,18 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => { handleToggleColumnVisibility, } = useColumnSettings(); + useEffect(() => { + // Принудительно обновляем состояние закрепленных колонок + // если так не сделать при скролле будут пропадать закрепленные колонки + if (columnPinning && Object.keys(columnPinning).length > 0) { + const timer = setTimeout(() => { + setColumnPinning(prev => ({ ...prev })); + }, 10); + + return () => clearTimeout(timer); + } + }, [columnPinning, setColumnPinning]); + const { headerPortalRef, containerRef } = useHeaderPortal(); const { sizeMult, setSizeMult, tableScaleStyle, tableWrapperStyle } = @@ -153,7 +165,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => { rowSelection, }, initialState: { - expanded: true + expanded: true, }, meta: tableMeta, muiTableHeadCellProps: { @@ -240,6 +252,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => { { const [isPinned, setIsPinned] = useState(false); const [isExporting, setIsExporting] = useState(false); - const [columnTree, setColumnTree] = useState(); const [selectedColumnIds, setSelectedColumnIds] = useState(); const [showColumnFilters, setShowColumnFilters] = useState(false); - useEffect(() => { - if (!table) return; - setColumnTree(table.getAllColumns()); - setShowColumnFilters(table.getState().showColumnFilters); - }, [table, isLoadingData]); - useEffect(() => { if (!selectedColumn) return; const pinningColumn = table.getState().columnPinning.left; @@ -141,9 +135,9 @@ const SettingPanel = ({ - {columnTree ? ( + {columns ? ( diff --git a/web/src/components/RealtimeTable/TableHead/TableHead.jsx b/web/src/components/RealtimeTable/TableHead/TableHead.jsx index 45ba813..0a63ae4 100644 --- a/web/src/components/RealtimeTable/TableHead/TableHead.jsx +++ b/web/src/components/RealtimeTable/TableHead/TableHead.jsx @@ -1,5 +1,6 @@ import React from 'react'; import ColumnResizer from './ColumnResizer'; +import { columnPinningDefault } from '../constants/columnConfig'; const getSortedColumns = (table) => { const allLeafColumns = table.getAllLeafColumns(); @@ -18,9 +19,20 @@ const getSortedColumns = (table) => { }); }; +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 calculateLeftOffset = (table, columnOrHeader) => { - const columnId = - columnOrHeader.id.match(/data\..*$/)?.[0] || columnOrHeader.id; + const columnId = getColumnId(columnOrHeader); const pinnedColumns = table.getState().columnPinning.left || []; const currentPinnedIndex = pinnedColumns.indexOf(columnId); @@ -40,12 +52,11 @@ const calculateLeftOffset = (table, columnOrHeader) => { const isColumnPin = (table, header) => { const pinningColumn = table.getState().columnPinning.left; - //в header.id содержаться колонки по типу depth_idColParent_idChild, а в pinningColumn только idCol, которые закреплены - //header.id.split('_').at(-1) - получение самой нижней колонки - const columnId = header.id.match(/data\..*$/)?.[0] || header.id; + const columnId = getColumnId(header); const isPinned = pinningColumn.includes(columnId); return isPinned; }; + const ColumnNumbersRow = ({ table }) => { const sortedColumns = getSortedColumns(table); const tableState = table.getState(); @@ -91,7 +102,7 @@ const ColumnNumberCell = ({ column, table }) => { maxWidth: column.getSize(), padding: '2px 6px', textAlign: 'center', - backgroundColor: isPinned ? '#f5f5f5' : '#F3F4F6', + backgroundColor: '#e5e5e5', boxSizing: 'border-box', display: 'flex', alignItems: 'center', diff --git a/web/src/components/RealtimeTable/constants/columnConfig.js b/web/src/components/RealtimeTable/constants/columnConfig.js new file mode 100644 index 0000000..37fac4f --- /dev/null +++ b/web/src/components/RealtimeTable/constants/columnConfig.js @@ -0,0 +1,6 @@ +export const columnPinningDefault = { + left: ["mrt-row-expand", "sort_order"], + right: [], +}; + +export const columnVisibilityDefault = { "mrt-row-select": false }; diff --git a/web/src/components/RealtimeTable/hooks/useColumnSettings.js b/web/src/components/RealtimeTable/hooks/useColumnSettings.js index 3c101db..e67db9c 100644 --- a/web/src/components/RealtimeTable/hooks/useColumnSettings.js +++ b/web/src/components/RealtimeTable/hooks/useColumnSettings.js @@ -1,16 +1,17 @@ import { useState, useEffect, useCallback } from 'react'; import { loadFromStorage, saveToStorage } from '../utils/localStorageUtils.js'; import { getLeafColumns, collectLeafColumns } from '../utils/columnUtils'; +import { columnPinningDefault, columnVisibilityDefault } from '../constants/columnConfig.js'; export const useColumnSettings = () => { const [columnSizing, setColumnSizing] = useState(() => loadFromStorage('columnSizing', {}), ); const [columnPinning, setColumnPinning] = useState(() => - loadFromStorage('columnPinning', { left: [], right: [] }), + loadFromStorage('columnPinning', columnPinningDefault), ); const [columnVisibility, setColumnVisibility] = useState(() => - loadFromStorage('columnVisibility', { }), + loadFromStorage('columnVisibility', columnVisibilityDefault), ); // Сохранение в localStorage @@ -31,6 +32,7 @@ export const useColumnSettings = () => { }, []); const handleUnpinColumn = useCallback((colId) => { + if (columnPinningDefault.left.includes(colId)) return; setColumnPinning((prev) => ({ ...prev, left: prev.left.filter((c) => c !== colId), diff --git a/web/src/components/RealtimeTable/hooks/useTableScale.js b/web/src/components/RealtimeTable/hooks/useTableScale.js index 6bcc92e..b3d026f 100644 --- a/web/src/components/RealtimeTable/hooks/useTableScale.js +++ b/web/src/components/RealtimeTable/hooks/useTableScale.js @@ -4,7 +4,7 @@ import { rowBaseOffset } from "../constants/tableConfig"; export const useTableScale = () => { const [sizeMult, setSizeMult] = useState(() => - loadFromStorage("sizeMult", 1.5), + loadFromStorage("sizeMult", 1), ); useEffect(() => { diff --git a/web/src/components/RealtimeTable/tableColumns.jsx b/web/src/components/RealtimeTable/tableColumns.jsx index 8c9af2a..ab27c2c 100644 --- a/web/src/components/RealtimeTable/tableColumns.jsx +++ b/web/src/components/RealtimeTable/tableColumns.jsx @@ -136,12 +136,11 @@ export const getTableColumns = ({ const rowNumber = { accessorKey: 'sort_order', header: '#', - size: 70, + size: 50, enableEditing: false, - enablePinning: true, Cell: ({ cell, row }) => { - return }, }; diff --git a/web/src/components/common/CollapsibleTree.jsx b/web/src/components/common/CollapsibleTree.jsx index 9f5943c..8eb952a 100644 --- a/web/src/components/common/CollapsibleTree.jsx +++ b/web/src/components/common/CollapsibleTree.jsx @@ -144,7 +144,7 @@ const CollapsibleTree = ({ setAnchorEl(null); }; - const selectedCount = selectedNodes.length; + const selectedCount = selectedNodes.length - 1; //1 колонка всегда скрыта const isAllSelected = () => { if (!columnTree) return false;