How to color columns of Data Table in Salesforce Lightning Web Component

In a Salesforce Lightning Web Component, you can assign a CSS class to each of the cells of the Lightning Data Table. You can use the "cellAttributes" property of the column. The cellAttributes property provides additional customization to your cell, such as horizontal alignment, appending an icon to the output or assigning a CSS class to the cell.

It's very simple to assign the cellAttributes property to a column definition:

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

In the code above:

• We are creating a column with the label "Test Type". This will be visible as the header of the column of the data table.
• The data value of each cell of the column will be in a field "test".
• Each cell of the column can accept a CSS class "testCSSClass".

This is a sample data:

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

This will create a row in the data table with cell value as "One". You can also have the definition of the class "test-one" in the CSS file of your component which will be applied to this cell.

A sample CSS class definition could be:

.test-one {
	background : red;
}

This will color your cell with a red background. You can define other CSS properties as well.