diff --git a/docs/examples/column-resize.tsx b/docs/examples/column-resize.tsx index 02c323dfb..81b33bb42 100644 --- a/docs/examples/column-resize.tsx +++ b/docs/examples/column-resize.tsx @@ -99,7 +99,6 @@ const Demo = () => { return mergedWidth; }} /> - {/* */} ); }; diff --git a/src/Header/HeaderRow.tsx b/src/Header/HeaderRow.tsx index 922eac7e8..43480aac1 100644 --- a/src/Header/HeaderRow.tsx +++ b/src/Header/HeaderRow.tsx @@ -13,7 +13,7 @@ import { getColumnsKey } from '../utils/valueUtil'; import HeaderCell from './HeaderCell'; export interface RowProps { - cells: readonly CellType[]; + cells: CellType[]; stickyOffsets: StickyOffsets; flattenColumns: readonly ColumnType[]; rowComponent: CustomizeComponent; @@ -60,6 +60,27 @@ const HeaderRow = (props: RowProps) => { additionalProps = cell.column.onHeaderCell(column); } + // If the cell is the previous cell of the scrollbar and resizable, and fixed is not right, then the scrollbar is resizable + const isScrollBarCellAndResizable = + column.scrollbar && + (cells[cells.length - 2].column as ColumnType).resizable && + cells[cells.length - 2].column.fixed !== 'right'; + + // Whether this cell is in the previous cell of the scrollbar + const isScrollBarCellPreviousCell = + cells[cells.length - 1].column.scrollbar && cellIndex === cells.length - 2; + + let resizable: boolean; + if (isScrollBarCellPreviousCell) { + if (column.fixed === 'right') { + resizable = (column as ColumnType).resizable; + } else { + resizable = false; + } + } else { + resizable = isScrollBarCellAndResizable || (column as ColumnType).resizable; + } + return ( (props: RowProps) => { {...fixedInfo} additionalProps={additionalProps} rowType="header" - columnKey={columnsKey[cellIndex]} - resizable={(column as ColumnType).resizable} + columnKey={ + isScrollBarCellAndResizable + ? columnsKey[columnsKey.length - 2] + : columnsKey[cellIndex] + } + resizable={resizable} minWidth={(column as ColumnType).minWidth} /> ); diff --git a/src/interface.ts b/src/interface.ts index e202bf58b..5b20aa1de 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -50,7 +50,7 @@ export interface CellType { className?: string; style?: React.CSSProperties; children?: React.ReactNode; - column?: ColumnsType[number]; + column?: ColumnsType[number] & { scrollbar?: boolean }; colSpan?: number; rowSpan?: number;