JSFiddle - React, Tailwind, and code Playground

by Muhammad Mushtaq Sheikh

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<button id="btnSelectedRows">
  Get Selected Rows
</button>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Product Name</th>
      <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Product Unit</th>
      <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Product MRP</th>
      <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Selling Price</th>
      <th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Buying Price</th>
      <th></th>
    </tr>
  </thead>

  <tr id = "C01P01">
    <td>Name 1</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">true</td>
  </tr>
	
	<tr id = "C01P02">
    <td>Name 2</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">true</td>
  </tr>
	
	<tr id = "C01P03">
    <td>Name 3</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">true</td>
  </tr>

	<tr id = "C01P04">
    <td>Name 4</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td tabindex="2">100</td>
    <td tabindex="3">150</td>
    <td class="productStatus">true</td>
  </tr>
  
	<tr id = "C01P05">
    <td>Name 5</td>
    <td>1 Kg</td>
    <td tabindex="1">50</td>
    <td...

JavaScript

var table;
$(document).ready(function() {
  table = $('#example').DataTable({
    columnDefs: [{
      orderable: false,
      className: 'select-checkbox',
      targets: 0
    }, {
      "targets": [2],
      "visible": false,
      "searchable": false
    }],
    select: {
      style: 'os',
      selector: 'td:first-child'
    },
    order: [
      [1, 'asc']
    ]
  });
});

$('#btnSelectedRows').on('click', function() {
  var tblData = table.rows('.selected').data();
  var tmpData;
  $.each(tblData, function(i, val) {
    tmpData = tblData[i];
    alert(tmpData);
  }); 
})