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

[kingmui]

close ant-design/ant-design#25116
close ant-design/ant-design#23170
close ant-design/ant-design#5710
close ant-design/ant-design#14795

New table features:
Now, summary supports specifying as an object, the render attribute renders summary, fixed specifies whether summary needs to be fixed, position attribute specifies the rendering position of summary, supports top and bottom.

Before:

Now we can make the summary fixed by specifying fixed:

[codecov]

Codecov Report

Merging #503 (fb236cb) into master (54ecaff) will increase coverage by 0.01%.
The diff coverage is 100.00%.

❗ Current head fb236cb differs from pull request most recent head 1332392. Consider uploading reports for the commit 1332392 to get more accurate results

@@            Coverage Diff             @@
##           master     #503      +/-   ##
==========================================
+ Coverage   99.75%   99.76%   +0.01%     
==========================================
  Files          26       28       +2     
  Lines         812      857      +45     
  Branches      238      256      +18     
==========================================
+ Hits          810      855      +45     
  Misses          2        2              

Impacted Files	Coverage Δ
src/context/TableContext.tsx	100.00% <ø> (ø)
src/Footer/Cell.tsx	100.00% <100.00%> (ø)
src/Footer/Row.tsx	100.00% <100.00%> (ø)
src/Footer/index.tsx	100.00% <100.00%> (ø)
src/Header/FixedHeader.tsx	100.00% <100.00%> (ø)
src/Table.tsx	100.00% <100.00%> (ø)
src/hooks/useCalcStickyOffsets.ts	100.00% <100.00%> (ø)
src/hooks/useScrollBarColumns.ts	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 54ecaff...1332392. Read the comment docs.

[good62881]

赶紧merge 啊！

[07akioni]

感觉这个和原有行为差别有点大，加个 prop 控制比较好吧？

[maxborts]

求merge

[afc163]

楼主不见了。ping @kingmui

[afc163]

1. 冲突了。
2. feat: ability to make table summary fixed row like table header #503 (comment)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/react-component/table/4YYjg2T3NEfbKtmNqrAxjVisfJR3
✅ Preview: https://table-git-fork-kingmui-master-react-component.vercel.app

[junbinxu]

has it been merged to antd?

[wxhzsm2005]

啊，等了两个月 还没merge呢。。。。

[quanglam2807]

Merge this, please!!!!

[davidhojman]

Merge this, please!!!!

[mdaguerre]

has it been merged to antd?

Not yet, please merge it!!!

[pierre-b]

Any news regarding the release please? much needed feature to me actually :)

[davidhojman]

Please Merge this! Thanks

[Nokecy]

还有没有希望~~~~~

[flyingcrp]

准备合并了吗?期待的搓手手

[PeiTianHuang]

跪求合并~~~~~

[adammartak]

Please Merge this! Thanks

[Nokecy]

~没希望了吗

[mh0478025]

Looks like this pull request is ready to go. If there is any more help required, I will be happy to contribute. Like many others have said here, we could very much use this functionality in our app too.
Thank you! @afc163 @zombieJ @yoyo837

[yoyo837]

@kingmui Rebase again.

[flyingcrp]

还有机会吗？😂🤣🤣

[yoyo837]

此PR大家期待蛮大，变更也挺大，Owner来处理。@afc163 @zombieJ

[MatheusPemill]

has it been merged to antd yet?

[hemengke1997]

不是吧阿sir，快一年了还没merge T.T

[flyingcrp]

我们产品得了绝症，说想在有生之年看到这个feature被合并🤓🤓🤓

[qyuja]

插个眼 等着合并

[qhan1028]

I had figured out a hack solution.

import React, { FC, useEffect, useMemo } from 'react';

import { Table } from 'antd';
import { useMeasure } from 'react-use';

...

export const App: FC = () => {

  const dataSource = ...
  const columns = ...
  ...

  /** Render */
  const [ref, { height }] = useMeasure<HTMLDivElement>();
  const tableTitleRef = useRef<Element>();
  const tableHeaderRef = useRef<Element>();
  const tableBodyRef = useRef<Element>();
  const tableFooterRef = useRef<Element>();

  const refs = (e: HTMLDivElement) => {
    ref(e);
    // 攔截 ref 呼叫，找到 title, header, body, footer element
    tableTitleRef.current = e?.getElementsByClassName('ant-table-title')?.[0];
    tableHeaderRef.current = e?.getElementsByClassName('ant-table-header')?.[0];
    tableBodyRef.current = e?.getElementsByClassName('ant-table-body')?.[0];
    tableFooterRef.current = e?.getElementsByClassName('ant-table-footer')?.[0];
  };

  /** 38、48 分別是沒有換行時的基本高度，當作 element 找不到時的 fallback default 值 */
  const scroll = useMemo(() => {
    return {
      x: 1200,
      y:
        height -
        (tableTitleRef.current?.clientHeight || 38) -
        (tableHeaderRef.current?.clientHeight || 38) -
        (tableFooterRef.current?.clientHeight || 48)
    }
  }, [height]);

  useEffect(() => {
    if (scroll) {
      // 直接指定高度
      if (tableBodyRef.current) tableBodyRef.current.style = `overflow: auto scroll; height: ${scroll.y}px;`;
    }
  }, [height, scroll]);

  return (
    <div ref={refs} style={{ height: '100%' }}>
      <Table
        scroll={scroll}
        sticky={true}
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        showHeader={true}
        ...
        title={() => "This is header"}
        footer={() => "This is footer"}
      />
    </div>
  );
}

Demo: https://youtu.be/moMkyg3ExzU

[junbinxu]

     您好，您的邮件我已收到，我会及时认真处理，祝您生活愉快。