Ant deisgn 4 table summary issue in the Table.Summary.Cell

Question

Im usiing My react typescript project for Ant design 4 table . so when i adding ant design Summary table, got a following error

 TS2741: Property 'index' is missing in type '{ children: Element; colSpan: number; }' but required in type 'SummaryCellProps'.

any one know how to fix that issue. Thanks

import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import './index.css';
    import { Table, Typography } from 'antd';
    
    const { Text } = Typography;
    
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Borrow',
        dataIndex: 'borrow',
      },
      {
        title: 'Repayment',
        dataIndex: 'repayment',
      },
    ];
    
    const data = [
      {
        key: '1',
        name: 'John Brown',
        borrow: 10,
        repayment: 33,
      },
      {
        key: '2',
        name: 'Jim Green',
        borrow: 100,
        repayment: 0,
      },
      {
        key: '3',
        name: 'Joe Black',
        borrow: 10,
        repayment: 10,
      },
      {
        key: '4',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45,
      },
    ];
    
    const fixedColumns = [
      {
        title: 'Name',
        dataIndex: 'name',
        fixed: true,
        width: 100,
      },
      {
        title: 'Description',
        dataIndex: 'description',
      },
    ];
    
    const fixedData = [];
    for (let i = 0; i < 6; i += 1) {
      fixedData.push({
        key: i,
        name: i % 2 ? 'Light' : 'Bamboo',
        description: 'Everything that has a beginning, has an end.',
      });
    }
    
    ReactDOM.render(
      <>
        <Table
          columns={columns}
          dataSource={data}
          pagination={false}
          bordered
          summary={pageData => {
            let totalBorrow = 0;
            let totalRepayment = 0;
    
            pageData.forEach(({ borrow, repayment }) => {
              totalBorrow += borrow;
              totalRepayment += repayment;
            });
    
            return (
              <>
                <Table.Summary.Row>
                  <Table.Summary.Cell>Total</Table.Summary.Cell>
                  <Table.Summary.Cell>
                    <Text type="danger">{totalBorrow}</Text>
                  </Table.Summary.Cell>
                  <Table.Summary.Cell>
                    <Text>{totalRepayment}</Text>
                  </Table.Summary.Cell>
                </Table.Summary.Row>
                <Table.Summary.Row>
                  <Table.Summary.Cell>Balance</Table.Summary.Cell>
                  <Table.Summary.Cell colSpan={2}>
                    <Text type="danger">{totalBorrow - totalRepayment}</Text>
                  </Table.Summary.Cell>
                </Table.Summary.Row>
              </>
            );
          }}
        />
      </>,
      document.getElementById('container'),
    );

Answer 1

Had this issue yesterday as well, looking at the SummeryCellProps the rc-table team made index required. So I just added <Table.Summary.Row index={1}> you need to iterate through your pagedata to add the index of the that column