Datatables JavaScript single column row and details on three separate columns

Dana

I have a datatable that has detail rows and I'm trying to display each row as a single column and the detail table when expanded to be on three separate rows:

function dataFormat(d) {
var result = '';
var hasChildren = false;
for (i = 0; i < d.length; i++) {
    result +=
        '<tr>' +
        '<td></td>' +
        '<td style="font-weight: ' + (d[i].Col0 == "WORKED" ? 'bold' : '') + '">' + d[i].Col0 + '</td>' +
        '<td>' + d[i].Col1 + '</td>' +
        '<td>' + d[i].Col2 + '</td>' +
        '</tr>';
    hasChildren = true;
}

if (!hasChildren)
    result += '<tr><td>There are no items in this view.</td></tr>';

return $(result);
}

function ProcessTableDetailV2(id, tableData) {
if (!$.fn.dataTable.isDataTable('#data_table_' + id)) {
    $('#data_table_' + id).DataTable({
        data: tableData,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excelHtml5', 'pdfHtml5', 'print'
        ],
        columns: [
            {
                "class": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            { data: "Col0" },
            { data: "Col1" },
            { data: "Col2" }
        ],
        ordering: false,
        "scrollY": "400px",
        "paging": false,
        "searching": false,
        "info": false,
        'responsive': true,
        "language": {
            "emptyTable": "No Data"
        },
        "createdRow": function (row, data, index) {
            if (data.Col0 === " " && data.Col1 === " " && data.Col2 === " ")
                $('td', row).eq(0).removeClass('details-control');
        },
        "render": function (data, type, full, meta) {
            return full["Col0"] + "" + full["Col1"] + "" + full["Col2"];
        },
        "initComplete": function () {
            $('.dataTables_scrollBody thead tr').addClass('hidden');
            $('.dataTables_scrollBody thead th').addClass('hidden');
            $('.dataTables_scrollBody tfoot tr').addClass('hidden');
            $(".dataTables_scrollBody th").removeAttr('class');
            $('.dataTables_scrollBody table thead').addClass('hidden');
            $('.dataTables_wrapper table tfoot').addClass('hidden');
        }
    });

    $('#data_table_' + id).DataTable().columns.adjust();

    $('#data_table_' + id).on('click', 'td.details-control', function () {
        var tr = $(this).parents('tr');
        var table = $('#data_table_' + id).DataTable();
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('details');
        }
        else {

            // Open this row
            row.child(dataFormat(row.data().detail)).show();
            tr.addClass('details');
        }
    });

    $('#data_table_' + id).DataTable().$('tr', { "filter": "applied" }).addClass('odd');
}
}

My problem is that without being expanded (no details visible) the row info is displayed as a single column, but when the details are visible, the first detail column seems to be the exact same size as the parent (parent being a very long string) and the other columns from detail are very small. Is there a way to make the parent row column structure kind of independent of its child (detail rows) so that the three column details arrange nice and the parent remains as a single column?

colin

Hi @Dana ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Dana

Hi @colin,

I've added a fiddle for it: https://jsfiddle.net/6jhyLw05/1/

Have a nice day,
Dana

colin

Hi @Dana ,

Gotcha, thanks for that example. The dataFormat() can return anything, so it doesn't have to be rows in the same table. For example, if you add a <table> tag around the those added lines, then the columns take their own spacing as in this example here.

Hope that helps,

Cheers,

Colin

Dana

@colin Thanks a lot for your answer! You saved my day!