how to combine multiple json data into single columns in jquery datatables?

I am getting this JSON response from to back-end.

{
  "data": [
    {
      "id": 6,
      "firstname": "fname",
      "middlename": "mname",
      "lastname": "lname",
    },
    ...
  ]
}

Creating table from the JSON response using jquery datatable using ajax request.

$number = 1;
$("#people-table").DataTable({
    ajax: {
        url: window.location.href + '/fetchdata',
        method: "GET",
        dataType: "json",
        dataSrc: "data"
    },
    columns: [
        {
            render: function () {
                return $number++;
            }
        },
        { data: 'firstname' },
        { data: 'middlename' },
        { data: 'lastname' },
    ]
});

<table>
  <thead>
     <tr>
        <th>No.</th>
        <th>Profile</th>
        <th>Firstname</th>
        <th>Middlename</th>
        <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
      {{-- data --}}
  </tbody>
</table>

I am getting proper output for this code in the html table, but now I want to combine all three field firstname, middlename, and lastname into one field called fullname using jquery datatable