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?

Would if work if you can put another table inside of the footer? — Yichz, Jan 03 '18 at 16:07
@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 https://ant.design/components/table/ — NSjonas, Apr 19 '18 at 20:00
@NSjonas ye, but you can give width for every column and then calculate width for Example: 1st column width 5%, second 5%, third 30%, so first+second+third = 40% So the first 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 :) — Zhenya Telegin, Apr 21 '18 at 18:21
@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 — NSjonas, Apr 23 '18 at 16:40
@ZhenyaTelegin if you just want to provide an example and explain your approach I'll accept it as the answer — NSjonas, Apr 23 '18 at 16:41
@NSjonas I've tried to achieve it with fixed width. But nothing, probably will try one more time later — Zhenya Telegin, Apr 25 '18 at 08:07

score 10 · Accepted Answer · answered Apr 30 '20 at 20:12

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.

score 1 · Answer 2 · answered May 01 '22 at 08:30

1

The codesandbox link in rkumar1904's answer is outdated.

I couldn't add a comment, I'm not famous enough yet.

https://codesandbox.io/s/meu48c?file=/demo.js

answered May 01 '22 at 08:30

chris mclellen

11
1

antd Table Summary

2 Answers2