style: fixed table column z-index bug

content/start/changelog/index-en-US.md

@@ -26,6 +26,7 @@ Version：Major.Minor.Patch
     - Fixed the jitter of scrolling items when Tree uses both `virtualize` and `renderFullLabel`  [#527](https://github.com/DouyinFE/semi-design/issues/527)
 - 【Style】
     - Fixed TextArea `readonly` hover cursor style bug [@chenc041](https://github.com/chenc041) [#535](https://github.com/DouyinFE/semi-design/issues/535)
+    - Fixed the problem that the `z-index` level of the fixed column of Table is too high
 
 #### 🎉 2.3.0 (2022-01-14)
 - 【Fix】

content/start/changelog/index.md

@@ -25,6 +25,7 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
     - 修复 Tree 同时使用虚拟化和 renderFullLabel 时，滚动项目发生抖动的问题  [#527](https://github.com/DouyinFE/semi-design/issues/527)
 - 【Style】
     - 修复 TextArea readonly 模式下光标显示为禁用问题 [@chenc041](https://github.com/chenc041)  [#535](https://github.com/DouyinFE/semi-design/issues/535)
+    - 修复 Table 固定列 z-index 层级过高问题
 
 #### 🎉 2.3.1 (2022-01-21)
 - 【Chore】

packages/semi-foundation/table/table.scss

@@ -22,6 +22,10 @@ $module: #{$prefix}-table;
         @include font-size-regular;
         color: $color-table-text-default;
         width: 100%;
+
+        &[data-column-fixed=true] {
+            z-index: 1;
+        }
     }
 
     &-middle {

packages/semi-ui/table/Table.tsx

@@ -1374,6 +1374,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             <div
                 ref={this.rootWrapRef}
                 className={classnames(className, `${prefixCls}-wrapper`)}
+                data-column-fixed={anyColumnFixed}
                 style={wrapStyle}
                 id={id}
             >

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

@@ -77,6 +77,7 @@ 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';
+export { default as FixedZIndex } from './v2/FixedZIndex';
 
 // empty table
 

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
+
+App.storyName = 'fixed z-index bug';
+export default function App() {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+            fixed: true,
+            filters: [
+                {
+                    text: 'King 3',
+                    value: 'King 3',
+                },
+                {
+                    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',
+        },
+        {
+            title: 'Description',
+            // width: 400,
+            dataIndex: 'description',
+        },
+        {
+            fixed: 'right',
+            width: 250,
+            render: (text, record) => <Tooltip content={record.description}><Tag color="green">Show Info</Tag></Tooltip>
+        }
+    ];
+
+    let data = [];
+
+    const rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Michael James', // Column configuration not to be checked
+            name: record.name,
+        }),
+        // fixed: true,
+    };
+
+    for (let i = 0; i < 46; i++) {
+        let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i / 3);
+        let name = `Edward King ${i}`;
+        data.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.`,
+        });
+    }
+
+    const scroll = { y: 300, x: 1500 };
+
+    return (
+        <div style={{ position: 'relative', height: '100vh' }}>
+            <div style={{ height: 60, background: 'red', position: 'absolute', top: 0, left: 0, right: 0, zIndex: 2 }}>
+                Fixed Header
+            </div>
+            <Table
+                columns={columns}
+                dataSource={data}
+                scroll={scroll}
+                rowSelection={rowSelection}
+            />
+        </div>
+    );
+}