feat: Table summary support sticky mode (#30631)

* chore: Bump rc-table

* feat: Patch summary fixed color

* fix: style className

* test: Update snapshot

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -15882,7 +15882,7 @@ exports[`renders ./components/table/demo/sticky.md correctly 1`] = `
           class="ant-table-container"
         >
           <div
-            class="ant-table-header ant-table-sticky-header"
+            class="ant-table-header ant-table-sticky-holder"
             style="overflow:hidden;top:0"
           >
             <table
@@ -16756,6 +16756,41 @@ exports[`renders ./components/table/demo/sticky.md correctly 1`] = `
               </tbody>
             </table>
           </div>
+          <div
+            class="ant-table-summary ant-table-sticky-holder"
+            style="overflow:hidden;bottom:0"
+          >
+            <table
+              style="table-layout:fixed;visibility:hidden"
+            >
+              <colgroup />
+              <tfoot
+                class="ant-table-summary"
+              >
+                <tr>
+                  <td
+                    class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-fix-sticky"
+                    colspan="2"
+                    style="position:sticky;left:0"
+                  >
+                    Fix Left
+                  </td>
+                  <td
+                    class="ant-table-cell"
+                    colspan="8"
+                  >
+                    Scroll Context
+                  </td>
+                  <td
+                    class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first ant-table-cell-fix-sticky"
+                    style="position:sticky;right:0"
+                  >
+                    Fix Right
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
         </div>
       </div>
       <ul

components/table/demo/sticky.md

@@ -94,7 +94,25 @@ for (let i = 0; i < 100; i++) {
 }
 
 ReactDOM.render(
-  <Table columns={columns} dataSource={data} scroll={{ x: 1500 }} sticky />,
+  <Table
+    columns={columns}
+    dataSource={data}
+    scroll={{ x: 1500 }}
+    summary={pageData => (
+      <Table.Summary fixed>
+        <Table.Summary.Row>
+          <Table.Summary.Cell index={0} colSpan={2}>
+            Fix Left
+          </Table.Summary.Cell>
+          <Table.Summary.Cell index={2} colSpan={8}>
+            Scroll Context
+          </Table.Summary.Cell>
+          <Table.Summary.Cell index={10}>Fix Right</Table.Summary.Cell>
+        </Table.Summary.Row>
+      </Table.Summary>
+    )}
+    sticky
+  />,
   mountNode,
 );
 ```

components/table/style/index.less

@@ -9,7 +9,7 @@
 @table-header-icon-color: #bfbfbf;
 @table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
 @table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
-@table-sticky-zindex: calc(@zindex-table-fixed + 1);
+@table-sticky-zindex: (@zindex-table-fixed + 1);
 @table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
 
 .@{table-prefix-cls}-wrapper {
@@ -146,7 +146,13 @@
   }
 
   // =========================== Summary ============================
-  tfoot {
+  &-summary {
+    background: @table-bg;
+
+    div& {
+      box-shadow: 0 -@border-width-base 0 @table-border-color;
+    }
+
     > tr {
       > th,
       > td {
@@ -621,7 +627,7 @@
     }
   }
   &-sticky {
-    &-header {
+    &-holder {
       position: sticky;
       z-index: @table-sticky-zindex;
     }

package.json

@@ -138,7 +138,7 @@
     "rc-slider": "~9.7.1",
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
-    "rc-table": "~7.14.0",
+    "rc-table": "~7.15.1",
     "rc-tabs": "~11.9.0",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.1.1",