How can i add style from added row in table

bubbles25

I have a button and a table, when the button is pressed it added row from the table, however the added row is not aligned from the first (default) row

 <div class="row">
     <div class="mb-2">
         <div style="overflow-x: auto;">
             <table class="table table-borderless table-centered mb-0 table-striped" id="lv_Lead_Contact_Information-datatable" style="width: 100%">
                 <thead class="table-light text-center">
                     <tr style="font-size: 12px;  font-weight: bold;">
              <th>Primary Contact</th>
                 </tr>
         </thead>
         <tbody>
               <tr class='cart-item order clickable-row text-center'>
                <td style="text-align:center">
                        <input type="checkbox" id="chkContact_PrimaryContact" class="primary-contact-checkbox">
                </td>   
               </tr>    
        </tbody>
        <tfoot class="table-light text-center">
                <tr style="font-size: 12px; font-weight: bold;">
                    <th>Primary Contact</th>
                        </tr>
                </tfoot>
             </table>
        </div>
    </div>
</div>  


<script>
 $(document).ready(function () {
     var table = $('#lv_Lead_Contact_Information-datatable').DataTable({
         dom: "t",
         "ordering": false
     });

  $(document).on('click', '#btn_LeadProfile_Add_Contact', function () {
    var salutationDropdownHtml = $('#salutationDropdownHtml').val();

    var newRow = table.row.add([
        '<input type="checkbox" class="primary-contact-checkbox">'
    ]).draw()
 });
});
</script>

My goal is align center also the added checkbox from the row
i try added <td></td> in table.row.add but it didnt work.

allan

Can you link to a test case showing the issue please. That would help me debug it.

It looks like you have text-align: centre as a style in the HTML for the checkbox cell, but that isn't the case for the Javascript added row. Try adding this to your DataTables configuration object:

columnDefs: [
  {
    target: 0,
    className: 'dt-body-center'
   }
]

That will center align the cells for the first column in the table.

Allan