title: How to transpose a jQuery Datatable structure?
body: <p>I have a datatable that is editable, and each row has a "child" datatable.</p>
  
  <p>The problem is that the child datatable has so many fields, and I would like to transpose it to have a vertical orientation. </p>
  
  <p>Meaning that the field headers are rows and the table data show as columns...</p>
  
  <p>Please note that each child table has only one row of data, so the resulting transposed data table should consist of 2 columns, one for headers and the other for the data...</p>
  
  <p>Also note that I have disabled pagination, filters and sorting for the child datatable, but I have initialized it to be support inline editing...</p>
  
  <p>It is of the following structure:</p>
  
  <pre><code> $('#myDataTable tbody').on('click', 'tr.group + tr td.details-control', function () {
              //console.log($(this).closest('tr'));
              var tr = $(this).closest('tr');
              var row = table.row(tr);
              //console.log(table.row(tr).data());
              if (row.child.isShown())
              {
                  // This row is already open - close it
                  row.child.hide();
                  tr.removeClass('shown');
              }
              else {
                  // Open this row
                  row.child(format(row.data())).show();
                  tr.addClass('shown');
                var batata=  $('#myDataTablex').DataTable({
                      "info":false,
                      "bFilter": false,
                      "bSort": false,
                      "bPaginate":false
  
                });
  
                $('#myDataTablex').dataTable().makeEditable({
  
                    "aoColumns": [
                   ......columnByColumnDefinitions here...]
                });
              }
          });
  
      });
  </code></pre>