JSFiddle - React, Tailwind, and code Playground

by erick

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>ID</th>
            <th>PLAN</th>
            <th>CONFIG</th>
            <th>PHASE</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>1</td>
            <td>1</td>
            <td>1,2</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>2</td>
            <td>2</td>
            <td>1,2</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>3</td>
            <td>3</td>
            <td>1,2</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>4</td>
            <td>4</td>
            <td>1,2</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>
    </tbody>
</table>

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>PLAN:</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;
            }
        }
    }
});