How to add to array in row.add().draw() on new table?

flor85

I generate my first table ('sourceTable') by selecting an option from a dropdown menu. I have a copyRow function that copies the data from the generated table and draws it into a 'workTable' on click. It works great, but I want to change it up. On click, I wish for it to copy the data, but add a column 0 with the value being the selected dropdown menu option text. Can I do a columnDef on a row.add().draw() so it'll paste it into the work table column 0 followed by the copied data on click? Where would I begin?

I have a feeling I'm thinking about this in the wrong way, but need guidance. Maybe the easiest option is just to include a column in sourceTable so the draw automatically includes it. I wanted it to be easier on the eye by not including it at first.

function copyRow(){
     var sourceTable = $('#jtcTable').dataTable();
     var workTable = $('#workTable').dataTable();

     $('#jtcTable tbody').on( 'click', 'tr', function () {

        var getData = sourceTable.api().row(this).data();
        workTable.api().row.add(getData).draw();
    }); 
}

//working table
var secondTable = $('#workTable').dataTable({
    "searching":false,
    "lengthChange": false,
    "bInfo" : false,
    "bPaginate": false,
    "autoWidth": false,
    "columnDefs": [ {
        "targets": -1,
        "data": null,
        "className": 'dt-body-center',
        "defaultContent": '<input type="image" class="remove-row" src="images/delete-icon.png" title="DELETE"/>'
    },{
        "targets": 0,
        "data": null,
        "className": 'dt-body-center',
    }],
     "dom": 'Bfrtip',
     "buttons": [
     {
        extend:    'copyHtml5',
        text:      '<img class="btn-icons" src="images/copy-icon.png"></i>',
        titleAttr: 'Copy'
    },{
        extend:    'csvHtml5',
        text:      '<img class="btn-icons" src="images/csv-icon.png"></i>',
        titleAttr: 'CSV'
    },{
        extend:    'print',
        text:      '<img class="btn-icons" src="images/print-icon.png"></i>',
        titleAttr: 'PRINT'
    },{
        extend:    'pdfHtml5',
        text:      '<img class="btn-icons" src="images/pdf-icon.png"></i>',
        titleAttr: 'PDF'
    }]  
  });

allan

To confirm, the second table has one extra column? If so, then you could do:

getData.unshift(null);

before calling row.add(). That will stick a null in as the first element in the array and shift the existing elements up. DataTables will see that null and use your columns.defaultContent for that column.

Allan