JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th>District</th>
      <th>Program</th>
      <th>Gender</th>
      <th>YOA</th>
      <th>E-Mail</th>
    </tr>
  </thead>
  <tbody>
    <tr data-link="https://www.google.com?q=1" data-target="_BLANK">
      <td>
        District 1
      </td>
      <td>
        Program 1
      </td>
      <td>
        Gender 1
      </td>
      <td>
        YOA 1
      </td>
      <td>
        Email 1
      </td>
    </tr>
    <tr data-link="https://www.google.com?q=2" data-target="_BLANK">
      <td>
        District 2
      </td>
      <td>
        Program 2
      </td>
      <td>
        Gender 2
      </td>
      <td>
        YOA 2
      </td>
      <td>
        Email 2
      </td>
    </tr>
    <tr data-link="https://www.google.com?q=3" data-target="_BLANK">
      <td>
        District 3
      </td>
      <td>
        Program 3
      </td>
      <td>
        Gender 3
      </td>
      <td>
        YOA 3
      </td>
      <td>
        Email 3
      </td>
    </tr>
  </tbody>
</table>

CSS

table tr {
  cursor: pointer;
}

JavaScript

$(function() {
  $("table tbody tr").click(function(e) {
    var u = $(this).data("link");
    var t = $(this).data("target");
    console.log(u, t);
    if (t.length) {
      window.open(u, t);
    } else {
      window.location.href = u;
    }
  });
});