JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<div id="container">
	<table id="example" class="display compact" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Author</th>
                <th>Editor</th>
                <th>Author + Editor</th>
            </tr>
        </thead>
    </table>
</div>

JavaScript

$('#example').dataTable( {
  "ajax": {
    "url": "https://api.myjson.com/bins/vawiz",
    "dataSrc": ""},
    "columns": [
      { "data": "author",
        "defaultContent": null,
        "render": ( data, type, full ) => {
        return $.map( data, function ( d, i ) {
        return d.given +' '+ d.family;
        } ).join( ',<br />' );
        }},
     { "data": "editor",
        "defaultContent": null,
        "render": ( data, type, full ) => {
        return $.map( data, function ( d, i ) {
        return d.given +' '+ d.family;
        } ).join( ',<br />' );
        }},
      {"data": "id",
       "defaultContent": ""}  
     ],
    "columnDefs": [
      {"render": (data, type, full) => {
      	console.log(full);
        return full.author[0].given + '<br />' + full.author[1].given + '<br />' + full.editor[0].given + '<br />';},
        "targets": [2] }
    ] 
});