JSFiddle - React, Tailwind, and code Playground

by samu_eyes

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>
<div style="margin: 20px;">

    <table id="example" style="width:150%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
        </tbody>
    </table>

</div>

JavaScript

var table = $('#example').DataTable( {
 "scrollX": true,
    "fixedColumns": true
  } );
/* 
  table.rows().every( function () {
    var rowNode = this.node();
    var rowIndex = this.index();
    $(rowNode).attr( 'data-dt-row', rowIndex );
  } ); */

  $('tr').hover(function () {
    var thisNode = $( this );
    var rowIdx = thisNode.attr( 'data-dt-row' );
    console.log( rowIdx );
    $( "tr" ).css("background-color", "white");
    $( "tr[data-dt-row='" + rowIdx + "']" ).css("background-color", "yellow");
  });
$(document).ready(function() {
} );