docs: update demo

Author: zombieJ

assets/index.less

@@ -68,6 +68,26 @@
 
     &-fix {
       position: sticky !important;
+      z-index: calc(2 + var(--z-offset));
+    }
+
+    &-fix-start-shadow,
+    &-fix-end-shadow {
+      &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 5px;
+        background: rgba(0, 0, 0, 0.5);
+        content: '';
+      }
+    }
+
+    &-fix-start-shadow::after {
+      left: 100%;
+    }
+    &-fix-end-shadow::after {
+      right: 100%;
     }
 
     // &-fix-left,
@@ -132,24 +152,35 @@
     //   }
     // }
 
-    // &&-ellipsis {
-    //   overflow: hidden;
-    //   white-space: nowrap;
-    //   text-overflow: ellipsis;
-
-    //   // Fixed first or last should special process
-    //   &.@{tablePrefixCls}-cell-fix-left-first,
-    //   &.@{tablePrefixCls}-cell-fix-left-last,
-    //   &.@{tablePrefixCls}-cell-fix-right-first &.@{tablePrefixCls}-cell-fix-right-last {
-    //     overflow: visible;
-
-    //     .@{tablePrefixCls}-cell-content {
-    //       display: block;
-    //       overflow: hidden;
-    //       text-overflow: ellipsis;
-    //     }
-    //   }
-    // }
+    &&-ellipsis {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      // Fixed first or last should special process
+      &.@{tablePrefixCls}-cell-fix-start-shadow,
+      &.@{tablePrefixCls}-cell-fix-end-shadow {
+        overflow: visible;
+
+        .@{tablePrefixCls}-cell-content {
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      //   &.@{tablePrefixCls}-cell-fix-left-first,
+      //   &.@{tablePrefixCls}-cell-fix-left-last,
+      //   &.@{tablePrefixCls}-cell-fix-right-first &.@{tablePrefixCls}-cell-fix-right-last {
+      //     overflow: visible;
+
+      //     .@{tablePrefixCls}-cell-content {
+      //       display: block;
+      //       overflow: hidden;
+      //       text-overflow: ellipsis;
+      //     }
+      //   }
+    }
 
     &&-row-hover {
       background: #fff4f4;

docs/examples/scrollXY.tsx

@@ -4,18 +4,18 @@ import Table from 'rc-table';
 import '../../assets/index.less';
 
 const columns: TableProps['columns'] = [
-  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'start' },
   { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
-  { title: 'title3', dataIndex: 'c', key: 'c', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 100, fixed: 'start' },
   { title: 'title4', dataIndex: 'b', key: 'd', width: 100 },
   { title: 'title5', dataIndex: 'b', key: 'e', width: 100 },
   { title: 'title6', dataIndex: 'b', key: 'f', width: 100 },
   { title: 'title7', dataIndex: 'b', key: 'g', width: 100 },
   { title: 'title8', dataIndex: 'b', key: 'h', width: 100 },
   { title: 'title9', dataIndex: 'b', key: 'i', width: 100 },
-  { title: 'title10', dataIndex: 'b', key: 'j', width: 100 },
+  { title: 'title10', dataIndex: 'b', key: 'j', width: 100, fixed: 'end' },
   { title: 'title11', dataIndex: 'b', key: 'k', width: 100 },
-  { title: 'title12', dataIndex: 'b', key: 'l', width: 100 },
+  { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'end' },
 ];
 
 const data = [

src/Cell/index.tsx

@@ -41,6 +41,7 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   fixEnd?: number | false;
   fixedStartShadow?: boolean;
   fixedEndShadow?: boolean;
+  zIndex?: number;
   allColsFixedLeft?: boolean;
 
   // ====================== Private Props ======================
@@ -106,6 +107,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     fixEnd,
     fixedStartShadow,
     fixedEndShadow,
+    zIndex,
 
     // Private
     appendNode,
@@ -136,9 +138,11 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
 
   if (isFixStart) {
     fixedStyle.insetInlineStart = fixStart as number;
+    fixedStyle['--z-offset'] = zIndex;
   }
   if (isFixEnd) {
     fixedStyle.insetInlineEnd = fixEnd as number;
+    fixedStyle['--z-offset'] = zIndex;
   }
 
   // ================ RowSpan & ColSpan =================
@@ -194,6 +198,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
       // [`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky,
 
       // Fixed shadow
+      [`${cellPrefixCls}-fix-start-shadow`]: fixedStartShadow,
+      [`${cellPrefixCls}-fix-end-shadow`]: fixedEndShadow,
 
       [`${cellPrefixCls}-ellipsis`]: ellipsis,
       [`${cellPrefixCls}-with-append`]: appendNode,
@@ -231,9 +237,9 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     mergedChildNode = null;
   }
 
-  // if (ellipsis && (lastFixLeft || firstFixRight)) {
-  //   mergedChildNode = <span className={`${cellPrefixCls}-content`}>{mergedChildNode}</span>;
-  // }
+  if (ellipsis && (fixedStartShadow || fixedEndShadow)) {
+    mergedChildNode = <span className={`${cellPrefixCls}-content`}>{mergedChildNode}</span>;
+  }
 
   return (
     <Component

src/utils/fixUtil.ts

@@ -40,24 +40,31 @@ export function getCellFixedInfo(
     fixEnd = stickyOffsets.end[colEnd];
   }
 
-  console.log('fixStart:', colStart);
-
   // check if need to add shadow
-  const fixedStartShadow =
-    fixStart !== null && (!columns[colStart + 1] || !isFixedStart(columns[colStart + 1]));
-  const fixedEndShadow =
-    fixEnd !== null && (!columns[colEnd - 1] || !isFixedEnd(columns[colEnd - 1]));
+  let fixedStartShadow: boolean;
+  let fixedEndShadow: boolean;
 
   // Calc `zIndex`.
   // first fixed start (start -> end) column `zIndex` should be greater than next column.
   // first fixed end (end -> start) column `zIndex` should be greater than next column.
-  // TODO: handle this
+
+  let zIndex = 0;
+
+  if (fixStart !== null) {
+    fixedStartShadow = !columns[colEnd + 1] || !isFixedStart(columns[colEnd + 1]);
+    zIndex = columns.length - colStart;
+  }
+  if (fixEnd !== null) {
+    fixedEndShadow = !columns[colStart - 1] || !isFixedEnd(columns[colStart - 1]);
+    zIndex = colEnd;
+  }
 
   return {
     fixStart,
     fixEnd,
     fixedStartShadow,
     fixedEndShadow,
     isSticky: stickyOffsets.isSticky,
+    zIndex,
   };
 }