fix: solve table display unexpected when column fixed (#925)

* fix: solve table display unexpected when column fixed

* feat: code optimize

Author: kiner-tang

src/Footer/Cell.tsx

@@ -24,7 +24,7 @@ export default function SummaryCell({
   align,
 }: SummaryCellProps) {
   const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
-  const { scrollColumnIndex, stickyOffsets, flattenColumns } = React.useContext(SummaryContext);
+  const { scrollColumnIndex, stickyOffsets, flattenColumns, columns } = React.useContext(SummaryContext);
   const lastIndex = index + colSpan - 1;
   const mergedColSpan = lastIndex + 1 === scrollColumnIndex ? colSpan + 1 : colSpan;
 
@@ -34,6 +34,7 @@ export default function SummaryCell({
     flattenColumns,
     stickyOffsets,
     direction,
+    columns?.[index]
   );
 
   return (

src/Footer/SummaryContext.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import type { ColumnType, StickyOffsets } from '../interface';
+import type { ColumnsType, ColumnType, StickyOffsets } from '../interface';
 
 type FlattenColumns<RecordType> = readonly (ColumnType<RecordType> & { scrollbar?: boolean })[];
 
 const SummaryContext = React.createContext<{
   stickyOffsets?: StickyOffsets;
   scrollColumnIndex?: number;
   flattenColumns?: FlattenColumns<any>;
+  columns?: ColumnsType<any>;
 }>({});
 
 export default SummaryContext;

src/Footer/index.tsx

@@ -2,7 +2,7 @@ import { responseImmutable, useContext } from '@rc-component/context';
 import * as React from 'react';
 import TableContext from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
-import type { ColumnType, StickyOffsets } from '../interface';
+import type { ColumnsType, ColumnType, StickyOffsets } from '../interface';
 import Summary from './Summary';
 import SummaryContext from './SummaryContext';
 
@@ -12,14 +12,15 @@ export interface FooterProps<RecordType> {
   children: React.ReactNode;
   stickyOffsets: StickyOffsets;
   flattenColumns: FlattenColumns<RecordType>;
+  columns: ColumnsType<RecordType>;
 }
 
 function Footer<RecordType>(props: FooterProps<RecordType>) {
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
 
-  const { children, stickyOffsets, flattenColumns } = props;
+  const { children, stickyOffsets, flattenColumns, columns } = props;
 
   const prefixCls = useContext(TableContext, 'prefixCls');
 
@@ -31,8 +32,9 @@ function Footer<RecordType>(props: FooterProps<RecordType>) {
       stickyOffsets,
       flattenColumns,
       scrollColumnIndex: scrollColumn?.scrollbar ? lastColumnIndex : null,
+      columns
     }),
-    [scrollColumn, flattenColumns, lastColumnIndex, stickyOffsets],
+    [scrollColumn, flattenColumns, lastColumnIndex, stickyOffsets, columns],
   );
 
   return (

src/Header/HeaderRow.tsx

@@ -34,7 +34,6 @@ function HeaderRow<RecordType>({
   index,
 }: RowProps<RecordType>) {
   const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
-
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
     rowProps = onHeaderRow(
@@ -49,12 +48,13 @@ function HeaderRow<RecordType>({
     <RowComponent {...rowProps}>
       {cells.map((cell: CellType<RecordType>, cellIndex) => {
         const { column } = cell;
-        const fixedInfo = getCellFixedInfo(
+        const fixedInfo = getCellFixedInfo<RecordType>(
           cell.colStart,
           cell.colEnd,
           flattenColumns,
           stickyOffsets,
           direction,
+          column
         );
 
         let additionalProps: React.HTMLAttributes<HTMLElement>;

src/Table.tsx

@@ -599,7 +599,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
             {bodyColGroup}
             {bodyTable}
             {!fixFooter && summaryNode && (
-              <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns}>
+              <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns} columns={columns}>
                 {summaryNode}
               </Footer>
             )}
@@ -680,7 +680,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
           {showHeader !== false && <Header {...headerProps} {...columnContext} />}
           {bodyTable}
           {summaryNode && (
-            <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns}>
+            <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns} columns={columns}>
               {summaryNode}
             </Footer>
           )}
@@ -722,7 +722,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     fullTable = <ResizeObserver onResize={onFullTableResize}>{fullTable}</ResizeObserver>;
   }
 
-  const fixedInfoList = useFixedInfo(flattenColumns, stickyOffsets, direction);
+  const fixedInfoList = useFixedInfo(flattenColumns, stickyOffsets, direction, columns);
 
   const TableContextValue = React.useMemo(
     () => ({

src/hooks/useFixedInfo.ts

@@ -1,15 +1,16 @@
 import useMemo from 'rc-util/lib/hooks/useMemo';
 import isEqual from 'rc-util/lib/isEqual';
-import type { ColumnType, Direction, StickyOffsets } from '../interface';
+import type { ColumnsType, ColumnType, Direction, StickyOffsets } from '../interface';
 import { getCellFixedInfo } from '../utils/fixUtil';
 
 export default function useFixedInfo<RecordType>(
   flattenColumns: readonly ColumnType<RecordType>[],
   stickyOffsets: StickyOffsets,
   direction: Direction,
+  columns: ColumnsType<RecordType>
 ) {
   const fixedInfoList = flattenColumns.map((_, colIndex) =>
-    getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction),
+    getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction, columns?.[colIndex]),
   );
 
   return useMemo(

src/utils/fixUtil.ts

@@ -1,4 +1,4 @@
-import type { StickyOffsets, FixedType, Direction } from '../interface';
+import type { StickyOffsets, FixedType, Direction, ColumnType, ColumnGroupType } from '../interface';
 
 export interface FixedInfo {
   fixLeft: number | false;
@@ -13,12 +13,13 @@ export interface FixedInfo {
   isSticky: boolean;
 }
 
-export function getCellFixedInfo(
+export function getCellFixedInfo<RecordType = any>(
   colStart: number,
   colEnd: number,
   columns: readonly { fixed?: FixedType }[],
   stickyOffsets: StickyOffsets,
   direction: Direction,
+  curColumns?: ColumnType<RecordType> | ColumnGroupType<RecordType>
 ): FixedInfo {
   const startColumn = columns[colStart] || {};
   const endColumn = columns[colEnd] || {};
@@ -41,20 +42,23 @@ export function getCellFixedInfo(
   const nextColumn = columns[colEnd + 1];
   const prevColumn = columns[colStart - 1];
 
+  // no children only
+  const canLastFix = !(curColumns as ColumnGroupType<RecordType>)?.children;
+
   if (direction === 'rtl') {
     if (fixLeft !== undefined) {
       const prevFixLeft = prevColumn && prevColumn.fixed === 'left';
-      firstFixLeft = !prevFixLeft;
+      firstFixLeft = !prevFixLeft && canLastFix;
     } else if (fixRight !== undefined) {
       const nextFixRight = nextColumn && nextColumn.fixed === 'right';
-      lastFixRight = !nextFixRight;
+      lastFixRight = !nextFixRight && canLastFix;
     }
   } else if (fixLeft !== undefined) {
     const nextFixLeft = nextColumn && nextColumn.fixed === 'left';
-    lastFixLeft = !nextFixLeft;
+    lastFixLeft = !nextFixLeft && canLastFix;
   } else if (fixRight !== undefined) {
     const prevFixRight = prevColumn && prevColumn.fixed === 'right';
-    firstFixRight = !prevFixRight;
+    firstFixRight = !prevFixRight && canLastFix;
   }
 
   return {

tests/FixedHeader.spec.js

@@ -1,9 +1,9 @@
-import React from 'react';
 import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import RcResizeObserver from 'rc-resize-observer';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
 import Table, { INTERNAL_COL_DEFINE } from '../src';
-import RcResizeObserver from 'rc-resize-observer';
 
 describe('Table.FixedHeader', () => {
   let domSpy;
@@ -208,4 +208,62 @@ describe('Table.FixedHeader', () => {
 
     jest.useRealTimers();
   });
+
+  it('do not mask as ant-table-cell-fix-left-last in nested table parent cell', () => {
+    const columns = [
+      {
+        title: '父表头右侧的阴影导致整个表格最右侧有空隙',
+        children: [
+          {
+            key: 'name',
+            title: 'Name',
+            fixed: 'left',
+            dataIndex: 'name',
+          },
+          {
+            key: 'name',
+            title: 'Name',
+            fixed: 'left',
+            dataIndex: 'name',
+          },
+          {
+            key: 'name',
+            title: 'Name',
+            dataIndex: 'name',
+          },
+          {
+            key: 'name',
+            title: 'Name',
+            fixed: 'right',
+            dataIndex: 'name',
+          },
+        ],
+      },
+    ];
+
+    const data = [
+      {
+        key: 0,
+        name: 'Jack',
+      },
+      {
+        key: 1,
+        name: 'Jack1',
+      },
+      {
+        key: 2,
+        name: 'Jack1',
+      },
+    ];
+    const wrapper = mount(
+      <Table
+        columns={columns}
+        data={data}
+        scroll={{ x: true }}
+      />,
+    );
+    expect(wrapper.find('td').at(9).props().className).toContain('rc-table-cell-fix-left-last');
+    expect(wrapper.find('th').first().props().className).not.toContain('rc-table-cell-fix-left-last');
+    
+  });
 });