Merge branch 'master' into fix-shadow

Author: kiner-tang

.github/workflows/main.yml

@@ -24,7 +24,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
 
       - name: hack for singe file
         run: |
@@ -41,7 +41,7 @@ jobs:
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
   lint:
     runs-on: ubuntu-latest

assets/index.less

@@ -56,6 +56,13 @@
   }
 
   // ================== Cell ==================
+  &-fixed-column-gapped {
+    .@{tablePrefixCls}-cell-fix-left-last::after,
+    .@{tablePrefixCls}-cell-fix-right-first::after {
+      display: none !important;
+    }
+  }
+
   &-cell {
     background: #f4f4f4;
 

docs/demo/components.md

@@ -0,0 +1,8 @@
+---
+title: components
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/components.tsx"></code>

docs/examples/components.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Table from 'rc-table';
+
+const data = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({
+    key: i,
+    a: `a${i}`,
+    b: `b${i}`,
+    c: `c${i}`,
+  });
+}
+
+const table = (props: any) => {
+  return (
+    <>
+      <div style={{ background: '#fff' }}>header table</div>
+      <table className={props.className}>{props.children}</table>
+    </>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div>
+      <Table
+        components={{ header: { table } }}
+        sticky
+        columns={[
+          { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+          { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+          { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+        ]}
+        data={data}
+      />
+    </div>
+  );
+};
+
+export default Demo;

docs/examples/fixedColumns.tsx

@@ -34,7 +34,7 @@ const columns: ColumnType<RecordType>[] = [
   { title: 'title8', dataIndex: 'b', key: 'h' },
   { title: 'title9', dataIndex: 'b', key: 'i' },
   { title: 'title10', dataIndex: 'b', key: 'j' },
-  { title: 'title11', dataIndex: 'b', key: 'k', width: 50, fixed: 'right' },
+  { title: 'title11', dataIndex: 'b', key: 'k', width: 50 },
   { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
 ];
 
@@ -65,6 +65,7 @@ const Demo = () => {
         Scroll Y
       </label>
       <Table
+        // direction="rtl"
         columns={columns}
         expandedRowRender={({ b, c }) => b || c}
         scroll={{ x: 1200, y: scrollY ? 200 : null }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-table",
-  "version": "7.38.1",
+  "version": "7.40.0",
   "description": "table ui component for react",
   "engines": {
     "node": ">=8.x"
@@ -62,17 +62,16 @@
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^12.1.5",
     "@types/enzyme": "^3.10.5",
-    "@types/react": "^18.0.28",
     "@types/jest": "^29.5.0",
+    "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.5",
     "@types/responselike": "^1.0.0",
     "@types/styled-components": "^5.1.32",
-    "@types/testing-library__jest-dom": "^6.0.0",
     "@umijs/fabric": "^4.0.1",
-    "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/coverage-v8": "^1.2.2",
     "cross-env": "^7.0.0",
     "dumi": "^2.1.3",
     "enzyme": "^3.1.0",
@@ -105,7 +104,7 @@
     "regenerator-runtime": "^0.14.0",
     "styled-components": "^6.1.1",
     "typescript": "~5.3.0",
-    "vitest": "^0.31.0"
+    "vitest": "^1.2.2"
   },
   "lint-staged": {
     "**/*.{js,jsx,tsx,ts,md,json}": [

src/FixedHolder/index.tsx

@@ -63,11 +63,13 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
     ...restProps
   } = props;
 
-  const { prefixCls, scrollbarSize, isSticky } = useContext(TableContext, [
+  const { prefixCls, scrollbarSize, isSticky, getComponent } = useContext(TableContext, [
     'prefixCls',
     'scrollbarSize',
     'isSticky',
+    'getComponent',
   ]);
+  const TableComponent = getComponent(['header', 'table'], 'table');
 
   const combinationScrollBarSize = isSticky && !fixHeader ? 0 : scrollbarSize;
 
@@ -146,7 +148,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
         [stickyClassName]: !!stickyClassName,
       })}
     >
-      <table
+      <TableComponent
         style={{
           tableLayout: 'fixed',
           visibility: noData || mergedColumnWidth ? null : 'hidden',
@@ -165,7 +167,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
           columns: columnsWithScrollbar,
           flattenColumns: flattenColumnsWithScrollbar,
         })}
-      </table>
+      </TableComponent>
     </div>
   );
 });

src/Header/Header.tsx

@@ -90,20 +90,19 @@ export interface HeaderProps<RecordType> {
   onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
 }
 
-function Header<RecordType>(props: HeaderProps<RecordType>): React.ReactElement {
+const Header = <RecordType extends any>(props: HeaderProps<RecordType>) => {
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
 
   const { stickyOffsets, columns, flattenColumns, onHeaderRow } = props;
 
   const { prefixCls, getComponent } = useContext(TableContext, ['prefixCls', 'getComponent']);
-  const rows: CellType<RecordType>[][] = React.useMemo(() => parseHeaderRows(columns), [columns]);
+  const rows = React.useMemo<CellType<RecordType>[][]>(() => parseHeaderRows(columns), [columns]);
 
   const WrapperComponent = getComponent(['header', 'wrapper'], 'thead');
   const trComponent = getComponent(['header', 'row'], 'tr');
   const thComponent = getComponent(['header', 'cell'], 'th');
-  const tdComponent = getComponent(['header', 'cell'], 'td');
 
   return (
     <WrapperComponent className={`${prefixCls}-thead`}>
@@ -116,16 +115,14 @@ function Header<RecordType>(props: HeaderProps<RecordType>): React.ReactElement
             stickyOffsets={stickyOffsets}
             rowComponent={trComponent}
             cellComponent={thComponent}
-            tdCellComponent={tdComponent}
             onHeaderRow={onHeaderRow}
             index={rowIndex}
           />
         );
-
         return rowNode;
       })}
     </WrapperComponent>
   );
