feat: ability to make table summary fixed row like table header

assets/index.less

@@ -18,6 +18,23 @@
   border-bottom: 0;
 }
 
+.cellScrollBar(@bgColor: #fff) {
+  .@{tablePrefixCls}-cell-scrollbar::after {
+    position: absolute;
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: -1px;
+    width: 1px;
+    background: @bgColor;
+
+    .@{tablePrefixCls}-rtl& {
+      right: -1px;
+      left: auto;
+    }
+  }
+}
+
 .@{tablePrefixCls} {
   font-size: @font-size-base;
   color: @text-color;
@@ -165,20 +182,7 @@
       text-align: center;
     }
 
-    .@{tablePrefixCls}-cell-scrollbar::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      bottom: 0;
-      left: -1px;
-      width: 1px;
-      background: @table-head-background-color;
-
-      .@{tablePrefixCls}-rtl& {
-        right: -1px;
-        left: auto;
-      }
-    }
+    .cellScrollBar(@table-head-background-color);
   }
 
   &-header {
@@ -205,19 +209,31 @@
     border-radius: 5px 0 0 0;
   }
 
-  &-body {
+  &-body,
+  &-summary {
     .tableBorder();
     border-top: 0;
   }
 
-  &-fixed-column &-body::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border-right: @border;
-    z-index: 1;
+  &-fixed-column {
+    &-body,
+    &-summary {
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        border-right: @border;
+        z-index: 1;
+      }
+    }
+  }
+
+  &-fixed-column &-summary {
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   // ================= Expand =================
@@ -286,6 +302,7 @@
     td {
       background: #fff;
     }
+    .cellScrollBar();
   }
   &-sticky {
     &-header {

docs/examples/fixedColumns.tsx

@@ -61,22 +61,26 @@ const Demo = () => (
     <Table
       columns={columns}
       expandedRowRender={({ b, c }) => b || c}
-      scroll={{ x: 1200 }}
+      scroll={{ x: 1200, y: 200 }}
       data={data}
-      summary={() => (
-        <>
-          <Table.Summary.Row>
-            <Table.Summary.Cell index={0} />
-            <Table.Summary.Cell index={1} colSpan={2}>
-              Summary
-            </Table.Summary.Cell>
-            <Table.Summary.Cell index={3} colSpan={9}>
-              Content
-            </Table.Summary.Cell>
-            <Table.Summary.Cell index={12}>Right</Table.Summary.Cell>
-          </Table.Summary.Row>
-        </>
-      )}
+      summary={{
+        render: () => (
+          <>
+            <Table.Summary.Row>
+              <Table.Summary.Cell index={0} />
+              <Table.Summary.Cell index={1} colSpan={2}>
+                Summary
+              </Table.Summary.Cell>
+              <Table.Summary.Cell index={3} colSpan={9}>
+                Content
+              </Table.Summary.Cell>
+              <Table.Summary.Cell index={12}>Right</Table.Summary.Cell>
+            </Table.Summary.Row>
+          </>
+        ),
+        fixed: true,
+        position: 'bottom',
+      }}
     />
   </div>
 );

src/Footer/Cell.tsx

@@ -20,9 +20,11 @@ export default function SummaryCell({
   rowSpan,
   align,
 }: SummaryCellProps) {
-  const { prefixCls, fixedInfoList } = React.useContext(TableContext);
+  const { prefixCls, isSummaryFixed, fixedInfoList, summaryFixedInfoList } = React.useContext(
+    TableContext,
+  );
 
-  const fixedInfo = fixedInfoList[index];
+  const fixedInfo = isSummaryFixed ? summaryFixedInfoList[index] : fixedInfoList[index];
 
   return (
     <Cell

src/Footer/Row.tsx

@@ -1,11 +1,42 @@
 import * as React from 'react';
+import Cell from '../Cell';
+import TableContext from '../context/TableContext';
 
 export interface FooterRowProps {
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
 }
 
-export default function FooterRow(props: FooterRowProps) {
-  return <tr {...props} />;
+export default function FooterRow({ children, ...props }: FooterRowProps) {
+  const {
+    prefixCls,
+    scrollbarSize,
+    isSummaryFixed,
+    summaryFixedInfoList,
+    columnsWithScrollbar,
+  } = React.useContext(TableContext);
+
+  const summaryListLength = summaryFixedInfoList.length;
+  const summaryColumn = columnsWithScrollbar[summaryListLength - 1];
+
+  let additionalProps: React.HTMLAttributes<HTMLElement>;
+
+  if (isSummaryFixed && summaryColumn.onHeaderCell) {
+    additionalProps = summaryColumn.onHeaderCell(summaryColumn);
+  }
+
+  return (
+    <tr {...props}>
+      {children}
+      {isSummaryFixed && !!scrollbarSize && (
+        <Cell
+          component="td"
+          prefixCls={prefixCls}
+          additionalProps={additionalProps}
+          {...summaryFixedInfoList[summaryListLength - 1]}
+        />
+      )}
+    </tr>
+  );
 }

src/Footer/index.tsx

@@ -8,8 +8,12 @@ export interface FooterProps {
 }
 
 function Footer({ children }: FooterProps) {
-  const { prefixCls } = React.useContext(TableContext);
-  return <tfoot className={`${prefixCls}-summary`}>{children}</tfoot>;
+  const { prefixCls, isSummaryShowTop } = React.useContext(TableContext);
+  return isSummaryShowTop ? (
+    <thead className={`${prefixCls}-thead ${prefixCls}-summary-content`}>{children}</thead>
+  ) : (
+    <tfoot className={`${prefixCls}-tfoot ${prefixCls}-summary-content`}>{children}</tfoot>
+  );
 }
 
 export default Footer;

src/Header/FixedHeader.tsx

@@ -7,6 +7,8 @@ import Header from './Header';
 import ColGroup from '../ColGroup';
 import type { ColumnsType, ColumnType } from '../interface';
 import TableContext from '../context/TableContext';
+import useScrollBarColumns from '../hooks/useScrollBarColumns';
+import useCalcStickyOffsets from '../hooks/useCalcStickyOffsets';
 
 function useColumnWidth(colWidths: readonly number[], columCount: number) {
   return useMemo(() => {
@@ -56,8 +58,6 @@ const FixedHeader = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
   ) => {
     const { prefixCls, scrollbarSize, isSticky } = React.useContext(TableContext);
 
-    const combinationScrollBarSize = isSticky && !fixHeader ? 0 : scrollbarSize;
-
     // Pass wheel to scroll event
     const scrollRef = React.useRef<HTMLDivElement>(null);
 
@@ -88,38 +88,31 @@ const FixedHeader = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
     );
 
     // Add scrollbar column
-    const lastColumn = flattenColumns[flattenColumns.length - 1];
-    const ScrollBarColumn: ColumnType<unknown> = {
-      fixed: lastColumn ? lastColumn.fixed : null,
-      onHeaderCell: () => ({
-        className: `${prefixCls}-cell-scrollbar`,
-      }),
-    };
-
-    const columnsWithScrollbar = useMemo<ColumnsType<unknown>>(
-      () => (combinationScrollBarSize ? [...columns, ScrollBarColumn] : columns),
-      [combinationScrollBarSize, columns],
-    );
-
-    const flattenColumnsWithScrollbar = useMemo(
-      () => (combinationScrollBarSize ? [...flattenColumns, ScrollBarColumn] : flattenColumns),
-      [combinationScrollBarSize, flattenColumns],
-    );
+    const { combinationScrollBarSize, columnsWithScrollbar } = useScrollBarColumns<ColumnsType<unknown>>({
+      columns,
+      prefixCls,
+      scrollbarSize,
+      isSticky,
+      fixHeader,
+    });
+
+    const { columnsWithScrollbar: flattenColumnsWithScrollbar } = useScrollBarColumns<
+      ColumnType<unknown>[]
+    >({
+      columns: flattenColumns,
+      prefixCls,
+      scrollbarSize,
+      isSticky,
+      fixHeader,
+    });
 
     // Calculate the sticky offsets
-    const headerStickyOffsets = useMemo(() => {
-      const { right, left } = stickyOffsets;
-      return {
-        ...stickyOffsets,
-        left:
-          direction === 'rtl' ? [...left.map(width => width + combinationScrollBarSize), 0] : left,
-        right:
-          direction === 'rtl'
-            ? right
-            : [...right.map(width => width + combinationScrollBarSize), 0],
-        isSticky,
-      };
-    }, [combinationScrollBarSize, stickyOffsets, isSticky]);
+    const headerStickyOffsets = useCalcStickyOffsets({
+      stickyOffsets,
+      combinationScrollBarSize,
+      direction,
+      isSticky,
+    });
 
     const mergedColumnWidth = useColumnWidth(colWidths, columCount);