React Data Table Component实现表格底部列求和方案咨询

实现思路 #

react-data-table-component自带footer属性，支持自定义表格底部区域。我们可以通过以下步骤实现数值列的总和展示：

1. 安装依赖
   确保已安装核心组件：

npm install react-data-table-component

2. 计算各列总和
   使用数组reduce方法遍历表格数据，计算每个数值列的累加总和。

3. 自定义Footer区域
   通过DataTable组件的footer属性，渲染包含总和的表格行，对应各数值列的位置填充计算好的总和。

完整实现代码 #

import React, { Fragment } from 'react';
import { Col, Card, CardHeader, Container, Row } from 'reactstrap';
import { H5, Breadcrumbs } from '../../../AbstractElements';
import DataTable from 'react-data-table-component';
import DataTableExtensions from 'react-data-table-component-extensions';

const DueFeeReport = () => {
    const data = [
        {
            "name": "Gaurav",
            "admission_no": 1,
            "assign_fees": 10000,
            "scholarship_amount": 0,
            "payable_fees": 10000,
            "paid_fees": 5000,
            "add_disc": 0,
            "fine": 0,
            "due_fees": 0,
            "balance": 5000
        },
        {
            "name": "avni",
            "admission_no": 2,
            "assign_fees": 10000,
            "scholarship_amount": 0,
            "payable_fees": 10000,
            "paid_fees": 5000,
            "add_disc": 0,
            "fine": 0,
            "due_fees": 0,
            "balance": 5000
        }
    ];

    // 计算各数值列总和
    const calculateSums = () => {
        return {
            assign_fees: data.reduce((acc, curr) => acc + curr.assign_fees, 0),
            scholarship_amount: data.reduce((acc, curr) => acc + curr.scholarship_amount, 0),
            payable_fees: data.reduce((acc, curr) => acc + curr.payable_fees, 0),
            paid_fees: data.reduce((acc, curr) => acc + curr.paid_fees, 0),
            add_disc: data.reduce((acc, curr) => acc + curr.add_disc, 0),
            fine: data.reduce((acc, curr) => acc + curr.fine, 0),
            due_fees: data.reduce((acc, curr) => acc + curr.due_fees, 0),
            balance: data.reduce((acc, curr) => acc + curr.balance, 0),
        };
    };

    const sums = calculateSums();

    const columns = [
        {
            name: '学号',
            selector: (row) => row.admission_no,
            cell: (row) => row.admission_no,
            sortable: true,
            center: true
        },
        {
            name: '姓名',
            selector: (row) => row.name,
            cell: (row) => row.name,
            sortable: true,
            center: true,
            cellExport: d => d.name
        },
        {
            name: '应缴费用',
            selector: (row) => row.assign_fees,
            cell: (row) => row.assign_fees,
            sortable: true,
            center: true
        },
        {
            name: '奖学金抵扣',
            selector: (row) => row.scholarship_amount,
            cell: (row) => row.scholarship_amount,
            sortable: true,
            center: true
        },
        {
            name: '实付金额',
            selector: (row) => row.payable_fees,
            cell: (row) => row.payable_fees,
            sortable: true,
            center: true
        },
        {
            name: '已缴费用',
            selector: (row) => row.paid_fees,
            cell: (row) => row.paid_fees,
            sortable: true,
            center: true
        },
        {
            name: '额外折扣',
            selector: (row) => row.add_disc,
            cell: (row) => row.add_disc,
            sortable: true,
            center: true
        },
        {
            name: '滞纳金',
            selector: (row) => row.fine,
            cell: (row) => row.fine,
            sortable: true,
            center: true
        },
        {
            name: '逾期金额',
            selector: (row) => row.due_fees,
            cell: (row) => row.due_fees,
            sortable: true,
            center: true
        },
        {
            name: '剩余余额',
            selector: (row) => row.balance,
            cell: (row) => row.balance,
            sortable: true,
            center: true
        }
    ];

    const exportHeaders = true;

    const getData = {
        columns,
        data,
        exportHeaders
    };

    return (
        <Fragment>
            <Breadcrumbs parent="考勤" title="月度考勤报表" mainTitle="月度考勤报表" />
            <Container fluid={true} className="datatables">
                <Row>
                    <Col sm="12">
                        <Card>
                            <CardHeader>
                                <Row>
                                    <Col>
                                        <H5>缴费逾期报表</H5>
                                    </Col>
                                    <Col>
                                    </Col>
                                </Row>
                            </CardHeader>
                            <div className="table-responsive m-25">
                                <DataTableExtensions {...getData}>
                                    <DataTable
                                        data={data}
                                        columns={columns}
                                        noHeader
                                        defaultSortField="id"
                                        defaultSortAsc={false}
                                        pagination
                                        highlightOnHover
                                        footer={() => (
                                            <tr>
                                                <td><strong>总计</strong></td>
                                                <td></td>
                                                <td>{sums.assign_fees}</td>
                                                <td>{sums.scholarship_amount}</td>
                                                <td>{sums.payable_fees}</td>
                                                <td>{sums.paid_fees}</td>
                                                <td>{sums.add_disc}</td>
                                                <td>{sums.fine}</td>
                                                <td>{sums.due_fees}</td>
                                                <td>{sums.balance}</td>
                                            </tr>
                                        )}
                                    />
                                </DataTableExtensions>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Container>
        </Fragment>
    );
};

export default DueFeeReport;

关键说明 #

• calculateSums函数：通过reduce方法遍历数据，累加每个数值列的总和，确保汇总数据与表格数据实时同步。
• footer属性：接收一个返回JSX的函数，我们在这里渲染汇总行，将“总计”放在第一列，后续列对应填充各数值列的总和。
• 列名汉化：将原英文列名改为中文，更贴合国内业务场景。

内容的提问来源于stack exchange，提问作者Gaurav Maharwal