-}
+};
 
 export default responseImmutable(Header);

src/Header/HeaderRow.tsx

@@ -18,21 +18,20 @@ export interface RowProps<RecordType> {
   flattenColumns: readonly ColumnType<RecordType>[];
   rowComponent: CustomizeComponent;
   cellComponent: CustomizeComponent;
-  tdCellComponent: CustomizeComponent;
   onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
   index: number;
 }
 
-function HeaderRow<RecordType>({
-  cells,
-  stickyOffsets,
-  flattenColumns,
-  rowComponent: RowComponent,
-  cellComponent: CellComponent,
-  tdCellComponent,
-  onHeaderRow,
-  index,
-}: RowProps<RecordType>) {
+const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
+  const {
+    cells,
+    stickyOffsets,
+    flattenColumns,
+    rowComponent: RowComponent,
+    cellComponent: CellComponent,
+    onHeaderRow,
+    index,
+  } = props;
   const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
@@ -67,7 +66,7 @@ function HeaderRow<RecordType>({
             scope={column.title ? (cell.colSpan > 1 ? 'colgroup' : 'col') : null}
             ellipsis={column.ellipsis}
             align={column.align}
-            component={column.title ? CellComponent : tdCellComponent}
+            component={CellComponent}
             prefixCls={prefixCls}
             key={columnsKey[cellIndex]}
             {...fixedInfo}
@@ -78,7 +77,7 @@ function HeaderRow<RecordType>({
       })}
     </RowComponent>
   );
-}
+};
 
 if (process.env.NODE_ENV !== 'production') {
   HeaderRow.displayName = 'HeaderRow';

src/Table.tsx

@@ -280,7 +280,7 @@ function Table<RecordType extends DefaultRecordType>(
   const scrollX = scroll?.x;
   const [componentWidth, setComponentWidth] = React.useState(0);
 
-  const [columns, flattenColumns, flattenScrollX] = useColumns(
+  const [columns, flattenColumns, flattenScrollX, hasGapFixed] = useColumns(
     {
       ...props,
       ...expandableConfig,
@@ -348,7 +348,7 @@ function Table<RecordType extends DefaultRecordType>(
   const colsKeys = getColumnsKey(flattenColumns);
   const pureColWidths = colsKeys.map(columnKey => colsWidths.get(columnKey));
   const colWidths = React.useMemo(() => pureColWidths, [pureColWidths.join('_')]);
-  const stickyOffsets = useStickyOffsets(colWidths, flattenColumns.length, direction);
+  const stickyOffsets = useStickyOffsets(colWidths, flattenColumns, direction);
   const fixHeader = scroll && validateValue(scroll.y);
   const horizonScroll = (scroll && validateValue(mergedScrollX)) || Boolean(expandableConfig.fixed);
   const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);
@@ -706,6 +706,7 @@ function Table<RecordType extends DefaultRecordType>(
             scrollBodyRef={scrollBodyRef}
             onScroll={onScroll}
             container={container}
+            data={data}
           />
         )}
       </>
@@ -750,6 +751,7 @@ function Table<RecordType extends DefaultRecordType>(
         [`${prefixCls}-fixed-header`]: fixHeader,
         /** No used but for compatible */
         [`${prefixCls}-fixed-column`]: fixColumn,
+        [`${prefixCls}-fixed-column-gapped`]: fixColumn && hasGapFixed,
         [`${prefixCls}-scroll-horizontal`]: horizonScroll,
         [`${prefixCls}-has-fix-left`]: flattenColumns[0] && flattenColumns[0].fixed,
         [`${prefixCls}-has-fix-right`]:

src/hooks/useColumns/index.tsx

@@ -88,30 +88,6 @@ function flatColumns<RecordType>(
     }, []);
 }
 
-function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) {
-  let allFixLeft = true;
-  for (let i = 0; i < flattenColumns.length; i += 1) {
-    const col = flattenColumns[i];
-    if (allFixLeft && col.fixed !== 'left') {
-      allFixLeft = false;
-    } else if (!allFixLeft && col.fixed === 'left') {
-      warning(false, `Index ${i - 1} of \`columns\` missing \`fixed='left'\` prop.`);
-      break;
-    }
-  }
-
-  let allFixRight = true;
-  for (let i = flattenColumns.length - 1; i >= 0; i -= 1) {
-    const col = flattenColumns[i];
-    if (allFixRight && col.fixed !== 'right') {
-      allFixRight = false;
-    } else if (!allFixRight && col.fixed === 'right') {
-      warning(false, `Index ${i + 1} of \`columns\` missing \`fixed='right'\` prop.`);
-      break;
-    }
-  }
-}
-
 function revertForRtl<RecordType>(columns: ColumnsType<RecordType>): ColumnsType<RecordType> {
   return columns.map(column => {
     const { fixed, ...restProps } = column;
@@ -176,6 +152,7 @@ function useColumns<RecordType>(
   columns: ColumnsType<RecordType>,
   flattenColumns: readonly ColumnType<RecordType>[],
   realScrollWidth: undefined | number,
+  hasGapFixed: boolean,
 ] {
   const baseColumns = React.useMemo<ColumnsType<RecordType>>(() => {
     const newColumns = columns || convertChildrenToColumns(children) || [];
@@ -294,10 +271,40 @@ function useColumns<RecordType>(
     return flatColumns(mergedColumns);
   }, [mergedColumns, direction, scrollWidth]);
 
-  // Only check out of production since it's waste for each render
-  if (process.env.NODE_ENV !== 'production') {
-    warningFixed(direction === 'rtl' ? flattenColumns.slice().reverse() : flattenColumns);
-  }
+  // ========================= Gap Fixed ========================
+  const hasGapFixed = React.useMemo(() => {
+    // Fixed: left, since old browser not support `findLastIndex`, we should use reverse loop
+    let lastLeftIndex = -1;
+    for (let i = flattenColumns.length - 1; i >= 0; i -= 1) {
+      const colFixed = flattenColumns[i].fixed;
+      if (colFixed === 'left' || colFixed === true) {
+        lastLeftIndex = i;
+        break;
+      }
+    }
+
+    if (lastLeftIndex >= 0) {
+      for (let i = 0; i <= lastLeftIndex; i += 1) {
+        const colFixed = flattenColumns[i].fixed;
+        if (colFixed !== 'left' && colFixed !== true) {
+          return true;
+        }
+      }
+    }
+
+    // Fixed: right
+    const firstRightIndex = flattenColumns.findIndex(({ fixed: colFixed }) => colFixed === 'right');
+    if (firstRightIndex >= 0) {
+      for (let i = firstRightIndex; i < flattenColumns.length; i += 1) {
+        const colFixed = flattenColumns[i].fixed;
+        if (colFixed !== 'right') {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }, [flattenColumns]);
 
   // ========================= FillWidth ========================
   const [filledColumns, realScrollWidth] = useWidthColumns(
@@ -306,7 +313,7 @@ function useColumns<RecordType>(
     clientWidth,
   );
 
-  return [mergedColumns, filledColumns, realScrollWidth];
+  return [mergedColumns, filledColumns, realScrollWidth, hasGapFixed];
 }
 
 export default useColumns;