Highlight duplicate values in table column

App Development
1

I have a Table on a Page with a Column for Name, among various other columns. I need Name duplicates to be highlighted when the Table renders. How do I highlight or find duplicates in this column using javascript or pipe or any other way. Something like the Excel Conditional Formatting feature, which highlights duplicates in the selected column by formatting those cells that contain duplicate values, with a different background color.

Any other solution to quickly know if a table column has duplicates, would be appreciated.

Thanks in advance.

2

We have some JavaScript in our snippets to solve this.

I will upload the code here a bit later today.

3

Hey @nazdeb, here’s a quick video demo on how to set this up using some JavaScript code: Loom | Free Screen & Video Recording Software | Loom

JavaScript

$.fn.duplifer = function (options)
{
	var settings = $.extend({
		colorGenerator: function (index)
		{
			var r = (Math.round(Math.random() * 127) + 127).toString(16);
			var g = (Math.round(Math.random() * 127) + 127).toString(16);
			var b = (Math.round(Math.random() * 127) + 127).toString(16);
		    console.log('#' + r + g + b);
			return '#' + r + g + b;
		},
		highlightClass: "duplifer-highlightdups"
	}, options);
	
	var cell_index = this.find("thead tr").find("th." + settings.highlightClass).index();
	var row_tds = $("tr td:nth-child(" + (cell_index + 1) + ")")
	var row_values = row_tds.map(function () {
			return $(this).html();
		}).get();
		
	var duplicates = row_values.filter(function (value, index) {
			return row_values.lastIndexOf(value) == index && row_values.indexOf(value) != index;
		});
		
	$(duplicates).each(function (duplicates_index) {
		const filter = row_tds.filter(function () {
			return $(this).html() == duplicates[duplicates_index];
		});
		console.log(filter);
		filter.css("background-color", settings.colorGenerator(duplicates_index));
	});
};
TB.render('component_ID', function(data) {
    $('table').find("thead tr").find("th:nth-child(1)").addClass('duplifer-highlightdups');
	$("table").duplifer();
});
1 Like
4

Hey @Chem, Thanks so much for your reply. I m just seeing it - i m not sure how I missed it.

Tried the code, and it works like a charm.

Thank you very much.

1 Like