fix: Do not blink when columns change with fixed

examples/debug.tsx

@@ -1,162 +1,34 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp */
 import React from 'react';
-import Table, { Column, ColumnGroup } from '../src';
+import Table from '../src';
 import '../assets/index.less';
 import { ColumnsType } from '../src/interface';
 
-interface RecordType {
-  key: React.Key;
-  id: number;
-  date: number;
-}
-
-let UUID = 0;
-
-function renderDate(timestamp: number, record: RecordType) {
-  return (
-    <span style={{ color: 'pink' }}>
-      {record.id
-        .toString(36)
-        .substr(4)
-        .toUpperCase()}{' '}
-      - {new Date(timestamp).toString()}
-    </span>
-  );
-}
+const columns: ColumnsType = [
+  { dataIndex: 'a', title: 'a' },
+  { dataIndex: 'b', title: 'b' },
+  { dataIndex: 'c', title: 'c', fixed: 'right', width: 200 },
+];
 
 const Demo = () => {
-  const [data, setData] = React.useState([]);
-
-  function offsetIndex(record: RecordType, offset: number) {
-    const index = data.indexOf(record);
-    const targetIndex = index + offset;
-    const target = data[targetIndex];
-    const newData = [...data];
-    newData[index] = target;
-    newData[targetIndex] = record;
-
-    setData(newData);
-  }
-
-  const columns: ColumnsType<RecordType> = [
-    { title: 'ID', key: 'id', dataIndex: 'id', width: 100 },
-    {
-      title: 'Date',
-      dataIndex: 'date',
-      width: 200,
-      render: renderDate,
-    },
-    {
-      title: 'Merged Title',
-      children: [
-        {
-          title: '0 - ID',
-          dataIndex: 'id',
-        },
-        {
-          title: '1 - Merge Date',
-          children: [
-            {
-              title: '1 - 0 - ID',
-              dataIndex: 'id',
-            },
-            {
-              title: '1 - 1 - Date',
-              dataIndex: 'date',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      title: 'Operations',
-      render(_: null, record: RecordType, index: number) {
-        return (
-          <div>
-            <button
-              type="button"
-              onClick={() => {
-                offsetIndex(record, 1);
-              }}
-              disabled={index === data.length - 1}
-            >
-              ⬇
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                offsetIndex(record, -1);
-              }}
-              disabled={index === 0}
-            >
-              ⬆
-            </button>
-          </div>
-        );
-      },
-    },
-  ];
-
-  const addData = () => {
-    setData(originData => {
-      UUID += 1000 + Math.floor(Math.random() * 100000);
-
-      const id = Date.now() + UUID;
-
-      return [
-        ...originData,
-        {
-          key: id,
-          id,
-          date: id,
-        },
-      ];
-    });
-  };
-
-  React.useEffect(() => {
-    for (let i = 0; i < 3; i += 1) {
-      addData();
-    }
-  }, []);
-
-  const [, forceUpdate] = React.useState();
+  const [showB, setShowB] = React.useState(true);
+  const myColumns = showB ? columns : columns.filter(({ title }) => title !== 'b');
 
   return (
     <div>
-      <h2>Debug Usage, remove after stable released</h2>
-      <button type="button" onClick={addData}>
-        Add Row
-      </button>
-      <Table<RecordType> columns={columns} data={data} />
-
-      <br />
-
-      <Table<RecordType> data={data}>
-        <Column dataIndex="id" title="ID" />
-        <ColumnGroup title="Merged Title">
-          <Column dataIndex="id" title="0 - ID" />
-          <Column dataIndex="date" title="1 - Date" />
-        </ColumnGroup>
-      </Table>
-
-      <br />
-
-      <Table<RecordType> data={data}>
-        <Column dataIndex="id" title="ID" />
-        <Column dataIndex="id" title="Merged Title" colSpan={2} />
-        <Column dataIndex="date" colSpan={0} />
-      </Table>
-
-      <Table<RecordType> />
-
+      <Table<any>
+        scroll={{ x: 2000 }}
+        tableLayout="auto"
+        columns={myColumns}
+        data={[{ a: 1, b: 2, c: 3, key: 1 }]}
+      />
       <button
         type="button"
         onClick={() => {
-          forceUpdate(Math.random());
+          setShowB(!showB);
         }}
       >
-        Update
+        Trigger {showB.toString()}
       </button>
     </div>
   );

src/Body/BodyRow.tsx

@@ -4,7 +4,7 @@ import ResizeObserver from 'rc-resize-observer';
 import Cell from '../Cell';
 import TableContext from '../context/TableContext';
 import BodyContext from '../context/BodyContext';
-import { getColumnKey } from '../utils/valueUtil';
+import { getColumnsKey } from '../utils/valueUtil';
 import {
   ColumnType,
   StickyOffsets,
@@ -114,6 +114,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
     computeRowClassName = rowClassName(record, index, indent);
   }
 
+  const columnsKey = getColumnsKey(flattenColumns);
   const baseRowNode = (
     <RowComponent
       {...additionalProps}
@@ -133,7 +134,7 @@ function BodyRow<RecordType extends { children?: RecordType[] }>(props: BodyRowP
       {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
         const { render, dataIndex, className: columnClassName } = column;
 
-        const key = getColumnKey(column, colIndex);
+        const key = columnsKey[colIndex];
         const fixedInfo = fixedInfoList[colIndex];
 
         // ============= Used for nest expandable =============

src/Header/HeaderRow.tsx

@@ -11,6 +11,7 @@ import {
 import TableContext from '../context/TableContext';
 import { getCellFixedInfo } from '../utils/fixUtil';
 import ResizeContext from '../context/ResizeContext';
+import { getColumnsKey } from '../utils/valueUtil';
 
 export interface RowProps<RecordType> {
   cells: CellType<RecordType>[];
@@ -39,6 +40,8 @@ function HeaderRow<RecordType>({
     rowProps = onHeaderRow(cells.map(cell => cell.column), index);
   }
 
+  const columnsKey = getColumnsKey(cells.map(cell => cell.column));
+
   return (
     <RowComponent {...rowProps}>
       {cells.map((cell: CellType<RecordType>, cellIndex) => {
@@ -62,7 +65,7 @@ function HeaderRow<RecordType>({
             align={column.align}
             component={CellComponent}
             prefixCls={prefixCls}
-            key={cellIndex}
+            key={columnsKey[cellIndex]}
             {...fixedInfo}
             additionalProps={additionalProps}
           />

src/hooks/useStickyOffsets.ts

@@ -26,7 +26,7 @@ function useStickyOffsets(colWidths: number[], columCount: number) {
       left: leftOffsets,
       right: rightOffsets,
     };
-  }, [colWidths]);
+  }, [colWidths, columCount]);
 
   return stickyOffsets;
 }

src/utils/valueUtil.tsx

@@ -40,14 +40,23 @@ interface GetColumnKeyColumn {
   dataIndex?: DataIndex;
 }
 
-export function getColumnKey({ key, dataIndex }: GetColumnKeyColumn, index: number) {
-  if (key) {
-    return key;
-  }
+export function getColumnsKey(columns: GetColumnKeyColumn[]) {
+  const columnKeys: React.Key[] = [];
+  const keys: Record<React.Key, boolean> = {};
+
+  columns.forEach(column => {
+    const { key, dataIndex } = column || {};
 
-  const prefix = toArray(dataIndex).join('-') || INTERNAL_KEY_PREFIX;
+    let mergedKey = key || toArray(dataIndex).join('-') || INTERNAL_KEY_PREFIX;
+    while (keys[mergedKey]) {
+      mergedKey = `${mergedKey}_next`;
+    }
+    keys[mergedKey] = true;
+
+    columnKeys.push(mergedKey);
+  });
 
-  return `${prefix}_${index}`;
+  return columnKeys;
 }
 
 export function mergeObject<ReturnObject extends object>(