JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs/jq-3.2.1/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs/jq-3.2.1/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div id="RowSelect" class="row">
    <div class="col-sm-12">
      <div class="btn-group">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select1</button>
          <ul id="Select" class="dropdown-menu">
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select2</button>
          <ul id="Select" class="dropdown-menu">
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="RowSelect" class="row">
    <div class="col-sm-12">
      <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Department</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>IT</td>
            <td>$320,800</td>
          </tr>
          <tr>
            <td>Garrett</td>
            <td>Winters</td>
            <td>Recruiter</td>
      ...

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
    "dom": "<'row'<'col-sm-4'B><'col-sm-4'i><'col-sm-4'f>>" +
				"<'row'<'col-sm-12'tr>>" +
				"<'row'<'col-sm-12'p>>",
    "buttons": [{
      extend: 'collection',
      text: 'Export',
      buttons: [{
        extend: 'copy',
        text: 'Clipboard',
        exportOptions: {
          columns: ':visible'
        }
      }, {
        extend: 'excel',
        text: 'Excel',
        filename: 'Inventory',
        exportOptions: {
          columns: ':visible'
        }
      }, {
        extend: 'csv',
        text: 'CSV',
        filename: 'Inventory',
        exportOptions: {
          columns: ':visible'
        }
      }]
    }, {
      extend: 'collection',
      text: 'Test <span class="glyphicon glyphicon-qrcode"></span>',
      buttons: []
    }],
    "initComplete": function() {
      this.api().column(3).data().unique().sort().each(function(d, j) {
        $('#Select').append('<li><a href="#" class="small" data-value="' + d + '" tabIndex="-1">' + d + '</a></li>');
      });
    }
  });
  
  	$('.dropdown-menu a').on( 'click', function( event ) {
		var	$target = $( event.currentTarget );
		
		if (!$target.attr( 'data-value' )) {
			$('.dropdown-menu>.active').has('a[name="' + $target.attr( 'name' ) + '"]').removeClass("active");
		} else {	
			$target.parent().toggleClass("active")
		};
				
		$( event.target ).blur();
		
		locs = $('.dropdown-menu>.active>a').map(function() {
			return '^' + $.fn.dataTable.util.escapeRegex($(this).attr( 'data-value' )) + '\$';
		}).get().join('|');
		table.column( 3 ).search(locs, true, false).draw();
		return false;
	});
  
});