fix: fixed Table header rowSelection is selected when dataSource is Empty #2128 (#2137)

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

cypress/e2e/table.spec.js

@@ -292,4 +292,9 @@ describe('table', () => {
         cy.visit('http://localhost:6006/iframe.html?id=table--fixed-default-expanded-grouped-rows&viewMode=story');
         cy.get('.semi-table-tbody tr').eq(1).should('have.class', 'semi-table-row-expanded');
     });
+
+    it('test header rowSelection is not selected when dataSource is empty', () => {
+        cy.visit('http://localhost:6006/iframe.html?args=&id=table--fixed-row-selection-empty&viewMode=story');
+        cy.get('.semi-table-thead .semi-checkbox-unChecked').should('exist');
+    });
 });

packages/semi-foundation/table/foundation.ts

@@ -988,7 +988,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
             }
             return true;
         } else {
-            const isAllSelected = allKeys.every(rowKey => selectedRowKeysSet.has(rowKey));
+            const isAllSelected = allKeys.length && allKeys.every(rowKey => selectedRowKeysSet.has(rowKey));
             return isAllSelected || false;
         }
     }

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

@@ -113,7 +113,8 @@ export {
     InputFilter,
     FixedRowSelectionHiddenResizable,
     FixedExpandGroupRow,
-    FixedDefaultExpandedGroupedRows
+    FixedDefaultExpandedGroupedRows,
+    FixedRowSelectionEmpty
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 

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

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+export default function App() {
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar
+                            size="small"
+                            shape="square"
+                            src={record.nameIconSrc}
+                            style={{ marginRight: 12 }}
+                        ></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+        },
+        {
+            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',
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            render: () => {
+                return <IconMore />;
+            },
+        },
+    ];
+
+    const pagination = useMemo(
+        () => ({
+            pageSize: 3,
+        }),
+        []
+    );
+
+    return <Table columns={columns} dataSource={[]} rowSelection pagination={pagination} />;
+}

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

@@ -33,3 +33,4 @@ export { default as FeatRenderFilterDropdown } from './FeatRenderFilterDropdown'
 export { default as InputFilter } from './InputFilter';
 export { default as FixedExpandGroupRow } from './FixedExpandGroupRow';
 export { default as FixedDefaultExpandedGroupedRows } from './FixedExpandGroupRow/defaultExpandedGroupedRows';
+export { default as FixedRowSelectionEmpty } from './FixedRowSelectionEmpty';