JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="https://rawgit.com/vedmack/yadcf/master/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vedmack/yadcf/master/jquery.dataTables.yadcf.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<title>yadcf - Yet Another DataTables Column Filter</title>
</head>
 <body id="yadcf_example">
    <div id="container">

      <h1>Yet Another DataTables Column Filter - (yadcf) example</h1>
      <div id="external_filter_container_wrapper">
        <label>External filter for "Numbers" column :</label>
        <div id="external_filter_container"></div>
      </div>
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	        <thead>
	          <tr>
	            <th>Genere</th>
				<th>#</th>
	            <th>Nome</th>
	            <th>Descrizione</th>
	            <th>Anno</th>
	            <th>Tags</th>
	          </tr>
	        </thead>
	        <tbody>
	          
	        

<tr class="odd gradeA"><td>Musica, film</td><td>A</td><td>Andrea Chenier (1970)</td><td class="r1">Fausto Cleva, Placido Domingo</td><td>1987</td><td class="r2"><span class="label lightblue">Opera</span><span class="label lightblue">Giordano</span></td></tr>
<tr class="odd gradeA"><td>Film</td><td>B</td><td>Bndrea Chenier (1970)</td><td class="r1">Fausto Cleva, Placido...

CSS

.label {
  padding: 0px 5px 0px 5px;
	border: 1px solid black;
	-moz-border-radius: 1em; /* for mozilla-based browsers */
	-webkit-border-radius: 1em; /* for webkit-based browsers */
	border-radius: 1em; /* theoretically for *all* browsers*/
}

.label2 {
  padding: 0px 5px 0px 5px;
	
	-moz-border-radius: 1em; /* for mozilla-based browsers */
	-webkit-border-radius: 1em; /* for webkit-based browsers */
	border-radius: 1em; /* theoretically for *all* browsers*/
}


.label4 {
  padding: 0px 5px 0px 5px;
	border: 1px solid black;
	-moz-border-radius: 1em; /* for mozilla-based browsers */
	-webkit-border-radius: 1em; /* for webkit-based browsers */
	border-radius: 1em; /* theoretically for *all* browsers*/
}

.label.lightblue {
	background-color: #99CCFF;
}

.label2.lightblue2 {
	background-color: #FFF;
}

.label4.lightblue4 {
	background-color: pink;
}

#external_filter_container_wrapper {
  margin-bottom: 20px;
}

#external_filter_container {
  display: inline-block;
}

JavaScript

var oTable;
$(document).ready(function () {

'use strict';


    oTable = $('#example').dataTable({
        "bJQueryUI": true,
        "bStateSave": true
    }).yadcf([{

		column_number: 0,
		filter_type: "multi_select",
		select_type: 'select2',
        text_data_delimiter: /(\s-\s)|,/,
    }, {
        column_number: 4,
        filter_type: "range_number_slider",
        filter_container_id: "external_filter_container"
    }, {
        column_number: 3,
        text_data_delimiter: /(\s-\s)|,/,
        filter_type: "auto_complete"
    }, {
        column_number: 1,
		filter_type: "multi_select",
        select_type: 'select2'
    }, {
        column_number: 2,
        text_data_delimiter: /(\s-\s)|,/,
        filter_type: "auto_complete"
    }, {
        column_number: 5,
        column_data_type: "html",
        html_data_type: "text",
        filter_default_label: "Select tag",
		filter_type: "auto_complete"
		
       
    }]);

    $('#example').on('click', ".label.lightblue", function () {
        
        yadcf.exFilterColumn(oTable, [
            [5, $(this).text()]
        ]);

    });

    $('#example').on('click', ".label4.lightblue4", function () {
        
        yadcf.exFilterColumn(oTable, [
            [4, $(this).text()]
        ]);

    });

    $('#example').on('click', ".label2.lightblue2", function () {
        
        yadcf.exFilterColumn(oTable, [
            [3, $(this).text()]
        ]);

    });
});