Can't get Datatables row group working with ajax

Question

I am trying to group rows in my table based on date ranges using the first column's data("Due_Date") and using the rowGroup extension from Datatables. I have searched and tried solutions from others such as using the data property('Due_Date') vs. the index of an array([0]) and removed buttons from table to prevent conflicts. I believe the versions of jQuery, Datatables, and rowGroup extensions are correct. I actually need the table to be split into three groups(red, yellow, and green) based on the table legend.(If "Due_Date" is before, current date, the current date, or 1 or 2 days after the current date, the group = red group. 3-4 days after current date = yellow group, and 5 or more days after current date = green group.) I realize I don't have the correct logic for the grouped date ranges but as of now I can't get the table to group by the data property at all. The table displays data but it seems as if the grouping is being ignored? Apologies in advance, I'm new to this and not sure where I'm going wrong. Any help is appreciated. Here is my relevant code:

//html

<table class="table table-striped" id="circuitsDueTable">
     <caption style="caption-side:top">
          <ul>
               <li><span style="background-color:#ff3333;font-weight:bolder">RED</span> = Current 
                    Date: Plus Two Days</li>
               <li><span style="background-color:#ffff4d;font-weight:bolder">YELLOW</span> = 
                    Pending: Three to Four Days</li>
               <li><span style="background-color:#4dff4d;font-weight:bolder">GREEN</span> = Have 
                    Time: Five or More Days</li>
          </ul>
     </caption>
     <thead>
          <tr>
               <th>OCV DUE DATE</th>
               <th>CIRCUIT NAME</th>
               <th>OCV</th>
               <th>CIRCUIT VIEW</th>
          </tr>
     </thead>
     <tbody id="circuitsDueTableBody"></tbody>
     <tfoot></tfoot>
</table>

//javascript/jquery

function getTable() {
    $.ajax({
        url: baseUrl + "VoltReading/GetOCVDue",
        method: "POST",
        dataType: "json",
        success: function(data) {

            if (circuitsDueTable) {
                circuitsDueTable.destroy();
            }

            circuitsDueTable = $("#circuitsDueTable").DataTable({
                data: data,
                order: [
                    [0, "asc"]
                ],
                rowGroup: {
                    dataSrc: "Due_Date"
                },
                columns: [{
                        data: 'Due_Date'
                    },
                    {
                        data: 'Circuit_Num'
                    },
                    {
                        data: 'Stage_Num'
                    },
                    {
                        render: function(data, type, row) {
                            return '<button class="btn btn-success btn-xs viewCircuitBtn" 
                                 value="' + row.Circuit_Id + '">View Circuit</button></a>';
                        }
                    }
                ],
                //return moment(row.Due_Date).format();
            });
        }
    });
}
getTable()

//php controller

public function GetOCVDue()
{
    $ocvsDue = $this->ocv->SelectCircuitOCVDates();
    echo json_encode($ocvsDue);
}

//json data

[
{"Circuit_Id":"89","Circuit_Num":"090622002C","Due_Date":"2022-09-10","Stage_Num":"1"},
{"Circuit_Id":"90","Circuit_Num":"0909221B","Due_Date":"2022-09-13","Stage_Num":"1"},
{"Circuit_Id":"89","Circuit_Num":"090622002C","Due_Date":"2022-09-14","Stage_Num":"2"},
{"Circuit_Id":"90","Circuit_Num":"0909221B","Due_Date":"2022-09-17","Stage_Num":"2"},
{"Circuit_Id":"88","Circuit_Num":"090622001B","Due_Date":"2022-09-22","Stage_Num":"3"},
{"Circuit_Id":"89","Circuit_Num":"090622002C","Due_Date":"2022-09-22","Stage_Num":"3"},
{"Circuit_Id":"90","Circuit_Num":"0909221B","Due_Date":"2022-09-25","Stage_Num":"3"}
]

Answer 1

Here is a basic approach - I say "basic" because it does not use a library such as Moment or the newer Luxon - but only the built-in Date object:

var today = new Date();
var redDate = today.setDate(today.getDate() + 2);
var yellowDate = today.setDate(today.getDate() + 4);

I use the above dates to calculate a status color for each record, and I add that status value to the JSON results returned from the URL.

Then, I use the rowGroup.dataSrc option to base its grouping on this newly calculated status color:

rowGroup: {
    dataSrc: "status"
}

The full JavaScript is as follows:

$(document).ready(function() {

function getTable() {
    $.ajax({
        url: "YOUR URL GOES HERE", // I used my own test URL
        method: "POST",
        dataType: "json",
        success: function(data) {

            if (circuitsDueTable) {
                //circuitsDueTable.destroy();
            }
            
            var today = new Date();
            var redDate = today.setDate(today.getDate() + 2);
            var yellowDate = today.setDate(today.getDate() + 4);
                
            

            data.forEach(function(row) {
                var date = Date.parse(row.Due_Date);
                var color = 'green'; // default for 5 or more days
                
                if ( date <= redDate ) {
                    color = 'red';
                } else if ( date <= yellowDate ){ 
                    color = 'yellow';
                }
                row['status'] = color; // add color to row
            });

            circuitsDueTable = $("#circuitsDueTable").DataTable({
                data: data,
                order: [
                    [0, "asc"]
                ],
                rowGroup: {
                    dataSrc: "status"
                },
                columns: [{
                        data: 'Due_Date'
                    },
                    {
                        data: 'Circuit_Num'
                    },
                    {
                        data: 'Stage_Num'
                    },
                    {
                        render: function(data, type, row) {
                            return '<button class="btn btn-success btn-xs viewCircuitBtn" value="' + row.Circuit_Id + '">View Circuit</button></a>';
                        }
                    }
                ],
                //return moment(row.Due_Date).format();
            });
        }
    });
}
getTable()

} );

And the resulting table looks like this: