title: How can I select cells in Datatables .net5 web app and display the same formatting as is displayed on the default
body: <p>I'm building a web app in dotnet 5, following the Pluralsight course by Scott Allen.</p>
  <p>(here's a link to the related page by Scott <a href="https://github.com/OdeToCode/OdeToFood/blob/master/OdeToFood/OdeToFood/Pages/Restaurants/ClientRestaurants.cshtml" rel="nofollow noreferrer">https://github.com/OdeToCode/OdeToFood/blob/master/OdeToFood/OdeToFood/Pages/Restaurants/ClientRestaurants.cshtml</a>
  )</p>
  <p>Following is a code snippet. I've replaced the references to bootstrap, jquery and Datatables with the CDN at the same version
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /&gt;
      
      &lt;link rel="stylesheet" href="/css/site.css" /&gt;
  
      &lt;script
    src="http://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"&gt;&lt;/script&gt;
      
      &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" /&gt;
      &lt;script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  
          &lt;script&gt;
              $.ajax("/api/people/",
              { method: "get"})
              .then(function (response){
                  $("#donations").DataTable({
                      data: response,
                      columns: [
                      { "data": "recId", title: "Id"},
                      { "data": "personName", title: "Name"},
                      { "data": "personAddress", title: "Address"},
                      { "data": "personCity", title: "City"},
                      { "data": "personProvince", title: "Province"}
                      ],
                      buttons: ['csv', 'excel']
                  });
              });
          
  
          &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
              
      &lt;h2&gt;Records&lt;/h2&gt;
  
      &lt;table class="table" id="mytable"&gt;
  
      &lt;/table&gt;
  
  &lt;body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The API returns rows, the DataTable populates, but I am not able to select rows or cells. I want to be able to click a row and navigate to a detail page for the record. What do I need to change to take advantage of the additional interactivity and formatting?</p>
  <p>Mine:
  <a href="https://i.stack.imgur.com/cCUNH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cCUNH.png" alt="enter image description here" /></a></p>
  <p>Datatables Example:
  <a href="https://i.stack.imgur.com/x0t5q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x0t5q.png" alt="enter image description here" /></a></p>