feat: scrollbar resizable logic

react-component · May 11, 2024 · ee2a630 · ee2a630
1 parent d55114b
commit ee2a630
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;