JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Jenette Caldwell</td>
</tr>
<tr>
<td>Çetin Berry</td>
</tr>
<tr>
<td>Caesar Vance</td>
</tr>
<tr>
<td>Doris Wilder</td>
</tr>
<tr>
<td>Angelica Ramos</td>
</tr>
<tr>
<td>Şakir Ahmet</td>
</tr>
<tr>
<td>Jennifer Chang</td>
</tr>
<tr>
<td>İsmail Wagner</td>
</tr>
<tr>
<td>Fiona Green</td>
</tr>
<tr>
<td>Shou Itou</td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function() {
$('#example').DataTable({
'aoColumns' : [
{'sType' : 'turkish'}
],
initComplete: function() {
this.api().columns().every(function() {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
});
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"turkish-pre": function(a) {
var special_letters = {
"C": "Ca",
"c": "ca",
"Ç": "Cb",
"ç": "cb",
"G": "Ga",
"g": "ga",
"Ğ": "Gb",
"ğ": "gb",
"I": "Ia",
"ı": "ia",
"İ": "Ib",
"i": "ib",
"O": "Oa",
"o": "oa",
"Ö": "Ob",
"ö": "ob",
"S": "Sa",
"s": "sa",
"Ş": "Sb",
"ş": "sb",
"U": "Ua",
"u": "ua",
"Ü": "Ub",
"ü": "ub"
};
for (var val in special_letters)
a = a.split(val).join(special_letters[val]).toLowerCase();
return a;
},
"turkish-asc": function(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"turkish-desc": function(a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});