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
5

Is this code suppose to work on equation and/or dynamic fields as well?
Because it work for phone numbers, but not my ā€œfull nameā€ field that is a concatenate from ā€œfirst nameā€ and ā€œlast nameā€.

6

Equations typically are not well suited for conditional table formatting unless very simple results. Since a CONCAT name can have different variables (all caps, sentence case, etc.) the conditional formatting can run into glitches.