fix(table): jsx nested columns bug #619 (#620)

cypress/integration/table.spec.js

@@ -24,4 +24,11 @@ describe('table', () => {
                 cy.get('.semi-page-item').contains('2').should('have.class', 'semi-page-item-active');
             });
     });
+
+    it('jsx columns nested change', () => {
+        cy.visit('http://localhost:6009/iframe.html?id=table--fixed-header-merge&args=&viewMode=story');
+        cy.get('[data-cy=button]').click();
+        cy.contains("Base Information");
+        cy.contains("Company Information");
+    });
 });

packages/semi-ui/table/Table.tsx

@@ -424,11 +424,12 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             willUpdateStates.cachedColumns = props.columns;
             willUpdateStates.cachedChildren = null;
         } else if (props.children && props.children !== state.cachedChildren) {
-            const newFlattenColumns = flattenColumns(getColumns(props.children));
+            const newNestedColumns = getColumns(props.children);
+            const newFlattenColumns = flattenColumns(newNestedColumns);
             const columns = mergeColumns(state.queries, newFlattenColumns, null, false);
             willUpdateStates.flattenColumns = newFlattenColumns;
             willUpdateStates.queries = [...columns];
-            willUpdateStates.cachedColumns = [...columns];
+            willUpdateStates.cachedColumns = [...newNestedColumns];
             willUpdateStates.cachedChildren = props.children;
         }
 

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

@@ -78,6 +78,7 @@ export { default as FixRenderReturnProps } from './FixRenderReturnProps';
 export { default as WarnColumnWithoutDataIndex } from './WarnColumnWithoutDataIndex';
 export { default as FixedColumnsChange } from './v2/FixedColumnsChange';
 export { default as FixedZIndex } from './v2/FixedZIndex';
+export { default as FixedHeaderMerge } from './v2/FixedHeaderMerge';
 
 // empty table
 

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

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import { Table, Button } from '@douyinfe/semi-ui';
+
+Demo.storyName = "fixed jsx column nested bug";
+
+
+/**
+ * fixed https://github.com/DouyinFE/semi-design/issues/619
+ * 
+ * Test with Cypress
+ */
+export default function Demo() {
+    const columns = [
+        {
+            title: 'Base Information',
+            fixed: 'left',
+            children: [
+                {
+                    title: 'Name',
+                    dataIndex: 'name',
+                    width: 200,
+                },
+                {
+                    title: 'Age',
+                    dataIndex: 'age',
+                    width: 100,
+                },
+            ],
+        },
+        {
+            title: 'Company Information',
+            children: [
+                {
+                    title: 'Company Name',
+                    dataIndex: 'company.name',
+                },
+                {
+                    title: 'Company Address',
+                    dataIndex: 'company.address',
+                },
+            ],
+        }
+    ];
+
+    const data = useMemo(() => {
+        const data = [];
+        for (let i = 0; i < 100; i++) {
+            let age = 40 + (Math.random() > 0.5 ? 1 : -1) * (i % 9);
+            let name = `Edward King ${i}`;
+            data.push({
+                key: '' + i,
+                company: {
+                    name: 'ByteDance',
+                    address: 'No. 48, Zhichun Road',
+                },
+                name,
+                age,
+                address: `No ${i + 1}, Zhongguancun Street`,
+                description: `My name is ${name}, I am ${age} years old, living in No ${i + 1}, Zhongguancun Street`,
+            });
+        }
+        return data;
+    }, []);
+
+    const [flag, setFlag] = React.useState(true);
+
+    return (
+        <>
+            <Button data-cy="button" onClick={()=> setFlag(!flag)}>reRender</Button>
+            <Table dataSource={data} pagination={true} size="small">
+                {columns.map((item, titleIndex) =>
+                    (
+                        <Table.Column
+                            key={titleIndex}
+                            title={item.title}
+                        >
+                            {item.children.map(
+                                (childItem, columnIndex) =>
+                                    (
+                                        <Table.Column
+                                            title={childItem.title}
+                                            dataIndex={childItem.dataIndex}
+                                            key={titleIndex.toString() + columnIndex.toString()}
+                                        />
+                                    )
+                            )}
+                        </Table.Column>
+                    )
+                )}
+                <Table.Column
+                    title=""
+                    key="lastColumn"
+                    render={() => 123}
+                />
+            </Table>
+        </>
+    );
+}