Trying to do something like this, populate with children but have details open by default:
https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

The child rows will populate and the details-control will open/close, but it set to close by default. Oddly enough, when I shrink the window, the contents of the main table will spill over into a second child row, which WILL be open on refreshing the page, but not include the details coded for. When clicking the details control, the second child disappears, clicking again, the child row that was coded for appears.

Here is the code:

    function format ( data ) {
    // `d` is the original data object for the row
    return '<!--table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"-->'+
        '<tr>'+
            '<td>slab 1 temp:</td>'+
            '<td>'+data[3]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>slab 2 temp:</td>'+
            '<td>'+data[4]+'</td>'+
        '</tr>'+
    '<!--/table-->';

    };

    var dataTable = $('#latest_readings').DataTable({
        "retrieve": true,
        "paging":true,
        "processing":true,
        "serverSide":true,
        "scrollCollapse": true,
        responsive: {
            details: {
                display: DataTable.Responsive.display.childRowImmediate,
                target: '',
                type: 'none'
            }
            },
        //"order": [],
        "info":true,
        "ajax":{
            url:"fetch_readings.php",
            type:"POST"
               },
        "columnDefs":[
                {
                "targets":[0,1,2,3,4,5,6,7,9,10,11,12],
                "orderable":false,
                 },
                ],    
                //"order": [[1, 'asc']],
    "columns": [
            {
                "class":          'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            }],
        });

        // Add event listener for opening and closing details
        $('#latest_readings').on('click', 'td.details-control', function () {
        var tr = $(this).parents('tr');
        var row = dataTable.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

And the HTML for the table:

                <table  id="latest_readings" class="display table table-striped">
                    <thead>
                        <tr class="table-primary">
                            <th>ID</th>   
                            <th>Created At</th>
                            <th>Made By</th>         
                            <th>MB1</th> 
                            <th>MB2</th> 
                            <th>Hot Brine</th>   
                            <th>Cold Brine</th>   
                            <th>Active</th>   
                            <th>Suction</th>  
                            <th>Discharge</th>     
                            <th>Oil Pressure</th>
                            <th>Oil Temperature</th>
                            <th>Water Temperature</th>                            
                        </tr>  
                    </thead>
                </table>

Any ideas? I've been fiddling around for hours, looking at all the examples and questions around responsive and childRowImmediate and can't seem to find any answers. I also have the correct libraries loaded and there are no errors in the debugger.

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">
....
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!--script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.2/js/responsive.dataTables.js"></script>