JSFiddle - React, Tailwind, and code Playground

by BeerusDev

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap4.min.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap4.js"></script>
  </head>
  <body>
  <div class="container">
     <table id="openPositions" class="table table-striped" width="100%">
       <thead>
         <tr>
           <td>Position Title</td>
           <td>Location</td>
           <td>Link to Position</td>
         </tr>
       </thead>
     </table>
     </div>
  </body>
</html>

CSS

div.container {
  width: 50%;
}

JavaScript

var dataSet = [
{
	"Title" : "Example Title",
  "Location" : "Example Location",
  "LinkToPost" : "www.google.com"
},
{
	"Title" : "Example Title1",
  "Location" : "Example Location1",
  "LinkToPost" : "www.google.com"
},
{
	"Title" : "Example Title2",
  "Location" : "Example Location2",
  "LinkToPost" : "www.google.com"
},
{
	"Title" : "Example Title3",
  "Location" : "Example Location3",
  "LinkToPost" : "www.google.com"
},
{
	"Title" : "Example Title4",
  "Location" : "Example Location4",
  "LinkToPost" : "www.google.com"
},
{
	"Title" : "Application Download",
  "Location" : "*Click here to download*",
  "LinkToPost" : "www.google.com"
}
];

$(document).ready(function(){

$('#openPositions').DataTable({
        data: dataSet,
        columns: [
            { data: 'Title',
             render: function (data, type, full, meta) {
              return '<a target="_blank" class="jobPos" href="' + full.LinkToPost + '">' + full.Title + '</a>';
            },
            },
            { data: 'Location',
             render: function (data, type, full, meta, row) {
             if(full.Title == "Applicaiton Download"){
              return '<a class="jobPos" href="' + full.LinkToPost + '">' + full.Location + '</a>';
              }
              else {
              return data;
              }
            },
            },
            { data: 'LinkToPost',
            visible: false}
        ],
        dom: 'Brtp',
    });


})