From d1d1f902686ffa28d00e2c786378f57ed602d695 Mon Sep 17 00:00:00 2001 From: PotapovaA Date: Mon, 22 Jun 2026 10:19:12 +0300 Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D0=BF=D0=BB=D1=8B?= =?UTF-8?q?=D0=B2=D1=83=D1=89=D0=B5=D0=B9=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8?= =?UTF-8?q?=D1=86=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RealtimeTable/RealtimeTable.jsx | 15 +++++++++++- .../SettingPanel/SettingPanel.jsx | 12 +++------- .../RealtimeTable/TableHead/TableHead.jsx | 23 ++++++++++++++----- .../RealtimeTable/constants/columnConfig.js | 6 +++++ .../RealtimeTable/hooks/useColumnSettings.js | 6 +++-- .../RealtimeTable/hooks/useTableScale.js | 2 +- .../components/RealtimeTable/tableColumns.jsx | 7 +++--- web/src/components/common/CollapsibleTree.jsx | 2 +- 8 files changed, 49 insertions(+), 24 deletions(-) create mode 100644 web/src/components/RealtimeTable/constants/columnConfig.js 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;