feat: columnResizable

README.md

@@ -133,6 +133,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | fixed | String \| Boolean | | this column will be fixed when table scroll horizontally: true or 'left' or 'right' |
 | align | String | | specify how cell content is aligned |
 | ellipsis | Boolean | | specify whether cell content be ellipsized |
+| resizable | Boolean | | column resize |
 | rowScope | 'row' \| 'rowgroup' | | Set scope attribute for all cells in this column |
 | onCell | Function(record, index) | | Set custom props per each cell. |
 | onHeaderCell | Function(record) | | Set custom props per each header cell. |

assets/index.less

@@ -63,9 +63,42 @@
  }
  }
 
+ &-column-resizing {
+ cursor: col-resize;
+ }
+
  &-cell {
  background: #f4f4f4;
 
+ &-resize-handle {
+ position: absolute;
+ top: 0;
+ inset-inline-end: 0;
+ width: 4px;
+ height: 100%;
+ cursor: col-resize;
+ z-index: 1;
+ background: red;
+ }
+
+ &-resize-line {
+ position: absolute;
+ width: 4px;
+ background: red;
+ height: 100%;
+ top: 0;
+ transform: translateX(-50%);
+ z-index: 2;
+ }
+
+ &-fix-left &-resize-handle {
+ right: 0
+ }
+
+ &-fix-right &-resize-handle {
+ left: 0
+ }
+
  &-fix-left,
  &-fix-right {
  z-index: 2;

docs/examples/column-resize.tsx

@@ -1,95 +1,106 @@
-import React from 'react';
-import { Resizable } from 'react-resizable';
-import Table from 'rc-table';
+import React, { useState } from 'react';
+import Table, { INTERNAL_HOOKS } from 'rc-table';
+import type { ColumnType } from 'rc-table';
 import '../../assets/index.less';
-import 'react-resizable/css/styles.css';
-import type { ColumnType } from '@/interface';
 
-const ResizableTitle = props => {
- const { onResize, width, ...restProps } = props;
+const data = [
+ { a: '123', b: 'xxxxxxxx xxxxxxxx', d: 3, key: '1' },
+ { a: 'cdd', b: 'edd12221 edd12221', d: 3, key: '2' },
+ { a: '133', c: 'edd12221 edd12221', d: 2, key: '3' },
+ { a: '133', c: 'edd12221 edd12221', d: 2, key: '4' },
+ { a: '133', c: 'edd12221 edd12221', d: 2, key: '5' },
+ { a: '133', c: 'edd12221 edd12221', d: 2, key: '6' },
+ { a: '133', c: 'edd12221 edd12221', d: 2, key: '7' },
+ { a: '133', c: 'edd12221 edd12221', d: 2, key: '8' },
+ { a: '133', c: 'edd12221 edd12221', d: 2, key: '9' },
+];
 
- if (!width) {
- return <th {...restProps} />;
- }
+const Demo = () => {
+ const [widthMap, setWidthMap] = useState<Map<React.Key, number>>(new Map());
+
+ const columns1 = [
+ { title: 'title1', dataIndex: 'aaa', key: 'aaa', width: 100 },
+ { title: 'title2', dataIndex: 'bbb', key: 'bbb', width: 100 },
+ ].map(i => ({
+ ...i,
+ resizable: true,
+ width: widthMap.get(i.key ?? i.dataIndex) ?? i.width,
+ })) as ColumnType<any>[];
+
+ const columns2 = [
+ { title: 'title1', dataIndex: 'a', key: 'a', fixed: 'left' },
+ { title: 'title2', dataIndex: 'b', key: 'b', fixed: 'left' },
+ { title: 'title3', dataIndex: 'c', key: 'c' },
+ { title: 'title4', dataIndex: 'b', key: 'd' },
+ { title: 'title5', dataIndex: 'b', key: 'e' },
+ { title: 'title6', dataIndex: 'b', key: 'f' },
+ { title: 'title7', dataIndex: 'b', key: 'g' },
+ { title: 'title8', dataIndex: 'b', key: 'h' },
+ { title: 'title9', dataIndex: 'b', key: 'i' },
+ { title: 'title10', dataIndex: 'b', key: 'j' },
+ { title: 'title11', dataIndex: 'b', key: 'k', fixed: 'right' },
+ { title: 'title12', dataIndex: 'b', key: 'l', fixed: 'right' },
+ ].map(i => ({
+ ...i,
+ resizable: true,
+ width: widthMap.get(i.key ?? i.dataIndex) ?? 150,
+ })) as ColumnType<any>[];
 
  return (
- <Resizable width={width} height={0} onResize={onResize}>
- <th {...restProps} />
- </Resizable>
+ <div>
+ table width: 800px {'columns=[{width: 100, width: 100}]'} 情况
+ <Table
+ style={{ width: 800 }}
+ scroll={{ y: 300, x: columns1.reduce((t, c) => t + (c.width as number), 0) }}
+ columns={columns1}
+ data={data}
+ onColumnResizeComplete={({ columnWidths }) => {
+ setWidthMap(prev => {
+ const result = new Map(prev);
+ columnWidths.forEach(i => {
+ result.set(i.columnKey, i.width);
+ });
+ return result;
+ });
+ }}
+ internalHooks={INTERNAL_HOOKS}
+ getContainerWidth={(ele, width) => {
+ // Minus border
+ const borderWidth = getComputedStyle(
+ ele.querySelector('.rc-table-body'),
+ ).borderInlineStartWidth;
+ const mergedWidth = width - parseInt(borderWidth, 10);
+ return mergedWidth;
+ }}
+ />
+ <br />
+ 大多数情况
+ <Table
+ style={{ width: 800 }}
+ scroll={{ y: 300, x: columns2.reduce((t, c) => t + (c.width as number), 0) }}
+ columns={columns2}
+ data={data}
+ onColumnResizeComplete={({ columnWidths }) => {
+ setWidthMap(prev => {
+ const result = new Map(prev);
+ columnWidths.forEach(i => {
+ result.set(i.columnKey, i.width);
+ });
+ return result;
+ });
+ }}
+ internalHooks={INTERNAL_HOOKS}
+ getContainerWidth={(ele, width) => {
+ // Minus border
+ const borderWidth = getComputedStyle(
+ ele.querySelector('.rc-table-body'),
+ ).borderInlineStartWidth;
+ const mergedWidth = width - parseInt(borderWidth, 10);
+ return mergedWidth;
+ }}
+ />
+ </div>
  );
 };
 
-interface RecordType {
- a: string;
- b?: string;
- c?: string;
- d?: number;
- key: string;
-}
-
-interface DemoState {
- columns: ColumnType<RecordType>[];
-}
-
-class Demo extends React.Component<{}, DemoState> {
- state: DemoState = {
- columns: [
- { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
- { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
- { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
- {
- title: 'Operations',
- dataIndex: '',
- key: 'd',
- render() {
- return <a href="#">Operations</a>;
- },
- },
- ],
- };
-
- components = {
- header: {
- cell: ResizableTitle,
- },
- };
-
- data = [
- { a: '123', key: '1' },
- { a: 'cdd', b: 'edd', key: '2' },
- { a: '1333', c: 'eee', d: 2, key: '3' },
- ];
-
- handleResize =
- index =>
- (e, { size }) => {
- this.setState(({ columns }) => {
- const nextColumns = [...columns];
- nextColumns[index] = {
- ...nextColumns[index],
- width: size.width,
- };
- return { columns: nextColumns };
- });
- };
-
- render() {
- const columns = this.state.columns.map((col, index) => ({
- ...col,
- onHeaderCell: (column: ColumnType<RecordType>) =>
- ({
- width: column.width,
- onResize: this.handleResize(index),
- }) as any,
- }));
-
- return (
- <div>
- <h2>Integrate with react-resizable</h2>
- <Table components={this.components} columns={columns} data={this.data} />
- </div>
- );
- }
-}
-
 export default Demo;

package.json

@@ -98,7 +98,6 @@
  "react-dnd": "^2.5.4",
  "react-dnd-html5-backend": "^2.5.4",
  "react-dom": "^16.0.0",
- "react-resizable": "^3.0.5",
  "react-virtualized": "^9.12.0",
  "react-window": "^1.8.5",
  "regenerator-runtime": "^0.14.0",

src/Body/MeasureCell.tsx

@@ -3,15 +3,15 @@ import ResizeObserver from 'rc-resize-observer';
 
 export interface MeasureCellProps {
  columnKey: React.Key;
- onColumnResize: (key: React.Key, width: number) => void;
+ onColumnWidthChange: (key: React.Key, width: number) => void;
 }
 
-export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellProps) {
+export default function MeasureCell({ columnKey, onColumnWidthChange }: MeasureCellProps) {
  const cellRef = React.useRef<HTMLTableCellElement>();
 
  React.useEffect(() => {
  if (cellRef.current) {
- onColumnResize(columnKey, cellRef.current.offsetWidth);
+ onColumnWidthChange(columnKey, cellRef.current.offsetWidth);
  }
  }, []);
 

src/Body/MeasureRow.tsx

@@ -4,11 +4,15 @@ import MeasureCell from './MeasureCell';
 
 export interface MeasureCellProps {
  prefixCls: string;
- onColumnResize: (key: React.Key, width: number) => void;
+ onColumnWidthChange: (key: React.Key, width: number) => void;
  columnsKey: React.Key[];
 }
 
-export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) {
+export default function MeasureRow({
+ prefixCls,
+ columnsKey,
+ onColumnWidthChange,
+}: MeasureCellProps) {
  return (
  <tr
  aria-hidden="true"
@@ -18,12 +22,16 @@ export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: Me
  <ResizeObserver.Collection
  onBatchResize={infoList => {
  infoList.forEach(({ data: columnKey, size }) => {
- onColumnResize(columnKey, size.offsetWidth);
+ onColumnWidthChange(columnKey, size.offsetWidth);
  });
  }}
  >
  {columnsKey.map(columnKey => (
- <MeasureCell key={columnKey} columnKey={columnKey} onColumnResize={onColumnResize} />
+ <MeasureCell
+ key={columnKey}
+ columnKey={columnKey}
+ onColumnWidthChange={onColumnWidthChange}
+ />
  ))}
  </ResizeObserver.Collection>
  </tr>

src/Body/index.tsx

@@ -25,7 +25,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
  const {
  prefixCls,
  getComponent,
- onColumnResize,
+ onColumnWidthChange,
  flattenColumns,
  getRowKey,
  expandedKeys,
@@ -34,7 +34,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
  } = useContext(TableContext, [
  'prefixCls',
  'getComponent',
- 'onColumnResize',
+ 'onColumnWidthChange',
  'flattenColumns',
  'getRowKey',
  'expandedKeys',
@@ -104,7 +104,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
  <MeasureRow
  prefixCls={prefixCls}
  columnsKey={columnsKey}
- onColumnResize={onColumnResize}
+ onColumnWidthChange={onColumnWidthChange}
  />
  )}
 

src/Header/HeaderCell.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { CellProps } from '../Cell';
+import Cell from '../Cell';
+import useCellResize from './useCellResize';
+
+interface HeaderCellProps<RecordType> extends CellProps<RecordType> {
+ isFixLeft: boolean;
+ isFixRight: boolean;
+ columnKey?: React.Key;
+ resizable?: boolean;
+ minWidth?: number;
+}
+
+function HeaderCell<RecordType>({
+ isFixLeft,
+ isFixRight,
+ columnKey,
+ resizable,
+ minWidth,
+ ...cellProps
+}: HeaderCellProps<RecordType>) {
+ const { prefixCls } = cellProps;
+
+ const cellPrefixCls = `${prefixCls}-cell`;
+
+ const resizeHandleNode = useCellResize(
+ columnKey,
+ isFixLeft,
+ isFixRight,
+ cellPrefixCls,
+ resizable,
+ minWidth,
+ );
+
+ return <Cell {...cellProps} appendNode={resizeHandleNode} />;
+}
+
+export default HeaderCell;