antd Table Summary

Question

I have an antd table where I want to summarize columns in the footer. However, I'm having issues getting them to line up properly with my columns. I've tried to use Row / Col to get it to match up but without much luck. Also it needs to be responsive...

 <Table
    columns={columns}
    dataSource={tableData}
    footer={
      <Row>
        <Col span={8}>
          <strong>TOTALS:</strong>
        </Col>
        <Col span={2}>
          123
        </Col>
        <Col span={3} />
        <Col span={2}>
          123
        </Col>
        <Col span={2} />
        <Col span={2}>
          123
        </Col >
        <Col span={8} />
      </Row>
    }
/>

Is there an better way to achieve this?

Horeb

Would if work if you can put another table inside of the footer? – Outfox

Did you find any nice workaround ? – Lofty

@Horeb Hello! Can you share your columns variable? – Hsinking

@ZhenyaTelegin I'd recommends just looking at one of the antd examples if you're attempting to answer the questions. My creating in the same fashion but there is a lot of extra implementation specifics that would make it harder to comprehend ant.design/components/table – Horeb

@Horeb ye, but you can give width for every column and then calculate width for <Col> Example: 1st column width 5%, second 5%, third 30%, so first+second+third = 40% So the first <Col> will be with span 8. But it looks like you're doing the same. But if can share width of your columns, I can help :) – Hsinking

@ZhenyaTelegin ah yes... so that might be part of my problem... The first two columns with the checkboxes are fixed at 25px, and then the rest of the columns are percentage based. Probably a bad way of doing it but it didn't want the checkboxes to be responsive – Horeb

@ZhenyaTelegin if you just want to provide an example and explain your approach I'll accept it as the answer – Horeb

@Horeb I've tried to achieve it with fixed width. But nothing, probably will try one more time later – Hsinking

Answer 1

I found the good solution & its provided by Antd Team in table Component have a look hope this solves your problem. have a look (https://codesandbox.io/s/summary-ant-design-demo-kw93t)

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'),
);

Thank You.

Urata