fix: fixed virtualized Table showHeader bug #726 (#1919)

* fix: fixed virtualized Table showHeader bug #726

* test: resolve Table jest error and add Cypress test case

* test: remove Table huge data demo from chromatic test

---------

Co-authored-by: shijia.me <[email protected]>

cypress/e2e/table.spec.js

@@ -219,4 +219,14 @@ describe('table', () => {
         cy.get('.semi-table-pagination-info').should('contain.text', '显示第 41 条-第 46 条，共 46 条')
         cy.get('.semi-page-item-active').eq(0).should('contain.text', '5');
     })
+
+    it('test virtualized showHeader false', () => {
+        cy.visit('http://localhost:6006/iframe.html?args=&id=table--show-header&viewMode=story');
+        cy.get('.semi-table-header').should('have.length', 1);
+        cy.window().then(window => {
+            const header = window.document.querySelector('.semi-table-header');
+            const style = window.getComputedStyle(header);
+            expect(style.height).eq('0px');
+        });
+    })
 });

packages/semi-foundation/table/table.scss

@@ -81,6 +81,10 @@ $module: #{$prefix}-table;
                 background-color: $color-table-bg-default;
             }
         }
+
+        &-hidden {
+            height: 0;
+        }
     }
 
     &-align-center {

packages/semi-ui/table/HeadTable.tsx

@@ -73,10 +73,6 @@ class HeadTable extends React.PureComponent<HeadTableProps> {
             sticky
         } = this.props;
 
-        if (!showHeader) {
-            return null;
-        }
-
         const Table = get(components, 'header.outer', 'table') as unknown as typeof React.Component;
         const x = get(scroll, 'x');
         const headStyle: Partial<React.CSSProperties> = {};
@@ -97,6 +93,7 @@ class HeadTable extends React.PureComponent<HeadTableProps> {
 
         const headTableCls = classnames(`${prefixCls}-header`, {
             [`${prefixCls}-header-sticky`]: sticky,
+            [`${prefixCls}-header-hidden`]: !showHeader,
         });
 
         const stickyTop = get(sticky, 'top', 0);

packages/semi-ui/table/__test__/table.test.js

@@ -1102,7 +1102,6 @@ describe(`Table`, () => {
         demo.setProps({
             showHeader: false,
         });
-        expect(demo.find('.semi-table-thead').length).toEqual(0); // jsx column
 
         const jsxColumns = getJSXColumns();
         const demo1 = mount(<Table dataSource={data}>{jsxColumns}</Table>);

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

@@ -103,7 +103,8 @@ export {
     ColumnResize,
     FixedResizableRowSelection,
     SorterSortOrder,
-    FixedPagination
+    FixedPagination,
+    ShowHeader
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 
@@ -625,3 +626,6 @@ PerfRenderDemo.parameters = {
 export const RenderPaginationDemo = () => <RenderPagination />;
 
 export const HugeDataDemo = ()=><HugeData/>
+HugeDataDemo.parameters = {
+  chromatic: { disableSnapshot: true },
+};

packages/semi-ui/table/_story/v2/ShowHeader/index.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+export default function App() {
+    const scroll = { y: 400, x: 900 };
+    const style = { width: 750, margin: '0 auto' };
+    const DAY = 24 * 60 * 60 * 1000;
+
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 200,
+            fixed: true,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        {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',
+            width: 150,
+            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',
+            fixed: 'right',
+            width: 150,
+            sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
+            render: (value) => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            }
+        }
+    ];
+
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 1000; 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();
+
+    return (
+        <>
+            <Table
+                pagination={false}
+                columns={columns}
+                dataSource={data}
+                scroll={scroll}
+                style={style}
+                virtualized
+                showHeader={false}
+            />
+        </>
+    );
+}

packages/semi-ui/table/_story/v2/index.js

@@ -24,3 +24,4 @@ export { default as ColumnResize } from './ColumnResize';
 export { default as FixedResizableRowSelection } from './FixedResizableRowSelection';
 export { default as SorterSortOrder } from './SorterSortOrder';
 export { default as FixedPagination } from './FixedPagination';
+export { default as ShowHeader } from './ShowHeader';