fix(table): page back to one when columns change #381 (#523)

cypress/integration/table.spec.js

@@ -11,4 +11,17 @@ describe('table', () => {
         cy.get('.semi-table-row-head .semi-checkbox-inner-display').click();
         cy.get('.semi-checkbox-checked').should('have.length', 4);
     });
+
+    /**
+     * 测试 columns 为字面量时刷新 Table，页码应保持当前页
+     * 即更新 columns 不影响 currentPage
+     */
+    it('columns change ', () => {
+        cy.visit('http://localhost:6009/iframe.html?id=table--fixed-columns-change&viewMode=story');
+        cy.get('.semi-page-item').contains('2').click();
+        cy.get('.semi-table-tbody .semi-checkbox').eq(1).click()
+            .then(() => {
+                cy.get('.semi-page-item').contains('2').should('have.class', 'semi-page-item-active');
+            });
+    });
 });

packages/semi-ui/table/Table.tsx

@@ -534,7 +534,6 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             this.foundation.initExpandedRowKeys({ groups: stateGroups });
         }
 
-
         /**
          * After dataSource is updated || (cachedColumns || cachedChildren updated)
          * 1. Cache filtered sorted data and a collection of data rows, stored in this
@@ -547,17 +546,20 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
             this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
             states.dataSource = filteredSortedDataSource;
-            // when dataSource has change, should reset currentPage
-            states.pagination = isObject(statePagination) ? {
-                ...statePagination,
-                currentPage: isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1,
-            } : statePagination;
 
             if (this.props.groupBy) {
                 states.groups = null;
             }
         }
 
+        // when dataSource has change, should reset currentPage
+        if (dataSource !== prevProps.dataSource) {
+            states.pagination = isObject(statePagination) ? {
+                ...statePagination,
+                currentPage: isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1,
+            } : statePagination;
+        }
+
         if (Object.keys(states).length) {
             const {
                 // eslint-disable-next-line @typescript-eslint/no-shadow

packages/semi-ui/table/_story/table.stories.js

@@ -76,6 +76,7 @@ export { default as ScrollBar } from './ScrollBar';
 export { default as TableSpan } from './TableSpan';
 export { default as FixRenderReturnProps } from './FixRenderReturnProps';
 export { default as WarnColumnWithoutDataIndex } from './WarnColumnWithoutDataIndex';
+export { default as FixedColumnsChange } from './v2/FixedColumnsChange';
 
 // empty table
 

packages/semi-ui/table/_story/v2/FixedColumnsChange/index.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useMemo } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+const getData = () => {
+    const data = [];
+    for (let i = 0; i < 46; i++) {
+        const isSemiDesign = i % 2 === 0;
+        const randomNumber = (i * 1000) % 199;
+        data.push({
+            key: '' + i,
+            name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+            owner: isSemiDesign ? '姜鹏志' : '郝宣',
+            size: randomNumber,
+            updateTime: new Date().valueOf() + randomNumber * DAY,
+            avatarBg: isSemiDesign ? 'grey' : 'red'
+        });
+    }
+    return data;
+};
+
+const data = getData();
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/381
+ */
+App.storyName = 'fixed columns change';
+function App() {
+    const [dataSource, setData] = useState(data);
+    const [rowKeys, setRowKeys] = useState([]);
+
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi Pro 设计稿',
+                    value: 'Semi Pro 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+            render: (text) => `${text} KB`
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
+                        {text}
+                    </div>
+                );
+            }
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+            sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
+            render: (value) => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            }
+        }
+    ];
+
+    return (
+        <Table
+            columns={columns}
+            dataSource={dataSource}
+            pagination={{
+                pageSize: 5,
+            }}
+            rowSelection={{
+                onChange: rowKeys => setRowKeys(rowKeys),
+                selectedRowKeys: rowKeys,
+            }}
+            scroll={{ y: 300 }}
+        />
+    );
+}
+
+export default App;