JSFiddle - React, Tailwind, and code Playground

by lakshmipriya001

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th class='no-sort'>Name</th>
      <th class='no-sort'>Location</th>
      <th class='no-sort'>Experience</th>
      <th class='no-sort'>Action</th>
    </tr>
  </thead>
  <tbody>

    <tr class="parent">
      <td>
        aaa
      </td>
      <td>
        bbb
      </td>
      <td>
        cccc
      </td>
      <td>
        <button id='1' class="show-btn rd-details det">
            DETAILS
          </button>
      </td>
    </tr>
    <tr id='tr1' class="cchild">
      <td>
        eee
      </td>
      <td>
        fff
      </td>
      <td>
        ggg
      </td>
      <td>
        hhh
      </td>
    </tr>

    <tr class="parent">
      <td>
        xxx
      </td>
      <td>
        bbb
      </td>
      <td>
        cccc
      </td>
      <td>
        <button id='2' class="show-btn rd-details det">
            DETAILS
          </button>
      </td>
    </tr>

    <tr id='tr2' class="cchild">
      <td>
        jj
      </td>
      <td>
        kk
      </td>
      <td>
        lll
      </td>
      <td>
        mmm
      </td>
    </tr>

  </tbody>
</table>

JavaScript

$(document).ready(function() {
   $('#example').DataTable();
  
 });