Partner Commissions Report

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Partner Commissions Report</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/rowGroup/1.3.0/js/dataTables.rowGroup.min.jsscript"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
        <!-- DataTables Buttons extension for export options -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/cssbuttons.dataTables.min.css">
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1js/buttons.flash.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libsjszip/3.1.3/jszip.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1js/buttons.html5.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.1js/buttons.print.min.js"></script>
    </head>
<body>
    <table id="partnerReport" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Partner Name</th>
                <th>Created From</th>
                <th>PO #</th>
                <th>Invoice Date</th>
                <th>Invoice #</th>
                <th>Total Cost</th>
                <th>Total Price</th>
                <th>Gross Profit</th>
                <th>Payment Date</th>
                <th>Payment #</th>
                <th>Payment Amount</th>
                <th>Amount Paid</th>
                <th style="color:#036afb;">Commission</th>
                <th>Customer</th>
           ...

CSS

tr.group {
    font-weight: bold;
}
tfoot {
    font-weight: bold;
}
.dataTables_length {
    padding-right: 15px;
}

JavaScript

$(document).ready(function() {
    var table = $('#partnerReport').DataTable({
        "columnDefs": [
            { "visible": false, "targets": 0 }
        ],
        "order": [[ 0, 'asc' ]],
        "displayLength": 50,
        "drawCallback": function (settings) {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;
            var storedIndexArray = [];

            const totalCostColumnIndex = 4;
            const totalPriceColumnIndex = 5;
            const totalGrossColumnIndex = 6;
            const amountPaidColumnIndex = 8;
            const totalCommissionColumnIndex = 9;

            function calculateColumnSum(startIndex, endIndex, columnIndex) {
                var sum = 0;
                for (var i = startIndex; i < endIndex; i++) {
                    var value = $(rows).eq(i).find('td').eq(columnIndex).text();
                    sum += parseFloat(value.replace('$', '').replace(',', '')) || 0;
                }
                return sum;
            }
            const currencyFormatter = new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
            });
            
            api.column(0, { page: 'current' }).data().each(function (group, i) {
                if (last !== group) {
                    storedIndexArray.push(i);
                    $(rows).eq(i).before(
                        '<tr style="cursor: pointer;" class="group">' +
                            '<td colspan="4">' + group + '</td>' +
                            '<td><span class="group-total-cost"></span></td>' +
                            '<td><span class="group-total-price"></span></td>' +
                            '<td><span class="group-total-gross"></span></td>' +
                            '<td colspan="3"></td>' +
                            '<td><span class="group-amount-paid"></span></td>' +
                            '<td><span...