Come colorare le colonne di una tabella dati in Salesforce Lightning Web Component

In un Lightning Web Component di Salesforce, è possibile assegnare una classe CSS ad ognuna delle singole celle di una Tabella Dati in Lightning. Basta utilizzare la proprietà "cellAttributes" della colonna. La proprietà cellAttributes fornisce ulteriori personalizzazioni alla cella, come l'allineamento orizzontale, aggiungere un'icona all'output o assegnare una classe CSS alla cella.

È abbastanza semplice assegnare la proprietà cellAttributes in una definizione di una colonna:

{
	label: 'Test Type',
	fieldName: 'test',
	type: 'text',
	cellAttributes: {
		class: {
			fieldName: 'testCSSClass'
		}
	}
},

Nel codice sopra:

• Abbiamo creato una colonna con la label "Test Type". Ciò sarà visibile come intestazione della colonna della tabella dati.
• Il valore dei dati di ogni cella della colonna sarà in un field "test".
• Ogni cella della colonna può accettare una classe CSS "testCSSClass".

Di seguito un esempio:

{
	test : 'One',
	testCSSClass : 'test-one'
}

Ciò creerà una riga nella tabella dati con il valore nella cella = "One". È possibile anche avere la definizione della classe "test-one" nel file CSS del Component che verrà applicata a questa cella.

Un esempio della definizione della classe CSS:

.test-one {
	background : red;
}

Ciò colorerà la cella con uno sfondo rosso. È possibile definire anche altre proprietà CSS a piacimento.