JSFiddle - React, Tailwind, and code Playground

by Akash Sharma

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<title>Student Details</title>
<table id="jq-datatables" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Marks</th>
      <th>Marks Percentage</th>    
      <th>Fees</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>0</td>
      <td>0%</td>
      <td>10,00</td>
    </tr>

    <tr>
      <td>B</td>
      <td>20</td>
      <td>20%</td>
      <td>100,00</td>
    </tr>
    <tr>
      <td>C</td>
      <td>0</td>
      <td>0%</td>
      <td>20,00</td>
    </tr>
    <tr>
      <td>D</td>
      <td>10</td>
      <td>10%</td>
      <td>10,00</td>
    </tr>                                 

  </tbody>
</table>

JavaScript

$(document).ready(function() {
    $('#jq-datatables').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel'
        ]
    } );
} );