feat: scrollbar resizable logic

docs/examples/column-resize.tsx

@@ -99,7 +99,6 @@ const Demo = () => {
  return mergedWidth;
  }}
  />
- {/* <Table resizable style={{ width: 800 }} columns={columns} data={data} /> */}
  </div>
  );
 };

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}
  />
  );

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;