JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js"></script>
<table id="example" class="responsive2 display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>ID</th>
            <th>Extra 1</th>
            <th>Extra 2</th>
            <th>Extra 3</th>
            <th>Extra 4</th>
            <th>Extra 5</th>
            <th>Extra 6</th>
            <th>Extra 7</th>
            <th>Extra 8</th>
            <th>Extra 9</th>
            <th>Extra 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>2</td>
            <td>Extra td 1</td>
            <td>Extra td 2</td>
            <td>Extra td 3</td>
            <td>Extra td 4</td>
            <td>Extra td 5</td>
            <td>Extra td 6</td>
            <td>Extra td 7</td>
            <td>Extra td 8</td>
            <td>Extra td 9</td>
            <td>Extra td 10</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>1</td>
            <td>Extra td 1</td>
            <td>Extra td 2</td>
            <td>Extra td 3</td>
            <td>Extra td 4</td>
            <td>Extra td 5</td>
            <td>Extra td 6</td>
            <td>Extra td 7</td>
            <td>Extra td 8</td>
            <td>Extra td 9</td>
            <td>Extra td 10</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>4</td>
            <td>Extra td 1</td>
            <td>Extra td 2</td>
            <td>Extra td 3</td>
            <td>Extra td 4</td>
       ...

CSS

td.details-control {
    background: url('../resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../resources/details_close.png') no-repeat center center;
}
div.player {
    width:100%;
    height:5em;
    background-color:#f00;
}

JavaScript

var table = $('#example').DataTable({
    "responsive": {
        "details": {
            "renderer": function ( api, rowIdx ) {
                // Select hidden columns for the given row
                var data = api.cells(rowIdx, ':hidden').eq(0).map(function(cell){
                    var header = $(api.column(cell.column).header());
                    console.log(header.text());
                    
                    if(header.text() === 'Extra 10'){
                        return $("<tr></tr>").append($('<td colspan="2"></td>').html(
                           '<div class="player"></div>'
                        )).prop('outerHTML');
                        
                    } else {
                        return $("<tr></tr>").append($("<td></td>",{
                           "text": header.text()+':'
                        })).append($("<td></td>",{
                           "text": api.cell( cell ).data()
                        })).prop('outerHTML');
                    }
                   
                }).toArray().join('');
                return data ?
                    $('<table width="100%"/>').append( data ).prop('outerHTML') :  false;
            }
        }
    },
    "columns": [
        { "data": "Name" },
        { "data": "Position"},
        { "data": "ID" },
        { "data": "Extra 1" },
        { "data": "Extra 2" },
        { "data": "Extra 3" },
        { "data": "Extra 4" },
        { "data": "Extra 5" },
        { "data": "Extra 6" },
        { "data": "Extra 7" },
        { "data": "Extra 8" },
        { "data": "Extra 9" },
        { "data": "Extra 10", "className": "none" }
    ]
});