fix: table virtualized empty height (#944)

packages/semi-ui/table/Body/index.tsx

@@ -423,7 +423,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
 
         const listStyle = {
             width: '100%',
-            height: y,
+            height: virtualizedData?.length ? y : 0,
             overflowX: 'auto',
             overflowY: 'auto',
         } as const;

packages/semi-ui/table/_story/v2/FixedVirtualizedEmpty.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Table, Tag, Tooltip, Button } from '../../../index';
+
+export default function App() {
+    const [data, setData] = useState([]);
+
+    const loadData = () => {
+        if (Array.isArray(data) && data.length > 0) {
+            setData([]);
+            return;
+        }
+
+        const newData = [];
+        for (let i = 0; i < 10000; i++) {
+            const age = (i * 1000) % 149;
+            const name = `Edward King ${i}`;
+            newData.push({
+                key: '' + i,
+                name,
+                age,
+                address: `London, Park Lane no. ${i}`,
+                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+            });
+        }
+
+        setData(newData);
+    };
+
+    const scroll = { y: 600, x: 1600 };
+    const style = { width: 800 };
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+            fixed: true,
+            filters: [
+                {
+                    text: 'Code 45',
+                    value: '45',
+                },
+                {
+                    text: 'King 4',
+                    value: 'King 4',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            width: 150,
+            sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        },
+        {
+            title: 'Address',
+            // width: 200,
+            dataIndex: 'address',
+        },
+        {
+            fixed: 'right' as const,
+            width: 250,
+            render: (text, record) => (
+                <Tooltip content={record.description}>
+                    <Tag color="green">Show Info</Tag>
+                </Tooltip>
+            ),
+        },
+    ];
+    return (
+        <div>
+            <Button onClick={loadData}>load data</Button>
+            <Table pagination={false} columns={columns} dataSource={data} scroll={scroll} style={style} virtualized />
+        </div>
+    );
+}

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

@@ -6,4 +6,5 @@ export { default as FixedResizable } from './FixedResizable';
 export { default as FixedExpandedRow } from './FixedExpandedRow';
 export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
 export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
-export { default as RadioRowSelection } from './radioRowSelection';
+export { default as RadioRowSelection } from './radioRowSelection';
+export { default as FixedVirtualizedEmpty } from './FixedVirtualizedEmpty';