JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//datatables.net/download/build/nightly/jquery.dataTables.css">
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
  <body>
    <a id="click_all" href="#">Click All</a>
    <div class="container">
      <table id="example" class="display" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Office</th>
            <th>Options</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Office</th>
            <th>Options</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>London</td>
            <td><a href="#" class="link">Link</a></td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Edinburgh</td>
            <td><a href="#" class="link">Link</a></td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>San Francisco</td>
            <td><a href="#" class="link">Link</a></td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Edinburgh</td>
            <td><a href="#" class="link">Link</a></td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>Edinburgh</td>
            <td><a href="#" class="link">Link</a></td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>New York</td>
            <td><a href="#" class="link">Link</a></td>
          </tr>
          <tr>
            <td>Herrod Chandler</td>
            <td>San Francisco</td>
            <td><a href="#" class="link">Link</a></td>
          </tr>
          <tr>
            <td>Rhona Davidson</td>
            <td>Edinburgh</td>
            <td><a href="#" class="link">Link</a></td>
          </tr>
          <tr>
            <td>Colleen Hurst</td>
            <td>San Francisco</td>
            <td><a href="#" class="link">Link</a></td>
     ...

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}


div.container {
  min-width: 980px;
  margin: 0 auto;
}

JavaScript

$(document).ready( function () {
    var table = $('#example').DataTable();
    
    $(document).on('click', '.link', function() {
        $(this).html('CLICKED').removeClass('link');
        return false;
    });
    
    $(document).on('click', '#click_all', function() {
        
        var table = $('#example').dataTable();
        var total_rows = table.fnGetData().length;
        var filtered_rows = table.$('tr', {"filter":"applied"});

        if (total_rows == filtered_rows.length) {
            // click all rows
            $('a.link', table.fnGetNodes()).click();
        } else {
            // only click filtered rows
            console.log(filtered_rows);
            for (var i = 0; i < filtered_rows.length; i++) {
                $(filtered_rows[i]).find('a.link').click();
            };
        }
        return false;
    });
    
});