Reactjs datatable component footer sum of column

Question

Reactjs datatable component footer sum of column This my code and i want to add footer in datatable in which i have to show all columns sum. i have used react-data-table-component package for this please provide me with solution. install this component 'npm install react-data-table-component'. i want to use datatable only not react table

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;

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community
– Community Bot, Commented Jul 26, 2023 at 2:36

petep · Accepted Answer · 2023-12-15 22:44:23Z

I looked in to solving this issue. Seems like there was a PR to add this feature but was not approved by the author of the package. I agree this would be a great feature and would love to see it added to the library.

My solution was to make a custom pagination component and add a footer to it. I just wrapped the out-of-the-box Pagination component in a wrapper component.

<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}
         />        
        )
       }
  />

Wrapper component: Just pass the data you want displayed in the footer as a prop of the wrapper.

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)}
      />
    </>
  );
}

You can create your own pagination component or reuse the one supplied with the library.

Bidan · Accepted Answer · 2024-07-22 04:20:06Z

Had same issue and my solution was to have function that finds the the totals summary for individual columns and return values matching property names similar to the data on the endpoint then pass the row data tot the datatable

const footer = (data) => {
  const scholarship_amount = data.reduce((acc, row) => acc + row.scholarship_amount, 0);

  return {
    service_name: "Totals",
    scholarship_amount: scholarship_amount,
    // Add other columns and their totals here
  };
};

const footerData = footer(data);


const customStyles = {
  rows: {
    style: (row) => {
     return row.isFooter ? { fontWeight: 'bold', backgroundColor: 
   '#f8f8f8' } : {};
    },
  },
};
     const columnsData = [...data, { ...footerData, isFooter: true }];
const App = () => (
  <DataTable
    columns={columns}
    data={columnsData}
    customStyles={customStyles}
  />

Collectives™ on Stack Overflow

Reactjs datatable component footer sum of column

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related