Color Columns of Lightning Data Table – Aura Component

Color Columns of Lightning Data Table – Aura Component

Do you want to give your data table’s cells specific colors?
Do you want conditionally colorize your base data table component?
Are you bored of the same old plain data table?

The answer to all the above questions is this post. We will learn how you can colorize the cells of the lightning data table.

It's All Possible

Yes, it’s possible to assign a CSS class to each of the cells of the lightning data table. The secret here is to use “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. Check out the official documentation here.

Check Out LWC Version Of This Component

How To Do It?

It’s pretty simple to assign the cellAttributes property to a column definition. Check out a simple example below

{label: ‘Diet Type’, fieldName: ‘diet’, type: ‘text’, cellAttributes: { class: { fieldName: ‘dietCSSClass’ }}},

Things to observe from the above column definition:
– We are creating a column with a label/name as “Diet Type”. This will be visible as the header of the column of the data table.
– The data value each cell of this column will be in a field with “diet”.
– Each cell of this column can accept a CSS class name in field “dietCSSClass”.

A sample data for the above column look like below:
{diet : ‘Vegeterian’, dietCSSClass : ‘diet-veg’}

This will create a row in the data table with cell value as “Vegeterian”. Also you can have the definition of the class “diet-veg” in the CSS file of your component which will be applied to this cell.

A sample CSS class definition could be:
.THIS .diet-veg{
background : yellowgreen;
}

Now this will color your cell with a yellowgreen background. You can define other CSS properties as well.

Usage Example

Check out below sample component explaining everything we have learned so far.

Component Code:

Controller Code:

CSS Code:

Output

Below is the output of the above component, a nicely colored data table based on the user’s condition and CSS classes.

Check out more

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has One Comment

  1. Avatar

    Hi Manish,
    Thanks for the great blog posts. Really appreciate it. I’ve a question on lightning:datatable and was wondering if you could answer it. I want to add padding (top/bottom) to the column headers in data table. Is there a work around using CSS styling?
    Regards
    Krishna Kanth

Leave a Reply

Close Menu