JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/t/dt/dt-1.10.11,r-2.0.2/datatables.min.css">
<script src="https://cdn.datatables.net/t/dt/dt-1.10.11,r-2.0.2/datatables.min.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>
            <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>
       ...

CSS

div.content-custom {
    margin:1em;
    padding:1em;
    height:5em;
    background-color:#FEE;
    color:#900;
    border:1px solid #900;
    border-radius:4px;
    text-align:center;
    line-height:5em;
}

JavaScript

var table = $('#example').DataTable({
    "responsive": {
        "details": {
            "renderer": function ( api, rowIdx, columns ) {
                // Show hidden columns in row details
                var data = $.map( columns, function ( col, i ) {
                    return col.hidden 
                       ? '<tr><td>'+col.title+':</td> '+
                         '<td>'+col.data+'</td></tr>' 
                       : '';
                 } ).join('');
                
                // Extra: Show "Name" in row details
                data += '<tr><td>Name:</td><td>' + api.cell(rowIdx, 0).data() + '</td></tr>';
                // Generate a table
                data = $('<table width="100%"/>').append( data ).prop('outerHTML');
                
                // Extra: Show custom content
                data += '<div class="content-custom">Custom content</div>';
                
                return data;
            }
        }
    }
});