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_custom_func',
        custom_func: multiSelectCustomFilterFunction,
        select_type: 'select2',
        column_data_type: 'html',
        html_data_type: 'selector',
        html_data_selector: 'span:eq(0)',
    }], );
    function multiSelectCustomFilterFunction(filterVal, columnVal) {
        const item = columnVal.trim().split(/[ \t]{5,}/g)[0]; 
        filterValArray = [];
      	filterVal.forEach(trimmer);
      	function trimmer(value) {
      	  filterValArray.push(value.trim());
      	}
      	return filterValArray.length != 0 ? filterValArray.includes(item.trim()) : true ;
      }
    
} 
);