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.
KK
3 May 2019Hi 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