JSFiddle - React, Tailwind, and code Playground

by Shahzad Mirza

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<body>
<table id="vtable" class="table cell-border dataTable">
    <thead>
           <tr>
               <td>Name</td>
               <td>Description</td>
           </tr>
    </thead>
    <tbody>
    <tr>
    <td>Warranty</td>
    <td>Duration of the warranty is as per the contracted period.</td>
</tr>
<tr>
    <td>Payment Terms</td>
    <td>100% on confirmation</td>
</tr>
<tr>
    <td>Delivery Schedule</td>
     <td>3 working days </td>
</tr>
<tr>
    <td>Communication</td>
    <td>Standard charges apply</td>
</tr>
<tr>
    <td>Hosting &amp; Maintenance</td>
    <td>Service charges.</td>
</tr>
<tr>
    <td>Removal &amp; Re-installation</td>
    <td>Removal &amp; Re-installation (Same Time)</td>
</tr>
   </tbody>
   <tfoot>
          <tr>                                    
              <td>Name</td>
              <td>Description</td>
          </tr>
    </tfoot>
</table>
</body>

JavaScript

$(document).ready(function () {
var otable;
    otable = $('#vtable').DataTable({
    		"dom": '<"top"lBf<"clear">>rt<"bottom"ip<"clear">>',
    		buttons: [{
                   text: 'Raw',
                   action: function (e, dt, node, config) {
                            RawData();
                   }
                 },
                 {
                   text: 'Stringfy',
                   action: function (e, dt, node, config) {
                            StringfyData();
                   }
                 }],
    });   
    
    function RawData(){
    		var dataRows = otable.rows().data();
        var dataLength = dataRows.length;
    		var TermsData = [];
    		for (var i = 0; i < dataLength; i++) {
        TermsData.push({
                         Name: dataRows.cell(i, 0).data(),
                         Description: dataRows.cell(i, 1).data(),
                       });
    	}
      console.log(TermsData);
    }
    
function StringfyData(){
    		var dataRows = otable.rows().data();
        var dataLength = dataRows.length;
    		var TermsData = [];
    		for (var i = 0; i < dataLength; i++) {
        TermsData.push({
                         Name: dataRows.cell(i, 0).data(),
                         Description: dataRows.cell(i, 1).data(),
                       });
    	}
      console.log(JSON.stringify(TermsData));
    }

});