Javascript – Datatables (Row Details): Uncaught TypeError: Cannot read property ‘style’ of undefined

im trying to implement the datatables row details

this is my table that has an id of "user_datas"

<table id="user_datas" class="table table-bordered table-striped" width="100%">
     <thead>
       <tr>
         <th>NAME</th>
         <th>SEX</th>
         <th>BIRTHDATE</th>
         <th>AGE</th>
       </tr>
     </thead>
  </table>

this is the code that comes from the datatable documentation which im trying to implement

function format ( d ) {
    return 'Name: '+d.name+'<br>'+
   'Gender: '+d.sex+'<br>'+
        'The child row can contain any data you wish, including links, images, inner tables etc.';
}

$(document).ready(function() {
    var dataTable = $('#user_datas').DataTable({
      "processing":true,
      "serverSide":true,
      "order":[],
      "ajax":{
        url:"../controller/fetch_senior_citizen.php",
        type:"POST"
      },

      "columns": [
          {
            "class":          "details-control",
            "orderable":      false,
            "data":           null,
            "defaultContent": ""
          },
          { "data": "name" },
          { "data": "sex" },
          { "data": "birthdate" },
          { "data": "age" }
      ],
        "order": [[1, 'asc']]
    });

     // Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#user_datas tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dataTable.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    dataTable.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );                    
});

and this is some of my code from fetch_senior_citizen.php

foreach($result as $row)
{
    $name = clean($row["f_name"])." ".clean($row["m_name"])." ".clean($row["l_name"]);
    $sub_array = array();
    $sub_array["id"] = $row['id'];
    $sub_array["name"] = $name;
    $sub_array["sex"] = strtoupper($row["sex"]);
    $sub_array["birthdate"] = $row["birthdate"];
    $sub_array["age"] = $row["age"];
    $data[] = $sub_array;
}

$output = array(
    "draw"              =>  intval($_POST["draw"]),
    "recordsTotal"      =>  $filtered_rowsz,
    "recordsFiltered"   =>  get_total_all_records4(),
    "data"              =>  $data
);
echo json_encode($output, JSON_PRETTY_PRINT);

the error that im currently facing is Uncaught TypeError: Cannot read property 'style' of undefined but if i remove this code

{
    "class": "details-control",
    "orderable": false,
    "data": null,
    "defaultContent": ""
}

Everythings work fine. But my table doesnt have row details