Conditionnal color on a table column

[NicolasFabre81]

I want to put a special font color on the first column "status" of my table if the field value is "new".
How can I bind the field value to "new" ?

I tried for example {{ mytable.status }} or {{mytable.rows.status}} without success ...

[melohagan]

Hi @NicolasFabre81

The only binding currently available within custom columns is the Value of that column for the particular row.

There is no way to access all the row data presently within a custom column.
It may be worth making the suggestion in this general table improvements issue: #3273

[rafikApp]

I also tried to create a column (color) of type formula which will have a color which depends on the status
with the following code :

const done = "";
return `<style>
:root {
  --preapp-background: ${done ? 'inherit' : $("CONSIGNATIONS Table.CONSIGNATIONS.color") };
  --preapp-color: ${done ? 'inherit' : 'whith'}
}
</style>`

but the same problem.

[melohagan]

Typo in 'white' you have 'whith'

[rafikApp]

Hey @melohagan thank you for your help.
I have the same problem.

const done = "";
switch($("CONSIGNATIONS Table.CONSIGNATIONS.statut")){
	case 'A confirmée':
		return `<style>
					:root {
						--preapp-background: ${done ? 'inherit' : 'rgba(0, 0, 255, 0.5)'};
						--preapp-color: ${done ? 'inherit' : 'white'}
					}
					</style>`
					break;
	case 'Consigné':
		return `<style>
					:root {
						--preapp-background: ${done ? 'inherit' : 'rgba(255, 0, 0, 0.5)'};
						--preapp-color: ${done ? 'inherit' : 'white'}
					}
					</style>`
					break;
	default : 
		return `<style>
					:root {
						--preapp-background: ${done ? 'inherit' : 'rgba(0, 255, 0, 0.5)'};
						--preapp-color: ${done ? 'inherit' : 'white'}
					}
					</style>`
					
}

[melohagan]

I'm not quite sure what could be wrong because I didn't write the solution, I have however a PR out for conditional table column color here: #8512

It may not get merged into the main codebase, but you're very welcome to fork my feature/conditional-table-cell branch.

[rafikApp]

Thank you very much @melohagan
But I didn't get how I can apply your method on my application

[xnohat]

This my hack for apply custom color format in table cell

Create an embed block in your screen with this code below

tableUnescapeHTMLFormat('table-component-name')

function tableUnescapeHTMLFormat(table_name){
	var table_elm = parent.document.querySelector(`[data-name=${table_name}`)

	if(!!table_elm){
		var table_heads = table_elm.firstChild.firstChild.firstChild.querySelector('div.spectrum-Table-head').querySelectorAll(':scope > *')
		var table_rows = table_elm.firstChild.firstChild.querySelector('div').querySelectorAll(':scope > *')

		//Scan every rows
		table_rows.forEach((row,idx)=>{
					//scan every cells of row and unescape html entities
					row.querySelectorAll(':scope > *').forEach((cell,idx)=>{
							//unescape html entities in all cell of table
							//https://stackoverflow.com/a/65592593
							var dummyTextArea = document.createElement('textarea');
							dummyTextArea.innerHTML = cell.firstChild.firstChild.innerHTML;
							cell.firstChild.firstChild.innerHTML = dummyTextArea.value;
					})
			})	
	}
}

Format column in Configure Column with plain HTML + CSS

[NicolasFabre81]

Hello @xnohat , for me it does not work, it displays the HTML code inside the table :

[xnohat]

You must rename your table component to table-component-name or anything else. Then change this line

tableUnescapeHTMLFormat('table-component-name')

to your table-name

[melohagan]

Hey @NicolasFabre81

You can use the Super Table to do this - I've added a short tutorial here: #10204