JSFiddle - React, Tailwind, and code Playground

by Vatsal Mewada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4/jquery.dataTables.yadcf.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/vedmack/yadcf/master/dist/jquery.dataTables.yadcf.css">

<table id="myTable">
  <thead>
    <tr>
      <th>xyz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span>
          <span>abc</span>
          <span style="display: none;">fgd abc wew</span>
        </span>  
      </td>
    </tr>
    <tr>
      <td>
        <span>
          <span>wew</span>
          <span style="display: none;">fgd abc wew</span>
        </span>  
      </td>
    </tr>
  </tbody>
</table>

JavaScript

$(document).ready( function () {
    let dataTable = $('#myTable').DataTable();
    yadcf.init(dataTable, [{
    		column_number: 0,
      	filter_type: 'multi_select',
        select_type: 'select2',
        column_data_type: 'html',
        html_data_type: 'selector',
        html_data_selector: 'span:eq(0)',
    }], )
    
} 

);