JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.4/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.7/sb-1.3.4/sp-2.0.2/sl-1.4.0/sr-1.1.1/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.4/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.7/sb-1.3.4/sp-2.0.2/sl-1.4.0/sr-1.1.1/datatables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle</td>
               ...

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Bfrtip',
        columns: [
            { data: 'name' },
            { data: 'surname' },
            { data: 'position' },
            { data: 'office' },
            { data: 'salary' }
        ],
        buttons: [
        					{
                    text: 'Hide duplicates',
                    attr: {
                      id: "btnDuplicate",
                      'data-duplicate': 'true'
                  },
               		action: function (row, data, index) {
                  var button = $('#btnDuplicate');
                  if (button.data('duplicate') === true) {
                    var office = [];
                    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex, row, idx) {
                    	// Reset the office array for each draw
                      if (idx === 0) {
                      	office = [];
                      }
                      //console.log("data: " + data[2]);
                      if (office.indexOf(data[3]) == -1) {
                        office.push(data[3]);
                        return true;
                      }

                      return false;
                    });
                    table.draw();
                    button.data('duplicate', false);
                    button.text("Show duplicates");
                    $('.dataTables_filter').css("visibility", 'hidden');
                  } else {
                    $.fn.dataTable.ext.search.pop();
                    table.draw();
                    button.data('duplicate', true);
                    button.text("Hide duplicates");
                    /*$('.dataTables_filter').css("visibility", 'visible');*/
                  }
                }
            }],
    } );
} );