antd table Summary summary column top

Implementation steps:

1. First add the sticky attribute to the table to set the sticky header

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

2. By modifying the corresponding css in the table, the total row can be topped

@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;
 }

Realize the effect:

Detailed details can be changed through css style adjustments according to your own project requirements.

If you use less, modifying the table style in antd will not take effect, you can use the deep effect selector: global {…} to change the corresponding style.

Link: antd 4.x table sets the total row (summary column) through summary .