JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<table id="table1" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
</tr>
</thead>
</table>
JavaScript
$(document).ready(function() {
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Orange",
"position": "Developer",
"salary": "$1,700"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
},
{
"name": "Black Winters",
"position": "Project Engineer",
"salary": "$1,300"
},
{
"name": "Orange",
"position": "Developer",
"salary": "$1,700"
}
];
//find duplicates values
var array = [];
data.forEach(myFunction)
function myFunction(item, index) {
if( array.length == 0)
{
array.push({"name":item.name,"isduplicate" : 0})
}
else
{
if (array.filter(e => e.name === item.name).length == 0)
/* vendors contains the element we're looking for */
{
array.push({"name":item.name,"isduplicate" : 0})
}
else
{
debugger
array = array.filter((e) => e.name !== item.name);
array.push({"name":item.name,"isduplicate" : 1})
}
}
}
$("#table1").DataTable({
data: data,
"createdRow": function ( row, data, index ) {
var dataValue = array.find(x => x.name === data.name);
if ( dataValue.isduplicate == 1 ) {
if(dataValue.name == 'Black Winters')
$(row).css('color','red')
else if(dataValue.name == 'Orange')
$(row).css('color','blue')
}
},
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
},
]
});
});