Problem implementing child rows with expand/collapse

galcott

I am trying to create a table with expand/collapse child rows as in the example on this page: [https://datatables.net/examples/api/row_details.html]

However, when I add the column definition below (copied from the sample) the table doesn't appear and I get error messages. I have also included the CSS in the sample to define the details-control class.

"columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },

This is the error log. What am I missing here?

jquery-3.2.1.min.js:2 jQuery.Deferred exception: Cannot read property 'style' of undefined TypeError: Cannot read property 'style' of undefined
at _fnCalculateColumnWidths (http://galcott.com/uij/jquery.dataTables.js:5603:20)
at _fnInitialise (http://galcott.com/uij/jquery.dataTables.js:4726:4)
at loadedInit (http://galcott.com/uij/jquery.dataTables.js:1320:6)
at HTMLTableElement.<anonymous> (http://galcott.com/uij/jquery.dataTables.js:1332:5)
at Function.each (http://galcott.com/uij/jquery-3.2.1.min.js:2:2715)
at r.fn.init.each (http://galcott.com/uij/jquery-3.2.1.min.js:2:1003)
at r.fn.init.DataTable [as dataTable] (http://galcott.com/uij/jquery.dataTables.js:869:8)
at r.fn.init.$.fn.DataTable (http://galcott.com/uij/jquery.dataTables.js:15172:18)
at HTMLDocument.<anonymous> (http://galcott.com/uij/test.html:30:26)
at j (http://galcott.com/uij/jquery-3.2.1.min.js:2:29999) undefined
jquery-3.2.1.min.js:2 Uncaught TypeError: Cannot read property 'style' of undefined
at _fnCalculateColumnWidths (jquery.dataTables.js:5603)
at _fnInitialise (jquery.dataTables.js:4726)
at loadedInit (jquery.dataTables.js:1320)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1332)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at r.fn.init.$.fn.DataTable (jquery.dataTables.js:15172)
at HTMLDocument.<anonymous> (test.html:30)
at j (jquery-3.2.1.min.js:2)

kthorngren

Did you add a column in your thead for this column? Sounds like you have more columns defined in Datatables than in your header.

Kevin

galcott

No, it turned out that I had to use "columnDefs" instead of "columns". Probably that code was for an older version of DT.