Reactjs 数据表组件页脚列总和

Question

Reactjs数据表组件页脚列总和 这是我的代码，我想在数据表中添加页脚，其中我必须显示所有列的总和。 我为此使用了react-data-table-component 包，请为我提供解决方案。 安装此组件“npm install react-data-table-component”。我只想使用数据表而不是反应表

import React, { Fragment, useState } from 'react';
import { Col, Card, CardHeader, CardBody, Form, Container, Row, Table } 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 = "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 columns = [
        
        {
            name: 'Admission No.',
            selector: (row) => row.admission_no,
            cell: (row) => row.admission_no,
            sortable: true,
            center: true,
       
        },
        {
            name: 'Name',
            selector: (row) =>  row.name ,
            cell: (row) => row.name ,
            sortable: true,
            center: true,
            cellExport: d => d.name,
        
        },
        {
            name: 'Assigned Fees',
            selector: (row) => row.assign_fees,
            cell: (row) => row.assign_fees,
            sortable: true,
            center: true,
        
        },
        {
            name: 'Scholarship',
            selector: (row) => row.scholarship_amount,
            cell: (row) => row.scholarship_amount,
            sortable: true,
            center: true,
        },
        {
            name: 'Payable Fees',
            selector: (row) => row.payable_fees,
            cell: (row) => row.payable_fees,
            sortable: true,
            center: true,
        },
        {
            name: 'Paid Fees',
            selector: (row) => row.paid_fees,
            cell: (row) => row.paid_fees,
            sortable: true,
            center: true,
        },
        {
            name: 'Additional Discount',
            selector: (row) => row.add_disc,
            cell: (row) => row.add_disc,
            sortable: true,
            center: true,
        },
        {
            name: 'Fine',
            selector: (row) => row.fine,
            cell: (row) => row.fine,
            sortable: true,
            center: true,
        },
        {
            name: 'Due Amount',
            selector: (row) => row.due_fees,
            cell: (row) => row.due_fees,
            sortable: true,
            center: true, 
        },
        {
            name: 'Balance',
            selector: (row) => row.balance,
            cell: (row) => row.balance,
            sortable: true,
            center: true,
        },
    ];

 
    const exportHeaders = true;

    const getData = {
        columns,
        data,
        exportHeaders,
    };

    return (
        <Fragment>
            <Breadcrumbs parent="Attendance" title="Monthly Attendance Report" mainTitle="Monthly Attendance Report" />
            <Container fluid={true} className="datatables">
                <Row>
                        <Col sm="12">
                            <Card>
                                <CardHeader>
                                    <Row>
                                        <Col>
                                            <H5>Due Fees Report</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
                                        />
                                    </DataTableExtensions>

                                </div>
                            </Card>
                        </Col>
                </Row>
            </Container>`your text`
        </Fragment>
    );
};

export default DueFeeReport;

Answer 1

我正在考虑解决这个问题。似乎有一个 PR 添加此功能，但未得到软件包作者的批准。我同意这将是一个很棒的功能，并且很乐意看到它添加到库中。

我的解决方案是制作一个自定义分页组件并向其添加页脚。我刚刚将开箱即用的分页组件包装在包装器组件中。

<DataTable
    columns={columns}
    data={state.data}
     progressPending={state.isLoading}
     conditionalRowStyles={highlightStyles}
     customStyles={customStyles}
     responsive
     sortFunction={customSort}
     pagination
     paginationComponent={(props) => (
         <PaginationWrapper
             rowCount={props.rowCount}
             rowsPerPage={props.rowsPerPage}
             currentPage={props.currentPage}
             onChangePage={(page) => props.onChangePage(page, props.rowCount)}
             onChangeRowsPerPage={(currentRowsperPage, currentPage) => 
                 props.onChangeRowsPerPage(currentRowsperPage, currentPage)}
             footerData={footerData}
         />        
        )
       }
  />

包装组件：

type PaginationWrapperProps = { 
    footerData?: FooterData; 
} & PaginationComponentProps;


const PaginationWrapper = ({ rowsPerPage, rowCount, currentPage, onChangePage, onChangeRowsPerPage, footerData }: PaginationWrapperProps) => {
  return (
    <>
      {/* YOUR FOOTER HERE */}
      <Pagination
        rowCount={rowCount}
        rowsPerPage={rowsPerPage}
        currentPage={currentPage}
        onChangePage={(page) => onChangePage(page, rowCount)}
        onChangeRowsPerPage={(currentRowsperPage, currentPage) => 
            onChangeRowsPerPage(currentRowsperPage, currentPage)}
      />
    </>
  );
}

您可以创建自己的分页组件或重复使用库提供的分页组件。