From ee2a630c09b32ba731f06f438dbf3469b6de77d6 Mon Sep 17 00:00:00 2001
From: linxianxi <904492381@qq.com>
Date: Sat, 11 May 2024 10:39:25 +0800
Subject: [PATCH] feat: scrollbar resizable logic

---
 docs/examples/column-resize.tsx |  1 -
 src/Header/HeaderRow.tsx        | 31 ++++++++++++++++++++++++++++---
 src/interface.ts                |  2 +-
 3 files changed, 29 insertions(+), 5 deletions(-)

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;
         }}
       />
-      {/* <Table resizable style={{ width: 800 }} columns={columns} data={data} /> */}
     </div>
   );
 };
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<RecordType> {
-  cells: readonly CellType<RecordType>[];
+  cells: CellType<RecordType>[];
   stickyOffsets: StickyOffsets;
   flattenColumns: readonly ColumnType<RecordType>[];
   rowComponent: CustomizeComponent;
@@ -60,6 +60,27 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
           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<RecordType>).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<RecordType>).resizable;
+          } else {
+            resizable = false;
+          }
+        } else {
+          resizable = isScrollBarCellAndResizable || (column as ColumnType<RecordType>).resizable;
+        }
+
         return (
           <HeaderCell
             {...cell}
@@ -72,8 +93,12 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
             {...fixedInfo}
             additionalProps={additionalProps}
             rowType="header"
-            columnKey={columnsKey[cellIndex]}
-            resizable={(column as ColumnType<RecordType>).resizable}
+            columnKey={
+              isScrollBarCellAndResizable
+                ? columnsKey[columnsKey.length - 2]
+                : columnsKey[cellIndex]
+            }
+            resizable={resizable}
             minWidth={(column as ColumnType<RecordType>).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<RecordType> {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
-  column?: ColumnsType<RecordType>[number];
+  column?: ColumnsType<RecordType>[number] & { scrollbar?: boolean };
   colSpan?: number;
   rowSpan?: number;