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 Aura 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:
.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.
HTML Markup Code:
https://gist.github.com/71fe7aa18ea9545b8b82be0414e2c261
JS Controller Code:
https://gist.github.com/94e0d7adb751ce36a6c9a35397da592b
Output
Below is the output of the above component, a nicely colored data table based on the user’s condition and CSS classes.
Pingback: Lightning Autocomplete Drop Down Component - SFDCFacts
Lourdes
13 Jun 2019Hello Manish,
Thank you so much for sharing! I was able to follow through and it worked great. The only issue I am having is that when i try to apply my custom css class, it does not read the attributes. When I inspect in the browser, the class is attached to td tag, but the attributes did not apply. help?
Manish Choudhari
26 Jun 2019Yeah Lourdes, this seems to be an issue with LWC framework, I had faced the same. I am looking more into it and keep you posted.
Christopher Alun Lewis
5 Aug 2019Hi Lourdes / Manish.
This is happening because the Lightning Component Model enforces the Shadow DOM Web Component standard. This keeps all individual components entirely self contained, meaning components cannot update each others structure and style.
In your example here, you cannot alter the CSS properties of the child lightning-datatable component because it is self contained away from the parent custom component (imagine it is in a completely separate DOM). Although the class is being applied to the child component (this is still passed through the columns and data attributes), the CSS to control the appearance the child component based on that class is actually defined in the parent, so it is not applied.
However, there is a simple way around this. you can define the styles you want to apply (“diet-veg” etc.) in a static resource CSS file, say “myLightningStyles”.
Then in your component controller, add the following at the top of the file to import the CSS file:
import myLightningStyles from ‘@salesforce/resourceUrl/mylighntingstyles’;
Then add the following inside your export default class to load the style on initialisation:
connectedCallback() {
loadStyle(this, myLightningStyles);
}
This will load the styles and apply them to the child components as required.
For more information on this workaround, check out the following stack exchange question. User “pdebaty” originally suggested the static resource approach, so pass on some kudos:
https://salesforce.stackexchange.com/questions/246887/target-inner-elements-of-standard-lightning-web-components-with-css
Please note that in the future the way the Shadow DOM is implemented may be updated to allow cascading CSS changes. Just note that for now this isn’t a bug, it’s actually a designed part of the Lightning Web Component framework.
Hope that helps 🙂
Rafael
28 Jun 2019Hey Manish, any news on this? I was trying to add a CSS to make some urls not clickable while some are still clickable but it did the same as Lourdes, it added the tag, but the attributes did not apply.
Manish Choudhari
5 Jul 2019No Rafael, I am still checking on this. Somehow custom classes are not applying to data-table cells, and only slds classes are working.
Matthew Killeen
8 Aug 2019I believe in LWC the shadow DOM will make the CSS inaccessible to child components. Instead of using the class cell attribute, you can use the style class attribute instead:
cellAttributes: { style: { fieldName: ‘cellColour’ } }
then add your style in-line to your data:
test..cellColour = ‘background-color: black’;
Something like this should work.
Fabrice CHALLIER
5 Aug 2019Hi Manish, thanks for your nice example.
I’m trying to update the column header css, I would like to center the column and hide the (WRAP/CLIP text) but I’m unable to change anything within the column header, have you figured out a solution ?
vajire srinivas
29 Aug 2019Hi Manish, I was trying to apply the CSS to my table it is not applying to it.
I require to remove the button in the header(wrap/clip text) and sky blue color to the header and alternative colors to rows like(one-row white and one-row blue) by using the lightning data-table tag.
Then I tried by using table tag where I was able to apply the CSS but this table tag work only for the specific devices like MOBILE/DESKTOP/TAB (link:https://archive-2_6_1.lightningdesignsystem.com/components/data-tables/)