antd table Summary总结栏置顶

实现步骤：

1、首先给table添加sticky属性设置粘性头部

    <Table
      // 1、添加sticky属性
      sticky  
      columns={
    columns}
      ...
      summary={
    pageData => {
    
       ...
      }}
    />

2、通过修改table中对应的css实现合计行置顶

@import '~antd/dist/antd.css';

  tfoot th, tfoot td {
    
    background: #fafafa;
  }
  [data-theme="dark"] tfoot th, [data-theme="dark"] tfoot td {
    
    background: #1d1d1d;
  }
  
  // 2、搭配sticky 实现合计行置于表头下方 .ant-table-summary {
    
    display: table-header-group;
 }

实现效果：

详细的细节更改，根据自己的项目需求，可通过css样式调整实现。

如果使用less，修改antd 中table样式不生效，可使用深度作用选择器 :global {…}，来实现对应样式的更改。

链接: antd 4.x table通过 summary 设置合计行（总结栏）.